Diyelimki işçi (Employee) ve Departmanlarını Ekleyerek Liste halinde Toplu olarak Kaydetmek istiyorsunuz;
Class Yapısı:
public class EmployeeModelClass
{
public string Name { get; set; }
public string Address { get; set; }
public string Contact { get; set; }
public IEnumerable<DepartmentModelClass> DeptList { get; set; }
}
public class DepartmentModelClass
{
public string DepartmentCode { get; set; }
public string DepartmentName { get; set; }
}Controller Yapısı:
public class EmployeeController : Controller
{
//
// GET: /Employee/
public ActionResult Index()
{
return View(new EmployeeModelClass());
}
[HttpPost]
public ActionResult Index(EmployeeModelClass emp, IEnumerable<DepartmentModelClass> dept)
{
emp.DeptList = dept;//Departman Listesini burada alarak dilediğimizce save yapabiliriz.
return View(emp);
}
}View Yapısı:
@model MvcApplication5.Models.EmployeeModelClass
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel=" stylesheet" />
</head>
<body>
@using (Html.BeginForm())
{
<div>
Emp Name @Html.TextBox("Name", Model.Name) <br /><br />
Address @Html.TextBox("Address", Model.Address) <br /><br />
Contact @Html.TextBox("Contact", Model.Contact) <br /><br />
@*<table>
<tr>
<th>Dept Code</th>
<th>Dept Name</th>
</tr>
@{
for (int i = 0; i < 4; i++)
{
<tr>
<td> @Html.TextBox("[" + i + "].DepartmentCode") </td>
<td> @Html.TextBox("[" + i + "].DepartmentName")</td>
</tr>
}
}
</table>*@
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Name</td>
<td>Gmail</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4">
<input type="text" name="[0].DepartmentCode" class="form-control" />
</td>
<td class="col-sm-4">
<input type="text" name="[0].DepartmentName" class="form-control" />
</td>
<td class="col-sm-2">
<a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
</td>
</tr>
<tr></tr>
</tfoot>
</table>
</div>
<input type="submit" value="Submit" /> <br /><br />
@{
if (Model.Name != null)
{
<div>
Employee Name : @Model.Name <br />
Address : @Model.Address <br />
Contact : @Model.Contact <br />
@{
if (Model.DeptList != null)
{
<table>
<tr>
<th>Dept code</th>
<th>Dept Name</th>
</tr>
@{
foreach (var dept in Model.DeptList)
{
<tr>
<td>@dept.DepartmentCode</td>
<td>@dept.DepartmentName</td>
</tr>
}
}
</table>
}
}
</div>
}
}
<hr />
<hr />
</div>
}
<script type="text/javascript">
$(document).ready(function () {
var counter = 1;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" class="form-control" name="[' + counter + '].DepartmentCode' + '"/></td>';
cols += '<td><input type="text" class="form-control" name="[' + counter + '].DepartmentName' + '"/></td>';
//cols += '<td><input type="text" class="form-control" name="[' + counter + ']' + ".DepartmentCode' '" /></td > ';
//cols += '<td><input type="text" class="form-control" name="[' + counter + ']' + ".DepartmentName' '" /></td > ';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
counter -= 1
});
});
function calculateRow(row) {
var price = +row.find('input[name^="price"]').val();
}
function calculateGrandTotal() {
var grandTotal = 0;
$("table.order-list").find('input[name^="price"]').each(function () {
grandTotal += +$(this).val();
});
$("#grandtotal").text(grandTotal.toFixed(2));
}
</script>
</body>
</html>