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

Question

我正在试图学习ASP.NET MVC 3，但我的背景是Web表单。我正在尝试找出实现我想要的MVC方式，并且真正的难点在于我不知道该搜索什么！我无法理解如何处理更复杂的模型。asp.net网站上的所有教程都围绕着相当简单的数据对象展开，并因此使用简单的编辑器来管理这些数据。想象一个虚构的Party booking应用程序的模型：关键在于客人集合。我想了解如何实现控制器+视图，以允许我在同一页中创建Party并同时添加新Guests（最好具有内部基于ajax的客人添加/删除功能）。在asp.net Web Forms中的类似应用程序中，可以轻松地将客人的功能放在UpdatePanel中。但我不确定如何在MVC中实现这一点。如果有人有任何提示、指针或链接到讨论类似话题的文章，我会非常感激。谢谢。

- slippyr4

Answer 1

使用jQuery ajax处理添加多个访客的操作。

1) 使用模态弹窗：点击“添加访客”按钮时，调用你的Action方法，在一个模态对话框中返回Guest数据（可以使用jQuery UI对话框）。使用ajax post调用保存数据。在成功事件后，将新的访客数据附加到主表单的访客列表中，或者使用jQuery load重新加载该部分。

2) 在页面上添加：点击“添加访客”按钮后，在主表单本身中显示表单（可以使用JavaScript以各种方式动态创建输入框和保存按钮）。使用jQuery ajax post保存数据，并将数据作为JSON发送。只要参数名与ViewModel的属性名匹配，你的Action方法就可以接受数据。

你的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
        }
       }
     });
   });
});

您的保存操作方法

[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/（一些值在示例中是硬编码的）。

- Shyju

Answer 2

有许多方法可以实现这一点，但其中一部分考虑因素是底层数据库布局。创建视图时，您可以将其强类型化为Party对象，然后通过客人集合，您将可以访问客人属性。然后将创建客人的方法添加到Party模型中。或者，您可以拥有单独的Party和Guest模型，带有或不带有集合，然后创建将Party与Guest联系起来的视图模型。然后将视图强类型化为视图模型。

可能还有更好或“更正确”的方法来实现这一点。

- Brian

Answer 3

使用第三个容器模型。

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的参考。如果您愿意，您还可以为Guest创建一个PartialView，或者只是使用一些“未绑定”的输入。

- Dave Becker