How to POST and Catch a view model with a parent o

Question

I want to add a family which has many members and can have many houses. I am trying to make a form and submit the object family with collection of other objects. I have tried few things but I can only get one object to pass to controller and not the collection. What can i do?
should i make member and house partial views and render them in the view ??
Is there any way of doing this with collecting everything in JavaScript and then passing a whole family object to the controller?
I am using MVC 5 with Entity Framework. I am not able to solve this problem. Any help is appreciated.

here is an example of objects

public class family
{

    public int id { get; set; }
    public int familyname { get; set; }
    public List<member> members { get; set; }
    public List<house> houses { get; set; }
}

public class member
{
    public int id { get; set; }
    public string name { get; set; }
    public DateTime birthdate { get; set; }

    //foreign key
    public family Family { get; set; }
    public int FamilyID { get; set; }
}

public class house
{

    public int id { get; set; }
    public int number { get; set; }
    public string address { get; set; }
    //foreign key
    public family Family { get; set; }
    public int FamilyID { get; set; }
}

public class FamilyViewModel
{
   public family Family { get; set; }
    public member Member { get; set; }
    public house House { get; set;}
    public List<member> Members { get; set; } //??
    public List<house> Houses { get; set; } //??
}

View

@model WebApp.ViewModels.FamilyViewModel
@{
    ViewBag.Title = "New";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Family</h2>
@using (Html.BeginForm("Submit", "Family"))
{
    <div class="form-group">
      @Html.LabelFor(m => m.Family.familyname)
      @Html.TextBoxFor(m => m.Family.familyname, new { @class = "form-control"})
    </div>
    <div id="member">
    </div>
    <div id="house">
    </div>
}

Controller

    [HttpPost]
    public ActionResult Submit(FamilyViewModel CompleteFamily)
    {
        //What to do here?

        return View();
    }

Answer 1

First of all please change the datatype of familyname to string, inside family class. And FamilyViewModel will be same as your family class.

Currently I'm working on a MVC project that have this type of functionality. See, in this case, first you need to save data for family. While saving, members and houses will be null. For example, for the first time you are saving data, then suppose here family id is 1, familyname is John, members and houses will be null. Hope you understood till this.

You already render two partial view for members and houses. Provide two buttons in the main view(that is nothing but your family view). 1 is for Add Members and another 1 is for Add Houses. So when user click on Add Members show one popup modal or anything you want, where user can submit family members. Similarly for houses.

Then while saving family members (I mean when they click on SAVE button in members popup modal), just call a jquery/ajax function and post your data to controller method including the current family Id.

See my bellow code,

//This will be inside a popup modal for members,

<div class="row with-forms">
 <div class="col-md-12">
   <h5>Member Name</h5>
    <input class="search-field" type="text" name="name" id="memberName" />
  </div>
  <div class="col-md-12">
    <h5>Birth Date</h5>
    <input class="search-field" type="text" name="DOB" id="memberDOB" />
  </div>  
  <div class="col-md-12">
    <input class="btn btn-success" type="button" id="saveMembers" />
  </div>                       
</div>

//My jquery/ajax code to save members data

$("#saveMembers").click(function () {
  var membersData = [{
         name: $("#memberName").val(),
         birthdate: $("#memberDOB").val()                   
       })
  var CompleteFamily = {
                id: $("#hiddenFamilyId").val(), //keep your familyId in a 
                                                //hidden field in same page
                members: membersData,
                //houses: houseData //similarly u can add house data here
            }
  $.ajax({
          "url": "/yourControllerName/FamilyViewModel",
           "type": "Post",
           "data": CompleteFamily,
           success: function (data) {
            //show a message that member added to this family
           }
         })

Thats it. Then you can save your data in Action method. Like this you can post houses data for the same familyId in same ajax method.

In your controller Action method you can validate like this,

public ActionResult Submit(FamilyViewModel CompleteFamily)
{
 if(FamilyViewModel.id == 0)
   // This is a new entry to family.
   // Return your new familyId in a viewBag and keep that in a hidden field 
   //in your view HTML
 else
   {
     //You just need to update the family. I mean, here you are adding 
     //members and houses to the respective family Id.
   }
 }

See, dont forget to return your familyId in a viewBag or what ever you want, and keep that in a hidden field in HTML. So that only you can add members/houses to that respective Id. Like the way I'm passing data in the above ajax.

For example, your familyId in HTML like bellow,

<input type="hidden" id="hiddenFamilyId" value="@ViewBag.familyId"/>

Hope it solve your problem. Cheers...