ASP.NET MVC 3 中带有子集合的模型答案

【问题标题】：Model with child collections in ASP.NET MVC 3ASP.NET MVC 3 中带有子集合的模型
【发布时间】：2012-04-24 20:10:00
【问题描述】：

我正在尝试学习来自 Web 表单背景的 ASP.NET MVC 3。我正在尝试找出实现我想要的 MVC 方式，而实际困难在于我不确定要谷歌什么！

我无法理解的是如何使用更复杂的模型。 asp.net 站点上的所有教程都围绕相当简单的数据对象工作，因此使用它们来管理数据的编辑器也相当简单。

想象一个假设的派对预订应用程序的模型：-

公开课派对 { 公共字符串 PartyName {get;set;} 公共日期时间派对日期 {get;放; } 公共 ICollection 客人 {get;放;} } 公开课嘉宾 { 公共字符串名称 {get;放;} 公共字符串电子邮件地址 {get;放;} }

这里的关键是客人的集合。

我想了解如何实现，是如何实现控制器+视图，这将允许我在单个页面中创建派对并同时添加新客人（最好使用客人添加/在 ajax 中删除页内功能）。

在 asp.net 网络表单中的类似应用程序中，将访客的功能放在 UpdatePanel 中会很直接。但我不确定如何在 MVC 中实现这一点。

如果有人有任何提示、提示或讨论类似主题的文章链接，我将非常感激，

谢谢

滑倒

【问题讨论】：

标签： asp.net asp.net-mvc asp.net-mvc-3

【解决方案1】：

使用第三种容器模型

public class BookingModel
{
  public Party PartyModel { get; set; }
  public Guest GuestModel { get;set; }
}

然后将 BookingModel 绑定到您可以访问 PartyModel 和 GuestModel 的视图

编辑：哎呀，再次阅读问题。

public class BookingModel
{
  public Party PartyModel { get; set; }
}

然后在你的 BookingController 中有一个方法：

public ActionResult AddGuest(string name)
{
  BookingModel.Guests.Add(new Guest() { Name=name });
}

显然，您首先需要参考 BookingModel。如果您愿意，也可以为访客创建一个 PartialView，或者只使用一些“未绑定”输入。

【讨论】：

【解决方案2】：

使用 jQuery ajax 来处理添加许多客人。

1) 使用模型弹出窗口 当您单击“添加访客”按钮时，调用您的 Action 方法，该方法会在模型对话框中返回用于 m 的访客（jQuery UI 对话框是此处使用的一个选项） .使用 ajax post 调用保存数据。一个成功事件，将新的客人数据附加到客人的主要表单列表或仅使用 jquery load 重新加载该部分

2) 页面内添加 当您点击添加访客按钮时，在主表单本身中，显示表单（您可以通过多种方式从javascript动态创建输入框和保存按钮） .使用 jQuery ajax 帖子保存数据。以 json 格式发送数据。只要参数名称与您的 ViewModel 的属性名称匹配，您的操作方法就可以接受数据

您的 HTML 页面

<a href="#" id="addNew"> Add Guest</a>

<div id="divForm" style="display:none">
    <input type="text" id="txtName" />
    <input type="text" id="txtEmail" />
    <input type="button" id="btnSaveGuest" value="Save"/>
</div>
<ul>

<div id="divGuests"></div>

在你的脚本中

$(function(){
  //Show the hidden form
  $("#addNew").click(function(){
      $("#divForm").fadeIn(300);
  }); 

   //Save the new guest details
   $("#btnSaveGuest").click(function() {
     var name=$("#txtName").val();
     var email=$("#txtEmail").val();
     $.ajax({
        url: '@Url.Action("SaveGuest","Guest")',
        data: {Name: name, EmailAddress :email},
       success: function(data) {

        if(data=="true")
        {
          //Saved successfully.May be append to list of Guest
          $("#divGuests").append("<p>"+name+"</p>");
        }
        else
        {
          //Error. Show msg to user
        }
       }
     });
   });
});

你要保存的 Action 方法

[HttpPost]
public ActionResult SaveGuest(Guest objGuest)
{
  try
  {
  // read the objGuest property values and Save to db

   return "true";
  }
  catch(Exception e)
  {
     //Log error
     return "false";
  }
}

这是一个示例应用程序：http://jsfiddle.net/Qzk3F/16/ （示例中的某些值是硬编码的）

【讨论】：

【解决方案3】：

有很多方法可以做到这一点，但部分考虑是底层数据库布局。创建视图时，您可以将其强输入到 Party 对象中，然后通过客人的集合，您将可以访问客人的属性。然后将创建客人的方法添加到派对模型中。或者，您可以为聚会和来宾使用单独的模型，无论是否包含集合，然后创建一个将聚会与来宾联系起来的视图模型。然后将视图强输入到视图模型中。

可能还有更好或“更正确”的方法可以做到这一点。

【讨论】：