使用 MVC .NET 从 HTML 表单对发布的数组进行分组

Question

我正在使用 ASP.NET MVC 开发一个非常灵活的 HTML 表单。我有一个“数量”输入元素，它稍后会在表单中动态创建 [其值] 输入元素集。

例如，如果数量设置为 1，我有一组用于用户名、房间号和建筑物名称的文本框。但如果 Quantity 设置为 10，则每个文本框都会出现 10 个。

显然，当数据回传到服务器时，我需要正确地将每个用户名、房间和建筑物分组在一起，而不是把它们弄得乱七八糟。

似乎最简单的方法是使每个集合都相同：

<input type="text" name="username"/>
<input type="text" name="room"/>
<select name="building">                           <!--All this x Quantity-->
   <option value="TARDIS">TARDIS</option>
   <option value="USS Enterprise">USS Enterprise</option>
</select>

<input type="text" name="username"/> <!--And so on...-->

然后相信 POST 字符串将保留元素在 HTML 中写入的顺序，从而允许我在将这些值捕获到 usernames[0]、rooms[0] 的数组中后在服务器上回复, 和 buildings[0] 一起出现，相同索引的所有其他条目也是如此。

这是否 100% 有效？安全吗？我可以想出一些方法来在输入组之间建立一个快速的关联，但是它们涉及到一些有点刺激性的 javascript 和一些非常令人讨厌的 C#。这似乎可以开箱即用。嗯？

Answer 1

Phil Haack 很好地解释了您的输入字段的预期名称，以便将它们绑定到 this blog post 中的强类型集合。所以你所要做的就是尊重这个约定。您可能还会发现来自 Steven Sanderson 的 following blog post 很有趣，因为他解释了如何在实践中实现此场景。在他的示例中，他使用了添加/删除项目按钮，但这可以很容易地转换为您在文本框中输入要添加的项目数量的场景。

Answer 2

构建一个您的表单可以映射到的模型

public class PostedModel
{
 public List<DataGroup> PostedData { get; set; }
}

public class DataGroup
{
 public string username { get; set; }
 public string room { get; set; }
 public string? building { get; set; }//nullable because this is bound do a dropdownlist
}

在你的表单中，符合模型

<!-- Input Set 0 -->
<input type="text" name="PostedData[0].username"/>
<input type="text" name="PostedData[0].room"/>
<select name="PostedData[0].building">
 <option value="TARDIS">TARDIS</option>
 <option value="USS Enterprise">USS Enterprise</option>
</select>

<!-- Input Set 1 -->
<input type="text" name="PostedData[1].username"/>
<input type="text" name="PostedData[1].room"/>
<select name="PostedData[1].building">
 <option value="TARDIS">TARDIS</option>
 <option value="USS Enterprise">USS Enterprise</option>
</select>

<!-- Input Set 2 -->
<input type="text" name="PostedData[2].username"/>
<input type="text" name="PostedData[2].room"/>
<select name="PostedData[2].building">
 <option value="TARDIS">TARDIS</option>
 <option value="USS Enterprise">USS Enterprise</option>
</select>

自动将帖子绑定到您之前创建的模型

[HttpPost]
public ActionResult PostedAction ( PostedModel model )
{
 //use the data
 for( DataGroup curr in model.PostedData )
 {
   curr.username
   curr.room
   curr.building.Value //.Value because it was set to nullable with the ?
 }
 return RedirectToAction("BaseAction");//Post-Redirect-Get pattern
}