MVC 5 - Information in partial view is null after submit - asp.net-mvc

Question

I have a large form and it's becoming too big so I want to start using partial view to keep it cleaner.
Here is a little part of the form that shows the main contact and a list of alternative contacts. The user can add more contacts (the buttons shows a popup to insert new contact) and the user can change the contact from active to inactive (through the checkbox on the table). Right now this is working but like i said i want to be able to use a partial view for the table.
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">Contacts</h3>
</div>
<div class="box-body">
<div class="form-group">
<div class="col-xs-4">
<label>Phone:</label>
#Html.EditorFor(model => model.Persons.Phone, new { htmlAttributes = new { #class = "form-control", #id = "phone" } })
#Html.ValidationMessageFor(model => model.Persons.Phone, "", new { #class = "text-danger" })
</div>
<div class="col-xs-8">
<label>Email:</label>
#Html.EditorFor(model => model.Persons.Email, new { htmlAttributes = new { #id = "email", #class = "form-control", #placeholder = "Introduza o email..." } })
#Html.ValidationMessageFor(model => model.Persons.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<label>Address:</label>
#Html.TextAreaFor(model => model.Persons.Address, new { #class = "form-control", #placeholder = "Introduza a morada...", #rows = 3 })
#Html.ValidationMessageFor(model => model.Persons.Address, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
#if (Model.Contacts != null && Model.Contacts.Count > 0)
{
<table id="example2" class="table table-bordered table-hover dataTable" aria-describedby="example2_info">
<thead>
<tr role="row">
<th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending">Contact</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example2" rowspan="1" colspan="1">Contact Type</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example2" rowspan="1" colspan="1">Active</th>
</thead>
<tbody role="alert" aria-live="polite" aria-relevant="all">
#{
string cssClass = string.Empty;
string activo = string.Empty;
}
#for (var i = 0; i < Model.Contacts.Count; i++)
{
cssClass = i % 2 == 0 ? "even" : "odd";
<tr class="´#cssClass">
<td class=" ">#Html.DisplayFor(model => Model.Contacts[i].Contact)</td>
<td class=" ">#Html.DisplayFor(model => Model.Contacts[i].contacttypes.Name)</td>
<td class=" ">#Html.CheckBoxFor(model => Model.Contacts[i].IsActive, new { #class = "flat-green" })</td>
</tr>
#Html.HiddenFor(model => Model.Contacts[i].ContactsId)
}
</tbody>
</table>
}
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<input type="button" value="Add New Contact" class="buttonCreate btn btn-primary btn-sm" />
</div>
</div>
</div>
So here is the same HTML using the partial view
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">Contacts</h3>
</div>
<div class="box-body">
<div class="form-group">
<div class="col-xs-4">
<label>Phone:</label>
#Html.EditorFor(model => model.Persons.Phone, new { htmlAttributes = new { #class = "form-control", #id = "phone" } })
#Html.ValidationMessageFor(model => model.Persons.Phone, "", new { #class = "text-danger" })
</div>
<div class="col-xs-8">
<label>Email:</label>
#Html.EditorFor(model => model.Persons.Email, new { htmlAttributes = new { #id = "email", #class = "form-control", #placeholder = "Introduza o email..." } })
#Html.ValidationMessageFor(model => model.Persons.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<label>Address:</label>
#Html.TextAreaFor(model => model.Persons.Address, new { #class = "form-control", #placeholder = "Introduza a morada...", #rows = 3 })
#Html.ValidationMessageFor(model => model.Persons.Address, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
#Html.Partial("ContactListControl", Model.Contacts)
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<input type="button" value="Add New Contact" class="buttonCreate btn btn-primary btn-sm" />
</div>
</div>
</div>
and here is the Partial view:
#model List<RecruitmentWeb.Models.contacts>
<table id="example2" class="table table-bordered table-hover dataTable" aria-describedby="example2_info">
<thead>
<tr role="row">
<th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending">Contato</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example2" rowspan="1" colspan="1">Tipo de Contato</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example2" rowspan="1" colspan="1">Activo</th>
</thead>
<tbody role="alert" aria-live="polite" aria-relevant="all">
#{
string cssClass = string.Empty;
string activo = string.Empty;
}
#for (var i = 0; i < Model.Count; i++)
{
cssClass = i % 2 == 0 ? "even" : "odd";
<tr class="´#cssClass">
<td class=" ">#Html.DisplayFor(model => Model[i].Contact)</td>
<td class=" ">#Html.DisplayFor(model => Model[i].contacttypes.Name)</td>
<td class=" ">#Html.CheckBoxFor(model => Model[i].IsActive, new { #class = "flat-green" })</td>
</tr>
#Html.HiddenFor(model => Model[i].ContactsId)
}
</tbody>
The Problem
If the user changes a contact from active to inactive or vice-versa, when I submit the form the changes don't go through. In fact, the list is null and contains no information. It works if i don't use partial view.
So what I'm I missing?

Answer 1

You passing only a property of your model to the partial so the the hidden inputs you are generating have the name attribute name="[0].ContactsId", name="[1].ContactsId" etc. whereas they needs to be name="Contacts[0].ContactsId", name="Contacts[1].ContactsId" etc (ditto for the checkboxes).
Change the partial view model to the same as the main view (you haven't indicated what it is), and then pass the model as
#Html.Partial("ContactListControl", Model)
and adjust the Html helpers to suit. However I would recommend you consider using a custom EditorTemplate for RecruitmentWeb.Models.Contacts rather than a partial view for this.