Dynamic row with pass data to controller
View
--------------------------------------------------------------------------------------------------------------------------
@model IEnumerable<Insert_Multiple_Rows_EF_MVC.Models.CustomerModel>
@using Insert_Multiple_Rows_EF_MVC.Models
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style type="text/css">
body {
font-family: Arial;
font-size: 10pt;
}
.table {
border: 1px solid #ccc;
border-collapse: collapse;
}
.table th {
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
.table th, .table td {
padding: 5px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<table class="table" cellpadding="0" cellspacing="0">
<tr>
<td> Name : </td>
<td><input type="text" name="txtUserName" id="txtUserName" /></td>
</tr>
</table>
<table id="tblCustomers" class="table" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th style="width:150px">Name</th>
<th style="width:150px">Country</th>
<th></th>
</tr>
</thead>
<tbody>
@if (Model == null)
{
<tr>
<td colspan="3"> No data found</td>
</tr>
}
else
{
foreach (CustomerModel customer in Model)
{
<tr>
<td>@customer.Name</td>
<td>@customer.Country</td>
<td><input type="button" value="Remove" onclick="Remove(this)" /></td>
</tr>
}
}
</tbody>
<tfoot>
<tr>
<td><input type="text" id="txtName" /></td>
<td><input type="text" id="txtCountry" /></td>
<td><input type="button" id="btnAdd" value="Add" /></td>
</tr>
</tfoot>
</table>
<br />
<input type="button" id="btnSave" value="Save All" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script type="text/javascript">
$("body").on("click", "#btnAdd", function () {
//Reference the Name and Country TextBoxes.
var txtName = $("#txtName");
var txtCountry = $("#txtCountry");
//Get the reference of the Table's TBODY element.
var tBody = $("#tblCustomers > TBODY")[0];
//Add Row.
var row = tBody.insertRow(-1);
//Add Name cell.
var cell = $(row.insertCell(-1));
cell.html(txtName.val());
//Add Country cell.
cell = $(row.insertCell(-1));
cell.html(txtCountry.val());
//Add Button cell.
cell = $(row.insertCell(-1));
var btnRemove = $("<input />");
btnRemove.attr("type", "button");
btnRemove.attr("onclick", "Remove(this);");
btnRemove.val("Remove");
cell.append(btnRemove);
//Clear the TextBoxes.
txtName.val("");
txtCountry.val("");
});
function Remove(button) {
//Determine the reference of the Row using the Button.
var row = $(button).closest("TR");
var name = $("TD", row).eq(0).html();
if (confirm("Do you want to delete: " + name)) {
//Get the reference of the Table.
var table = $("#tblCustomers")[0];
//Delete the Table row using it's Index.
table.deleteRow(row[0].rowIndex);
}
};
$("body").on("click", "#btnSave", function () {
//Loop through the Table rows and build a JSON array.
var customers = new Array();
$("#tblCustomers TBODY TR").each(function () {
var row = $(this);
var customer = {};
customer.Name = row.find("TD").eq(0).html();
customer.Country = row.find("TD").eq(1).html();
customers.push(customer);
});
var data1 = {
customers: customers,
Name:$("#txtUserName").val()
}
//Send the JSON array to Controller using AJAX.
$.ajax({
type: "POST",
url: "/Home/InsertCustomers",
data: JSON.stringify({ customers: customers, Name: $("#txtUserName").val() }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
alert(r + " record(s) inserted.");
}
});
});
</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------
Controller
--------------------------------------------------------------------------------------------------------------------------
public JsonResult InsertCustomers(List<Customer> customers,string Name)
{
using (CustomersEntities entities = new CustomersEntities())
{
//Truncate Table to delete all old records.
entities.Database.ExecuteSqlCommand("TRUNCATE TABLE [Customers]");
//Check for NULL.
if (customers == null)
{
customers = new List<Customer>();
}
//Loop and insert records.
foreach (Customer customer in customers)
{
entities.Customers.Add(customer);
}
int insertedRecords = entities.SaveChanges();
return Json(insertedRecords);
}
}
Comments
Post a Comment