Динамически собрать коллекцию до публикации формы, используя jQuery в asp.net mvc 2

Question

В моем графе объектов у меня есть стандартное отношение родитель + дети. Скажи что-то вроде

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

Когда у меня есть форма для нового кота, я хочу добавить ноль или много котят до нажатия кнопки сохранения. Так как это новый 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>