How to POST and Catch a view model with a parent object and list of child objects in EF MVC?

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();
    }

If your editing existing objects in the collection, then refer [this answer](http://stackoverflow.com/questions/30094047/html-table-to-ado-net-datatable/30094943#30094943). If you want to dynamically add (and delete) items in the collection, then refer [this answer](http://stackoverflow.com/questions/40539321/a-partial-view-passing-a-collection-using-the-html-begincollectionitem-helper/40541892#40541892) — , Mar 18 '17 at 03:54
Are you looking at just editing existing items or you also need to add new items? — sachin, Mar 18 '17 at 15:32
I am looking to add and edit them. But first add and then display and edit. — Pat mann, Mar 18 '17 at 20:11
So how you are showing Family and Members ? In different partial view ? — Basanta Matia, Mar 18 '17 at 20:23
That is where I am confused. I have partial views for member and House. In the view for Family, I render member and house. — Pat mann, Mar 18 '17 at 20:36
For add, first save family temporarily in database and use ajax to add members and houses(no matter you use partial or not). For edit, it is simple because you have it save in db. Also, if you get null values for members and houses, it is because you are using lists. To get edited or new values for houses and members, use array of houses and members in family and use for loop inside the view — Efe, Mar 19 '17 at 06:49

Basanta Matia · Answer 1 · 2017-03-20T06:42:14.480

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...

How to POST and Catch a view model with a parent object and list of child objects in EF MVC?

1 Answers1

Linked