在 asp.net mvc 2 中使用 jQuery 在表单发布之前动态构建集合

Question

在我的对象图中，我有一个标准的父+子关系。可以这样说：

Cat.Kittens = new HashSet();

当我有一个新猫的表单时，我想在单击“保存”按钮之前添加零只或多只小猫。由于它是一只新猫，我也不想将小猫发布到服务器（即使用 AJAX 等；我只想使用保存按钮将一个大转储发送到服务器）。我正在尝试找出有效的最佳方法，但谷歌的能力不足。一定有人已经这么做了。

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

有什么想法吗？好的例子吗？ 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; }
}

Controller

       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());
    }

View

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