Add multiple Rows dynamically in MVC

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>
}