Hi sunnyk21,
Check this example. Now please take its reference and correct your code.
Model
ItemRequest
public class ItemRequest
{
public int ItemCode { get; set; }
public string ItemName { get; set; }
}
Item
public class Item
{
public string ItemName { get; set; }
public int Quantity { get; set; }
public int Price { get; set; }
public int Amount { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
TempData["Items"] = GetItemDetails();
return View();
}
public List<ItemRequest> GetItemDetails()
{
Cascading_ddlEntities db = new Cascading_ddlEntities();
List<ItemRequest> result = new List<ItemRequest>();
result.Add(new ItemRequest { ItemCode = 0, ItemName = "Select" });
var obj = db.Countries.ToList();
if (obj != null && obj.Count() > 0)
{
foreach (var data in obj)
{
ItemRequest model = new ItemRequest();
model.ItemCode = data.CountryId;
model.ItemName = data.CountryName;
result.Add(model);
}
}
return result;
}
public JsonResult InsertItems(List<Item> items)
{
// Do rest code.
return Json("");
}
}
View
<body>
<div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
function Add() {
AddRow($("#dditemlist option:selected").text(), $("#txtQty").val(), $("#txtPrice").val());
$("#dditemlist").val("0");
$("#txtQty").val("");
$("#txtPrice").val("");
};
function AddRow(name, qty, price) {
var tBody = $("#tblItems > TBODY")[0];
//Add Row.
row = tBody.insertRow(-1);
//Add Name cell.
var cell = $(row.insertCell(-1));
cell.html(name);
//Add Qty cell.
cell = $(row.insertCell(-1));
cell.html(qty);
//Add Price cell.
cell = $(row.insertCell(-1));
cell.html(price);
//Add Amount cell.
cell = $(row.insertCell(-1));
cell.html(parseInt(qty) * parseInt(price));
//Add Button cell.
cell = $(row.insertCell(-1));
var btnRemove = $("<a>Remove</a>");
btnRemove.attr("href", "#");
btnRemove.attr("onclick", "Remove(this);");
cell.append(btnRemove);
};
function Remove(button) {
var row = $(button).closest("TR");
var name = $("TD", row).eq(0).html();
if (confirm("Do you want to delete item : " + name)) {
var table = $("#tblItems")[0];
table.deleteRow(row[0].rowIndex);
}
};
function Save() {
var items = new Array();
$("#tblItems TBODY TR").each(function () {
var row = $(this);
var item = {};
item.ItemName = row.find("TD").eq(0).html();
item.Quantity = row.find("TD").eq(1).html();
item.Price = row.find("TD").eq(2).html();
item.Amount = row.find("TD").eq(3).html();
items.push(item);
});
//Send the JSON array to Controller using AJAX.
$.ajax({
type: "POST",
url: "/Home/InsertItems",
data: JSON.stringify(items),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
alert(r + " record(s) inserted.");
}
});
}
</script>
<table class="table table-responsive">
<tr>
<th>Item Name</th>
<th>Qty</th>
<th>Price</th>
<th></th>
</tr>
<tr>
<td><%:Html.DropDownList("ddlItems", new SelectList((IEnumerable)TempData["Items"], "ItemCode", "ItemName"), new { @class = "form-control", id = "dditemlist" })%></td>
<td><input type="text" id="txtQty" class="form-control" /></td>
<td><input type="text" id="txtPrice" class="form-control" /></td>
<td><input type="button" id="btnAdd" value="Add" onclick="Add()" class="btn btn-primary" /></td>
</tr>
</table>
<table id="tblItems" class="table table-responsive">
<thead>
<tr>
<th>Item</th>
<th>Qty</th>
<th>Price</th>
<th>Amount</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<br />
<input type="button" id="btnSave" value="Save" onclick="Save()" class="btn btn-primary" />
</div>
</body>
For insert refer below article.
