1

我正在使用 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#。这似乎可以开箱即用。诶？

4

2 回答 2

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
}
于 2012-10-31T21:29:04.513 回答
1

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

于 2012-10-31T21:25:50.327 回答