80342

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 <strong>family</strong> which has many <strong>members</strong> and can have many <strong>houses</strong>. 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?<br /> should i make member and house partial views and render them in the view ??<br /> Is there any way of doing this with collecting everything in JavaScript and then passing a whole family object to the controller? <br /> 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> }

<strong>Controller</strong> <br />

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

Answer1:

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

Currently I'm working on a MVC project that have this type of functionality. See, in this case, <strong>first</strong> you need to save data for <strong>family</strong>. While saving, <em>members</em> and <em>houses</em> will be <em>null</em>. 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 <strong>Add Members</strong> and another 1 is for <strong>Add Houses</strong>. 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 <strong>family Id</strong>.

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

Recommend

  • Naming convention for components and namespaces in cmake
  • Round float to the nearest 2/100
  • Indexing string in Python
  • What's the ruby way to write a multi-line lazily calculated methods?
  • How to write the Captcha?
  • hive与timeline server
  • tensorflow py_func is handy but makes my training step very slow.
  • What does coercing the “direction” argument input in roc function (package pROC in R) do exactly?
  • Publishing an Excel Workbook in Sharepoint Site
  • Will a IDisposable be disposed if the using block returns?
  • Sparql: how to GROUP BY More Than One Column
  • Is there a way to inject a try catch inside a function?
  • perl - Math with duplicate entries in array
  • Exception Child services have no parent when starting Optaplanner application
  • Muxing a H.264 Annex B & AAC stream using libavformat with vcopy/acopy
  • RobotFramework - AutoItLibrary: Importing test library “AutoItLibrary” failed
  • hadoop jar command points to local filesystem
  • Interactive labeling of images in jupyter notebook
  • Passing HTTP Post from AWS API GW to Lambda
  • Is there a .NET method equivalent to NETWORKDAYS in Excel?
  • Slick: How can I combine a SQL LIKE statement with a SQL IN statement
  • Auto send email based on the time and email address in database
  • ASP.NET MVC 2 actions for the same route?
  • xpath assertion failure with dynamic xpath
  • concise way of flattening multiindex columns
  • Floating parent div grows to hypothetical width of floating child div
  • 'url' requires a non-empty first argument. The syntax changed in Django 1.5, see the docs
  • How to clear a browser cache in Protractor
  • Can a PHP script be scheduled to run at a specific time or after a specific amount of time has expir
  • reshape/remould data frame to create normalized bar chart and pie chart
  • read part of h5 dataset python
  • Passing value from popup window to parent form's TextBox
  • How do I use TagLib-Sharp to write custom (PRIV) ID3 frames?
  • WPF custom control and direct content support
  • CAS 4 - Not able to retrieve the LDAP groups after successful authentication
  • Time Complexity of Fibonacci Algorithm [duplicate]
  • How to check if object is null in Java?