ASP.NET MVC 5 : Editing multiple records in a view and model binding (Bulk data update)

Question

I need correction on the code below. I have 2 classes "Employee" and "Child". When I want to create a new Employee, I would like to be able to create in that same form the related Child (2 Children maximum).

Below are the models

public class Employee
{
    public int EmployeeID { get; set; }
    public string Name { get; set; }
    public string Surname { get; set; }

    public int ChildID { get; set; }

    public virtual ICollection<Child> Childs { get; set; }

}

public class Child
{
    public int ChildID { get; set; }
    public string NameChild { get; set; }
    public string SurnameChild { get; set; }

    public virtual Employee Employee { get; set; }
}

The Employee controller

public class EmployeController : Controller
{
    private ComideContext db = new ComideContext();

    // GET: Employe/Create
    public ActionResult Create()
    {
        List<Child> model = new List<Child>();
        return View(model);
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "EmployeID,Name,Surname,ChildID")] Employee employee)
    {
        if (ModelState.IsValid)
        {
            db.Employes.Add(employe);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        return View(employe);
    }
}

The View of the Employee form

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Employe</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.Surname, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Surname, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Surname, "", new { @class = "text-danger" })
            </div>
        </div>

        @for (int i=0; i<2; i++ )
        {
            <div class="form-group">
                @Html.LabelFor(model => model.NameChild, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.NameChild, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.NameChild, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.SurnameChild, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.SurnameChild, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.SurnameChild, "", new { @class = "text-danger" })
                </div>
            </div>
        }


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

Any help/thoughts would be most appreciated.

Thank you.

Some options for dynamically adding and removing collection items [here](http://stackoverflow.com/questions/29161481/post-a-form-array-without-successful/29161796#29161796) and [here](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) — , Nov 09 '15 at 22:05
Also `public int ChildID { get; set; }` should be removed (you have a collection of `Child`, not a single item) — , Nov 09 '15 at 22:06

victor · Answer 1 · 2015-11-09T15:18:26.973

Disclaimer: I've done this on MVC 3. I don't know if there is an easier way to do it in MVC 5.

You will need to index the children in the view code so when you submit the form the model binder knows how to construct the Employee object.

This could be done this way:

 for (var i = 0 ; i < collectionSize; i++)
{
    @Html.EditorFor(child => Model.Childs[i].ChildID)
    @Html.ValidationMessageFor(child => Model.Childs[i].ChildID)
    [....]
}

This would require your collection to be initialized when passed to the view.

Another way you can bind to collection is to programatically build the html components' name to include their index in the list. See the example below:

<input name="Employee.Childs[0].ChildID" >
<input name="Employee.Childs[1].ChildID" >

ASP.NET MVC 5 : Editing multiple records in a view and model binding (Bulk data update)

1 Answers1