Question

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

我不相信使用Javascript将文本框添加到表单会是一个问题，但我很困惑如何在将POST数据提交到表单处理程序后完全处理它。任何人都可以谈谈最好的解决方法吗？

Answer 1

如果必须使用包含所有表单值的普通POST变量，您应该能够执行以下操作：

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

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

然后在服务器上，您需要找到以“foo”和“bar”开头的POST变量中的每个项目

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

使用JS动态添加元素到表单

2 个答案: