MVC3形式在局部视图中

时间:2012-05-30 00:16:09

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

我正在寻找在MVC3,JQuery AJAX中完成以下内容的最佳方法:

我有一个购物车,人们可以在购物车中输入不同的货物来解决购物车中的每件商品。 我们的想法是让这艘船在每个产品下方形成,并带有一个Save按钮,并通过JQuery AJAX提交。

我一直试图这样做的方法是将表单放在局部视图中(连同Html.BeginForm和提交SAVE按钮),然后将部分视图呈现在foreach循环中在视图上(将viewmodel项传递给局部视图表单)。

一切都适用于购物车中的第一个产品,但是当我尝试输入并提交购物车中第二个或第三个产品的任何其他表单地址时,我实际上从第一个产品获取ID并更新该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。

谢谢!

2 个答案:

答案 0 :(得分:1)

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

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

});

答案 1 :(得分:1)

如果其他人需要做类似的事情我最后通过在表单中​​添加一个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对象而正确解析。