.net MVC Master Detail View with associated records - asp.net-mvc

Question

I am looking to make a Master Detail View.
I have two tables tbFamily and tbFamilyMember.
I am currently able to view the Family Details and list the associated family members, however, I want to seperate the Family Members based on their Role. i.e. I want to display a list of the Parents/Guardians and then a list of the children ordered by Date of Birth.
My Models are as follows:
public class tbFamily
{
public int tbFamilyID { get; set; }
public string Surname { get; set; }
public string Address1 { get; set; }
public string Address2 { get; set; }
public string Address3 { get; set; }
public string Town { get; set; }
public string County { get; set; }
public string Postcode { get; set; }
public string Country { get; set; }
public string Telephone { get; set; }
public string Mobile { get; set; }
public string Email { get; set; }
public virtual ICollection<tbFamilyMember> tbFamilyMember { get; set; }
public virtual ICollection<tbFamilyData> tbFamilyData { get; set; }
}
public class tbFamilyMember
{
public int tbFamilyMemberID { get; set; }
public int tbFamilyID { get; set; }
public int Role { get; set; }
public string Firstname { get; set; }
public string Surname { get; set; }
public char Gender { get; set; }
[DisplayFormat(DataFormatString = "{0:d}", ApplyFormatInEditMode = true)]
public DateTime DateOfBirth { get; set; }
public virtual tbFamily tbFamily { get; set; }
}
My Controller currently looks as follows:
public ActionResult Details(int id = 0)
{
tbFamily tbfamily = db.tbFamily.Find(id);
if (tbfamily == null)
{
return HttpNotFound();
}
return View(tbfamily);
}
Its associated View
#Html.DisplayFor(model => model.Surname)
#Html.DisplayFor(model => model.Address1)
#Html.DisplayFor(model => model.Address2)
#Html.DisplayFor(model => model.Address3)
#Html.DisplayFor(model => model.Town)
#Html.DisplayFor(model => model.County)
#Html.DisplayFor(model => model.Postcode)
#Html.DisplayFor(model => model.Country)
#Html.DisplayFor(model => model.Telephone)
#Html.DisplayFor(model => model.Mobile)
#Html.DisplayFor(model => model.Email)
#foreach (var item in Model.tbFamilyMember)
{
#Html.DisplayFor(modelItem => item.Firstname)
#Html.DisplayFor(modelItem => item.Surname)
#Html.DisplayFor(modelItem => item.Role)
}
To Get the Children:
public ActionResult GetChildren(int id)
{
var tbFamilyData = from f in db.tbFamilyMember
where f.tbFamilyID.Equals(id)
where f.Role.Equals(3)
select f;
return View(tbFamilyData);
}
Its associated View:
#foreach (var item in Model.tbFamilyData)
{
#Html.DisplayFor(modelItem => item.tbFamilyMember.Firstname)
#Html.DisplayFor(modelItem => item.tbFamilyMember.Surname)
#Html.DisplayFor(modelItem => item.tbFamilyMember.Role)
}
Just not sure how to get the two working together!
I have created a seperate Model tbFamilyData
public class tbFamilyData
{
public virtual tbFamily tbFamily { get; set; }
public virtual tbFamilyMember tbFamilyMember { get; set; }
}
I am now getting the error tbFamilyData has no key defined.
Hoping someone can help.

Answer 1

I would suggest one of two options:
1) create viewmodels that better represent your views, and fill them in the controller (my preferred solution).
public class FamilyViewModel
{
public string Surname { get; set; }
... // other props
public ICollection<FamilyMemberViewModel> Parents { get; set; }
public ICollection<FamilyMemberViewModel> Children { get; set; }
}
2) use Linq methods in your view to filter the data to display
<h1>Parents</h1>
#foreach (var item in Model.tbFamilyMember.Where(x => x.Role == Roles.Parent))
{
...
}
<h1>Children</h1>
#foreach (var item in Model.tbFamilyMember.Where(x => x.Role == Roles.Child)
.OrderBy(x => x.DateOfBirth))
{
...
}