局部视图中的 MVC3 表单答案

【问题标题】：MVC3 form in partial view局部视图中的 MVC3 表单
【发布时间】：2012-05-30 00:16:08
【问题描述】：

我正在寻找在 MVC3、JQuery AJAX 中完成以下任务的最佳方法：

我有一个购物车，可以为购物车中的每个产品输入不同的船舶地址。我们的想法是让这艘船在每个产品的正下方形成，并带有一个保存按钮，并通过 JQuery AJAX 提交。

我一直在尝试的方法是将表单放在局部视图中（以及 Html.BeginForm 和提交 SAVE 按钮），然后在 foreach 循环中呈现局部视图在视图上（将视图模型项传递给部分视图表单）。

对于购物车中的第一个产品一切正常，但是当我尝试为购物车中的第二个或第三个产品输入并提交任何其他表单地址时，我实际上从第一个产品中获取了 ID 并更新了那个。

通过 Google 阅读，我找到了有关模型绑定到表单的文章，但对于这些情况，我在 foreach 循环之前有一个整体 Html.BeginBeginForm 并且只有一个提交按钮。如何为每个产品下的每个表单设置一个提交 (SAVE) 按钮并通过 AJAX 调用提交？

提前谢谢你！！！

更新：

也许为了更好地了解我在这里所做的事情是这个例子：

在 Cart.cshtml 的主视图中，我有：

@foreach (var item in Model.CartItems)
{
   @Html.Partial("ShipToAddress", new AddressViewModel(item.CartDetailsId))
}

然后在 ShipToAddress.cshtml，部分视图中，我有：

@using (Html.BeginForm("SaveShipToAddress", null, FormMethod.Post))
{ 
  @Html.HidenFor(model => model.ItemId)
  @Html.TextBoxFor(model => model.Name)
  @Html.TextBoxFor(model => model.Address)
  <input type="submit" value="Save" id="saveShipToAddress" />
}

然后我有了与此表单相关联的 jquery 脚本文件并通过 AJAX 提交。

我认为我的问题是表单位于部分视图内，因此当它生成时，它对购物车中的所有项目都有相同的 ID。

谢谢！

【问题讨论】：

标签： jquery ajax asp.net-mvc-3 razor

【解决方案1】：

使用 jQuery serialize 方法序列化该部分表单并将其发送到操作方法。您仍然可以在那里进行模态绑定。您可以在保存按钮单击事件中执行类似的操作。

$.post("Yourcontroller/YourAction", $("#formId").serialize() ,function(data){
  //do whatever with the response

});

【讨论】：

我确实序列化了表单，问题似乎与我如何在局部视图中拥有表单有关。因为整个表单都在部分视图中，所以当主视图被渲染时，我最终会为每个项目获得相同的表单（所有输入的 ID 相同等）所以，当我点击提交时，它会得到第一个，而不是第二个。

【解决方案2】：

如果其他人需要做类似的事情，我最终通过在表单中添加 itemId 属性来解决这个问题：

@using (Html.BeginForm("SaveShipToAddress", null, FormMethod.Post, new { @class = "frmShipToAddress", itemId = Model.ItemId.ToString() }))

然后是我抓取的 jquery 文件：

var shipAddress = {   
itemId: form.attr('itemId'),
name: form.find('input[name="Name"]').val(),
address: form.find('input[name="Address"]').val() }

var jsonData = JSON.stringify(shipAddress);

并将 jsonData 传递给 ajax 调用，然后在控制器中接收并由于使用 viewmodel 对象而正确解析。

【讨论】：