表单提交中的asp.net razor模型绑定动态列表

Question

我正在尝试为输入创建一个订单表单。

我需要用户能够添加多个订单项然后更新。我试图 使用购物车类（用户创建一个购物车项目并添加一个 列表项，可以在列表项中添加多行）。

我没有解决这个问题。我正在使用 asp.net razor 正在使用 webmatrix 建立网站。 Webmatrix 说它无法识别 Cart()。

@{ 
if (Session["cart"] == null)
{
Session["cart"] = new Cart();
}
Cart cart = (Cart)Session["cart"];

}
<table id="cartTable">
<tr>
<th class="product">Product</th>
<th class="size">Size</th>
<th class="price">Price</th>
</tr>
@foreach (var item in cart.Items)
{
<tr>
<td class="product">@item.ProductID</td>
<td class="size">@item.Size</td>
<td class="price">£@item.Price</td>
</tr>
}
</table>

有没有更好的方法来做到这一点？非常感谢所有帮助

Answer 1

有一种方法可以绑定动态列表元素

@foreach (i=0; i< cart.Items.count; i++)
{
<tr>
   <td class="product"> <input type="hidden" name="cart.item[@i].ProductID"> </td>
   <td class="size"> <input type="text" name="cart.item[@i].Size"> </td>
   <td class="price">£ <input type="text" name="cart.item[@i].Price"> </td>
</tr>
}

---

Webmatrix is saying that it doesnt recognise Cart()

我强烈建议您将模型放在 Models 文件夹中，并使它们成为 Models 命名空间的一部分。然后它们应该自动可用。否则，您可能必须通过它的完整参考路径来引用购物车（如果它不在您的模型文件夹中）。例子

Datalayer.Entities.Cart cart = (Datalayer.Entities.Cart)Session["cart"];

---

最后说明： 您没有将购物车作为模型传递给您的视图

例子

@model {Project}.Entities.Cart

这是使用 MVC 3 框架的更好做法。您会更早发现任何参考问题，并且可以选择使用紧密绑定的 Helpers

Answer 2

我建议使用 Visual Studio 2012 Express over WebMatrix 进行 MVC 开发。此外，如果您希望让用户通过同一页面即时添加订单项，我还建议您使用 jQuery (javascript)。如果您愿意，我可以与您分享一个示例。

另一个注意事项：您使用 MVC 和 WebForms 标记了这个，它们是两个非常不同的平台。

编辑：

我认为 Dave A 的解决方案可能更好，但要使用 jQuery 来做到这一点：

1 将您的添加按钮和隐藏div 放在一个表单中

<form action="/MyController/MyAction" method="post" id="addListItemForm">
<button id="addListItemButton">Add List Item</button>
<div style="hidden">
<input type="text" name="product" id="product" />
<button id="addButton">Add</button>
</div>
<input type="submit" text="Submit" />
</form>

2 在按钮单击时显示表单字段

$('#addListItemButton').click(function(){
  $('#addListItemForm div').show();
});

3 在添加按钮单击时添加隐藏字段

$('#addButton').click(function(){
  var product = $('#addListItemForm #product').val();
  $("input").attr({
            name : "productListItems[]", 
            type : "hidden",
            value : product
        }).after('#addListItemForm');
});

4 当表单提交时，您将在productListItems数组中通过POST方法传递各种产品名称。

注意：您将不得不稍微玩一下，但这将是一个很好的学习练习...我不确定您要做什么，但这是我的最佳猜测。