Html BeginCollectionItem 获取当前项目

HtmlBeginCollectionItem Get Current Item

我需要:

  1. 访问/Client/Create
  2. 动态添加局部视图 (/Product/Card) 并将它们绑定到 Client.Products
  3. 在每个局部视图中,当我单击按钮时打开一个 bootstrap 模式 windows,我可以在其中设置产品信息
  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>

}

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

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

adding/editing 产品的部分基本结构是

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