Add Multiple Rows in MVC
Model Folder :
namespace WebApplication4.Models
{
public class Employee
{
public int ID { get; set; }
public string Name { get; set; }
public string Location { get; set; }
public string PhoneNo { get; set; }
public List<Department> Departments { get; set; }
}
public class Department
{
[Required(AllowEmptyStrings = false, ErrorMessage = "Code required!")]
public string Code{ get; set; }
[Required(AllowEmptyStrings = false, ErrorMessage = "Name required!")]
public string Name { get; set; }
}
}
Controller Folder
public class TestController : Controller
{
// GET: Test
public ActionResult Create()
{
return View(new Employee());
}
[HttpPost]
public ActionResult Create(Employee emp, List<Department> depts)
{
emp.Departments = depts;
// Save Logic
return View(emp);
}
}
Create.cshtml
@model WebApplication4.Models.Employee
@{
ViewBag.Title = "Create";
}
<h2>Create</h2>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Employee</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Location, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Location, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Location, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.PhoneNo, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.PhoneNo, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.PhoneNo, "", new { @class = "text-danger" })
</div>
</div>
<div><a href="#" id="addNew">Add New</a></div>
<table id="dtTable" border="0" cellpadding="0" cellspacing="0">
<tr>
<th>Code :</th>
<th>Name :</th>
<th></th>
</tr>
@if (Model != null && Model.Departments!=null)
{
int j = 0;
foreach (var i in Model.Departments)
{
<tr style="border:1px solid black">
<td>@Html.Editor("[" + j + "].Code")</td>
<td>@Html.Editor("[" + j + "].Name")</td>
<td>
@if (j > 0)
{
<a href="#" class="remove">Remove</a>
}
</td>
</tr>
j++;
}
}
else
{
for (int i = 0; i < 1; i++)
{
<tr>
<td> @Html.Editor("[" + i + "].Code") </td>
<td> @Html.Editor("[" + i + "].Name")</td>
<td>
@if (i > 0)
{
<a href="#" class="remove">Remove</a>
}
</td>
</tr>
}
}
</table>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
<div>
@{
if (Model.Name != null)
{
<div>
Emp Name : @Model.Name <br />
Location : @Model.Location<br />
PhoneNo : @Model.PhoneNo <br />
@{
if (Model.Departments != null)
{
<table>
<tr>
<th>code</th>
<th>Name</th>
</tr>
@{
foreach (var dept in Model.Departments)
{
<tr>
<td>@dept.Code</td>
<td>@dept.Name</td>
</tr>
}
}
</table>
}
}
</div>
}
}
</div>
</div>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script language="javascript">
$(document).ready(function () {
//1. Add row
$("#addNew").click(function (e) {
e.preventDefault();
var $tableBody = $("#dtTable");
var $trLast = $tableBody.find("tr:last");
var $trNew = $trLast.clone();
var suffix = $trNew.find(':input:first').attr('name').match(/\d+/);
$trNew.find("td:last").html('<a href="#" class="remove">Remove</a>');
$.each($trNew.find(':input'), function (i, val) {
// Replaced Name
var oldN = $(this).attr('name');
var newN = oldN.replace('[' + suffix + ']', '[' + (parseInt(suffix) + 1) + ']');
$(this).attr('name', newN);
//Replaced value
var type = $(this).attr('type');
if (type.toLowerCase() == "text") {
$(this).attr('value', '');
}
$(this).removeClass("input-validation-error");
});
$trLast.after($trNew);
var form = $("form")
.removeData("validator")
.removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse(form);
});
// 2. Remove
$('a.remove').live("click", function (e) {
e.preventDefault();
$(this).parent().parent().remove();
});
});
</script>
}
