添加元素以使用JS动态形成表单

Question

我已经在我的MySQL表中创建了15个字段，并希望最终用户可以选择使用表单来添加这么多项。然而，为了保持界面的整洁，我只想给他们提供2-3个文本框，并给他们一个按钮，让他们可以在需要时添加更多内容。

我不认为使用Javascript将文本框添加到表单是一个问题，但是我很困惑，一旦我将POST数据提交给表单处理程序，如何准确地处理它。有没有人能解释一下最好的方法呢？

Answer 1

如果你必须使用一个包含所有表单值的普通POST变量，你应该能够这样做：

当使用服务器语言和/或javascript生成文本框时，它们被发送到服务器的方式是使用它们的name属性。如果您提供了一种一致的命名元素的方式，您可以将事物与数字“组合”起来。例如，如果您在用户每次单击"Add“时提供两个文本框(一个用于"foo”，一个用于"bar")，则可以递增末尾的数字以确保它们匹配。

<input type="text" name="foo1" /><input type="text" name="bar1" />
<input type="text" name="foo2" /><input type="text" name="bar2" />
and so on

for (item in POST) {
    if (item startswith "foo") {
        // Extract the number at the end, and find the related "bar"
    }
}

Answer 2

假设您正在使用ASP.NET MVC作为web应用程序，以及jQuery作为客户端框架。

让我们更多地假设你有一个这样的模型：

public class Gift
{
    public string Name { get; set; }
    public double Price { get; set; }
}

您的初始操作和数据可能如下所示：

public ActionResult Index()
{
    var initialData = new[] {
        new Gift { Name = "Tall Hat", Price = 39.95 },
        new Gift { Name = "Long Cloak", Price = 120.00 },
    };
    return View(initialData);
}

然而，您的观点可能是：

<h2>Gift List</h2>
What do you want for your birthday?

<% using(Html.BeginForm()) { %>
    <div id="editorRows">
        <% foreach (var item in Model)
            Html.RenderPartial("GiftEditorRow", item);
        %>
    </div>

    <input type="submit" value="Finished" />
<% } %>

礼物编辑器的部分视图可以是：

<div class="editorRow">
    <% using(Html.BeginCollectionItem("gifts")) { %>
        Item: <%= Html.TextBoxFor(x => x.Name) %>
        Value: $<%= Html.TextBoxFor(x => x.Price, new { size = 4 }) %>
    <% } %>
</div>

关键是"BeginCollectionItem“辅助方法，这在ASP.NET MVC中不是标准的。它将为可变长度模型生成一些密钥。稍后我将添加一个指向文件的链接。您的处理程序将如下所示：

[HttpPost]
public ActionResult Index(IEnumerable<gift> gifts)
{
    // To do: do whatever you want with the data
}

通过这种方法，您可以获得一个礼物列表，其中包含文本框中的值。要再添加一个项目，您需要向此视图发送一个ajax请求：

希望能有所帮助来源：http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/下载：http://blog.codeville.net/blogfiles/2010/January/ListEditorDemo.zip