asp.net-mvc-4 - HtmlBeginCollectionItem 获取当前项目

Question

我需要：

1. 访问/客户端/创建
2. 动态添加部分视图（/Product/Card）并将它们绑定到 Client.Products
3. 在每个部分视图中，当我单击一个按钮时，打开一个引导模式窗口，我可以在其中设置产品信息
4. 关闭模态并将模态的变化反映在卡片的产品中。

问题是：如何在另一个视图（除了卡片）中更改产品信息并反映到卡片的产品上？

@using (Html.BeginCollectionItem("Products"))
{
    @Html.HiddenFor(model => model.ClientID)
    @Html.HiddenFor(model => model.ProductID)


    <div class="card">
        <img class="card-img-top" src="http://macbook.nl/wp-content/themes/macbook/images/png/iphone318x180.png" alt="Grupo Logo">
        <div class="card-block">
            <h4 class="card-title">@Model.Name</h4>
            <p class="card-text">@Model.Desc</p>
            <div class="btn-group">
                <button type ="button" class="btn btn-primary open-modal" data-path="/Product/Edit/@Model.ProductID">Edit</button>
                <button type="button" class="btn btn-primary open-modal" data-path="/Product/Features/@Model.ProductID">Features</button>
            </div>
        </div>
    </div>

}

Answer 1

您可以在另一个视图中执行此操作（或通过将另一个视图动态加载到模态中。该对象尚未创建，并且由于您BeginCollectionItem()用于生成新项目，因此您使用的任何其他视图都不会使用该Guid助手创建的相同视图所以你将无法匹配收藏品。

相反，在部分中包含“其他”属性，但将它们放在一个隐藏元素中，当您单击按钮时，该元素将显示为模式。

用于添加/编辑产品的部分的基本结构是

<div class="product">
    @using (Html.BeginCollectionItem("Products"))
    {
        @Html.HiddenFor(m => m.ClientID)
        @Html.HiddenFor(m => m.ProductID)
        <div class="card">
            ....
            <button type ="button" class="btn btn-primary edit">Edit</button>
        </div>
        // Modal for editing additional data
        <div class="modal">
            @Html.TxtBoxFor(m => m.SomeProperty)
            @Html.TxtBoxFor(m => m.AnotherProperty)
            ....
        </div>
    }
</div>

然后处理按钮.click()事件（使用委托，因为部分将被动态添加到视图中）以显示关联的模式（假设您有一个<div id="products">元素是所有产品的容器）

$('#products').on('click', '.edit', function() {
    var modal = $(this).closest('.product').find('.modal');
    modal.show(); // display the modal
});