HTML表单从集合中提交单个项目

我有一个部分视图，其中包含卖方的视图模型。我在所有卖家上循环以渲染清单。这是视图模型：

public class SellersPartialViewModel
{
    public IList<OrderViewModel> Sellers { get; set; }
}

在部分视图中，我正在使用html.begincollectionitem（"卖家"），当我循环浏览集合时，这是我的部分代码（FYI，我已经删除了很多无需的无用代码可以看到）：

<div id="sellers-list">
    @{
        var i = 0;
        while (i < Model.Sellers.Count) { 
            var seller = Model.Sellers[i];
                using (Ajax.BeginForm(MVC.Video.PurchaseShares(), purchaseSharesAjaxOptions, new { @class = "seller-form", id = "seller-form-" + i })) {
                    @using(Html.BeginCollectionItem("Sellers")) {
                        @Html.TextBoxFor(m => seller.Qty, new { @class = "buyer-qty" })
                        @Html.ValidationMessageFor(m => seller.Qty)
                       <input class="buyer-qty-submit" name="Qty" type="hidden" value="" />
                       <button type="submit">Buy</button>
                    }
                }
            }
            i++;
        }
    }
</div>

这可以很好地渲染部分并获得客户端验证工作但是，我希望每个卖家都将名为qty和orderId的输入用于称为PurchaseShares(int orderId, int qty)的控制器操作。

唯一的问题是，表格是用奇数GUID（如Sellers[5b5fd3f2-12e0-4e72-b289-50a69aa06158].seller.Qty）提交的，我知道这是正确提交集合的正确的，但我不需要这样做。

现在，我有一些JavaScript，可以使用他们选择的任何方法来更新class="buyer-qty"，但是必须有更好的方法来执行此操作，否？

谢谢

如果您不想提交集合，为什么要使用Html.BeginCollectionItem助手？

您可以有一个部分代表您的订单收集项目（_Order.cshtml）：

@model OrderViewModel
@Html.TextBoxFor(m => m.Qty, new { @class = "buyer-qty" })
@Html.ValidationMessageFor(m => m.Qty)

在您的主视图中，只需循环浏览您的收集属性，并为每个元素渲染部分：

@model SellersPartialViewModel
<div id="sellers-list">
    @foreach (var seller in Model.Sellers)
    {
        using (Ajax.BeginForm(MVC.Video.PurchaseShares(), purchaseSharesAjaxOptions, new { @class = "seller-form" }))
        {
            @Html.Partial("_Order", seller)
            <button type="submit">Buy</button>
        }
    }
</div>

现在，您要提交的控制器操作可以直接与相应的视图模型一起使用：

[HttpPost]
public ActionResult PurchaseShares(OrderViewModel order)
{
    ...
}

因为：

[HttpPost]
public ActionResult PurchaseShares(int orderId, int qty)
{
    ...
}

对我来说看起来更丑陋，但是如果您喜欢它，它也会起作用。

另外，请注意，我故意删除了代码中显示的Qty隐藏字段，因为它会与以相同名称的输入元素冲突。另外，不要忘记在orderId参数中包含一个输入字段，即您的控制器行动正在期望或提交时可能会轰炸。另外，如果您不想将其包含在输入字段。

也可以将其作为Ajax.BeginForm助手的routeValues参数的一部分发送。

相关内容

最新更新

热门标签：