动态生成之前的集合形成后在asp.net MVC 2

Question

使用jQuery在我的对象图，我有一个标准的父+孩子的关系。这样说，

Cat.Kittens = new HashSet<Cat>();

当我有一个新的猫一个形式，我想零或一对多的小猫添加点击保存按钮之前。由于它是一个新的猫，我也不想将小猫发布到服务器（即使用AJAX或类似的;我只是想用保存按钮做一个大转储到服务器）。我试图找出以某种效率来做到这一点的最佳方式，但在Google上不足。有人必须已经这样做了。

我不太关心父猫是否是新的或没有;如果我必须将小猫添加到编辑表单，那就这样吧。对我来说，问题是如何在客户端动态添加多个小猫，然后在存储数据之前能够按摩控制器中的集合。

任何想法？很好的例子？ jQuery + asp.net mvc 2是堆栈。

在此先感谢！

Answer 1

它可以以一种形式来完成我已经这样做了，我会继续隐藏页面上的空白小猫输入表单然后将它与jQuery的拷贝，当客户说再添小猫。
控制器是它得到一个有点艰难

public class Cat 
{ 
    public string name { get; set; } 
    public List<Kitten> Kittens { get; set; } 

} 

public class Kitten 
{ 
    public int id { get; set; } 
    public string color { get; set; } 
    public string CatName { get; set; } 
} 

控制器

 public ActionResult AddCat() 
    { 
     return View(); 
    } 

    [HttpPost] 
    public ActionResult AddCat(Cat c) 
    { 
     var sb = new StringBuilder(); 
     sb.Append(c.name); 
     sb.Append("kittens are : " + Request.Form["color"]); 
     return Content(sb.ToString()); 
    } 

查看

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Kittens.Models.Cat>" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> 
AddCat 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
<h2> 
    AddCat</h2> 
<% using (Html.BeginForm()) 
    {%> 
<%: Html.ValidationSummary(true) %> 
<fieldset> 
    <legend>Fields</legend> 
    <div class="editor-label"> 
     <%: Html.LabelFor(model => model.name) %> 
    </div> 
    <div class="editor-field"> 
     <%: Html.TextBoxFor(model => model.name) %> 
     <%: Html.ValidationMessageFor(model => model.name) %> 
    </div> 
    <table id="kittenDest"> 
     <tr> 
      <td colspan="2"> 
       <input id="Button1" type="button" value="add Kitten" /> 
      </td> 
     </tr> 
    </table> 
    <p> 
     <input type="submit" value="Create" /> 
    </p> 
    <table id="kittenForm" style="display: none;"> 
    <tr> 
     <td>     
      <input id="color" name="color" value="" type="text" /> 
     </td> 
    </tr> 
</table> 
</fieldset> 
<% } %> 
<div> 
    <%: Html.ActionLink("Back to List", "Index") %> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#Button1").click(function() { 
      $("#kittenDest").append($("#kittenForm").html()); 
     }); 
    }); 
</script>