HtmlBeginCollectionItem获取当前项

Question

我需要：

1. Acess / Client / Create
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相同，因此您无法匹配收集项。

相反，在partial中包含'other'属性，但将它们放在隐藏元素中，当您单击按钮时，该元素将显示为模式。

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

<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
});