Nested Collection Models in MVC to Add Multiple Phone Numbers - Part 1

public partial class Employee  
{  
    public Employee()  
    {  
        this.Phones = new HashSet<Phone>();  
    }  
    
    public int EmployeeId { get; set; }  
    public string Name { get; set; }  
    public string Salary { get; set; }  
    public virtual ICollection<Phone> Phones { get; set; }  
    
    internal void CreatePhoneNumbers(int count = 1)  
    {  
        for (int i = 0; i < count; i++)  
        {  
            Phones.Add(new Phone());  
        }  
    }  
}

public ActionResult New()
{
    var employee = new Employee();
    employee.CreatePhoneNumbers(2);
    return View(employee);
}

Creating a view for the employee model above is also simple. Let's update the view page you added in the previous step with the following code.

New. cshtml

@{  
    ViewBag.Title = "New";  
}  
<h2>Add New Employee</h2>  
@using (Html.BeginForm()) {  
    @Html.AntiForgeryToken()  
    @Html.EditorForModel()  
    <p>  
        <button type="submit">Create Employee</button>  
    </p>  
}  

If you run this view here, you will see the following output.

So, I will call this view page template-less. You can see I am using EditorForModel(), this will look at the type of model, then go looking for available templates in the EditorTemplates folder for a file named Employee.cshtml that we don't have. Let's add a new View page at the location Views|Employee|EditorTemplates|Employee.cshtml and add the following code.

Employee.cshtml

@model NestedModelsMvc.Models.Employee
@Html.HiddenFor(x => x.EmployeeId)
<p>
    <label>Name</label>
    @Html.TextBoxFor(x => x.Name)
</p>

<p>
    <label>Salary</label>
    @Html.TextBoxFor(x => x.Salary)
</p>

<div id="phoneNumbers">
    @Html.EditorFor(x => x.Phones)
</div>

Now, again inside Employee. cshtml, we have an EditorFor(). This will again look at the type of model, then go looking for available templates in the EditorTemplates folder for a file named Phone. cshtml that we don't have. Let's add this too.

Phone.cshtml

@model NestedModelsMvc.Models.Phone  

<div class="phoneNumber">  
    <p>  
        <label>Phone Number</label>  
        @Html.TextBoxFor(x => x.PhoneNumber)  
        @Html.HiddenFor(x => x.DeletePhone, new { @class = "mark-for-delete" })  
    </p>  
</div>  

Now, let me show you the view files so you aren't confused with the view file placements.

Now we are ready to run the New. cshtml file to look at the generated UI.

Great Start! Let's look at the generated HTML markups.

In the HTML markup above, you can see two div tags that have the class="phoneNumber" and inside that we have two input fields.

The first field that is generated by TextBoxFor(x => x.PhoneNumber) has type="text" where the user will enter a phone number. The second field that is generated by HiddenFor(x => x.DeletePhone, new { @class = "mark-for-delete" }) has type="hidden" that will work as a flag whether to delete or not.

Notice, we called EditorFor(x => x.Phones) in Employee. cshtml and it looped through our phone numbers and created two nested editors each editor has a format defined in Phone. cshtml and see how smartly id and name attributes are filled up with index-based words.

You can also notice the value attribute is blank, this will be filled with value="True" when the user marks for deletion. So, if the value is blank we don't need to execute the delete query, you will see it later.

Step 4. Deleting Phone Number

You will learn this in Part 2.

Hope this helps.