如何在 EF MVC 中发布和捕获带有父对象和子对象列表的视图模型？

Question

我想添加一个家庭，它有很多成员，并且可以有很多房屋。我正在尝试制作一个表格并提交带有其他对象集合的对象系列。我尝试了几件事，但我只能让一个对象传递给控制器​​而不是集合。我能做什么？
我应该制作成员和房屋部分视图并将它们呈现在视图中吗？？
有没有办法通过收集 JavaScript 中的所有内容然后将整个家庭对象传递给控制器​​来做到这一点？
我正在使用带有实体框架的 MVC 5。我无法解决这个问题。任何帮助表示赞赏。

这是一个对象的例子

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; } //??
}

查看

@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>
}

控制器

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

        return View();
    }

Answer 1

首先请在family类中将familyname的数据类型改为string。 FamilyViewModel 将与您的 family 类相同。

目前我正在开发一个具有此类功能的 MVC 项目。请注意，在这种情况下，首先您需要为家庭保存数据。保存时，members 和 houses 将为 null。 例如，第一次保存数据，那么假设这里的家庭 id 为 1，familyname 为 John，members 和 house 将为 null。 希望你能理解到这里。

您已经为成员和房屋渲染了两个局部视图。在主视图中提供两个按钮（这不过是您的家庭视图）。 1 用于添加成员，另外 1 用于添加房屋。因此，当用户单击添加成员时，会显示一个弹出模式或您想要的任何内容，用户可以在其中提交家庭成员。房屋也是如此。

然后在保存家庭成员时（我的意思是当他们在成员弹出模式中单击 SAVE 按钮时），只需调用 jquery/ajax 函数并将您的数据发布到控制器方法，包括当前的 family Id。

查看我的以下代码，

//这将在成员的弹出模式中，

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

//我的jquery/ajax代码保存会员数据

$("#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
           }
         })

就是这样。然后您可以将数据保存在 Action 方法中。像这样，您可以在相同的ajax方法中发布相同familyId的房屋数据。

在您的控制器 Action 方法中，您可以像这样进行验证，

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

看，不要忘记在 viewBag 或任何你想要的东西中返回你的familyId，并将它保存在 HTML 中的隐藏字段中。这样只有您可以将成员/房屋添加到相应的 ID。就像我在上面的 ajax 中传递数据的方式一样。

例如，您在 HTML 中的familyId，如下所示，

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

希望它能解决您的问题。干杯...