Html BeginCollectionItem 获取当前项目
HtmlBeginCollectionItem Get Current Item
我需要:
- 访问/Client/Create
- 动态添加局部视图 (/Product/Card) 并将它们绑定到 Client.Products
- 在每个局部视图中,当我单击按钮时打开一个 bootstrap 模式 windows,我可以在其中设置产品信息
- 关闭模态并反映模态的变化反映在卡的产品中。
问题是:如何在另一个视图(除了卡片)中更改产品信息并反映到卡片的产品中?
@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
});
我需要:
- 访问/Client/Create
- 动态添加局部视图 (/Product/Card) 并将它们绑定到 Client.Products
- 在每个局部视图中,当我单击按钮时打开一个 bootstrap 模式 windows,我可以在其中设置产品信息
- 关闭模态并反映模态的变化反映在卡的产品中。
问题是:如何在另一个视图(除了卡片)中更改产品信息并反映到卡片的产品中?
@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
});