Issue when trying to use partial view inside view - asp.net-mvc

Question

still learning MVC (slowly) which I am enjoying but having some trouble with partial views. If anyone could point me in the right direction that would be great!
This is the error I am getting:
InvalidOperationException: The model item passed into the dictionary
is of type
'System.Collections.Generic.List1[mvc_project.Models.Contact]', but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable1[mvc_project.ViewModels.ViewContactsVM]'.
I created the partial view using the List template.
Chose my model ViewContactsVM
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
namespace mvc_project.ViewModels
{
public class ViewContactsVM
{
[Key]
public int ContactID { get; set; }
public int ClientID { get; set; }
[DisplayName("Contact Name")]
public string ContactName { get; set; }
[DisplayName("Contact Phone Number")]
public string ContactPhoneNumber { get; set; }
[DisplayName("Contact Email Address")]
public string ContactEmailAddress { get; set; }
[DisplayName("Job Title")]
public string JobTitle { get; set; }
public string AddedBy { get; set; }
}
}
Controller code:
public ActionResult _ContactList(int id)
{
using (var context = new mvc_projectEntities())
{
var data = context.Contacts.Where(x => x.ClientID == id).ToList();
return View(data);
}
}
_ContactsList Partial View Page:
#model IEnumerable<mvc_project.ViewModels.ViewContactsVM>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.ClientID)
</th>
<th>
#Html.DisplayNameFor(model => model.ContactName)
</th>
<th>
#Html.DisplayNameFor(model => model.ContactPhoneNumber)
</th>
<th>
#Html.DisplayNameFor(model => model.ContactEmailAddress)
</th>
<th>
#Html.DisplayNameFor(model => model.JobTitle)
</th>
<th>
#Html.DisplayNameFor(model => model.AddedBy)
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.ClientID)
</td>
<td>
#Html.DisplayFor(modelItem => item.ContactName)
</td>
<td>
#Html.DisplayFor(modelItem => item.ContactPhoneNumber)
</td>
<td>
#Html.DisplayFor(modelItem => item.ContactEmailAddress)
</td>
<td>
#Html.DisplayFor(modelItem => item.JobTitle)
</td>
<td>
#Html.DisplayFor(modelItem => item.AddedBy)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id=item.ContactID }) |
#Html.ActionLink("Details", "Details", new { id=item.ContactID }) |
#Html.ActionLink("Delete", "Delete", new { id=item.ContactID })
</td>
</tr>
}
</table>
Details View Page:
#{
ViewBag.Title = "Details";
}
<h2>Details</h2>
#Html.Action("_ContactList")

Answer 1

It is necessary to pass the ViewContactsVM type to the view, as it defined in the view data model. Therefore try:
public ActionResult _ContactList(int id)
{
using (var context = new mvc_projectEntities())
{
var data = context.Contacts
.Where(x => x.ClientID == id)
.Select(c => new mvc_project.ViewModels.ViewContactsVM() {
ContactID = c.ContactID,
ClientID = c.ClientID,
ContactName = c.ContactName
...
})
.ToList();
return View(data);
}
}