[英]Many to many partial view relationship in a view
我有一個添加父局部視圖的按鈕,父局部視圖也有一個添加按鈕,它在其中添加子局部視圖。我的問題是,當我按主按鈕添加 2 個父局部視圖並在第二個父視圖中按添加子局部按鈕時局部視圖,然后在第一個父局部視圖中創建子局部視圖。我想根據父局部視圖添加子局部視圖。 我怎樣才能做到這一點?
編碼
//父部分
<div id="individual-details" class="card">
<div class="card-header">
@(Model.SearchFirstName + Model.SearchLastName == "" ? "New Search Individual" : Model.SearchFirstName + Model.SearchLastName)
@if (ViewData["hideRemove"] == null || (bool?)ViewData["hideRemove"] == false)
{
<a id="individual-remove" href="#" onclick="removeIndividual(this)" class="btn btn-danger pull-right">Remove</a>
}
</div>
<div class="form-horizontal">
<div class="card-block">
<div class="form-group">
@Html.LabelFor(m => m.SearchPostcode, "Search Post Code", new { @class = "form-control-label" })
@Html.TextBoxFor(m => m.SearchPostcode, null, new { @class = "form-control" })
</div>
</div>
</div>
<div class="card-block">
<div id="Characteristics" class="mb-3">
@if (Model?.Characteristics != null)
{
for (var i = 0; i < Model?.Characteristics.Count; i++)
{
<div class="form-group">
@{ Html.RenderPartial("IndividualSearchCharacterisiticPartial", Model.Characteristics[i], new ViewDataDictionary()); }
@* @Html.EditorFor(m => m.Characteristics);*@
</div>
}
}
</div>
<button id="add-characteristics" onclick="add(this)" type="button" class="btn btn-success">Add Characteristics</button>
</div>
</div>
//Button
function add(element){
var action = ' @Url.Action("NewIndividualSearchCharacteristic", "Blended")';
$.post(action)
.done(function (partialView) {
$('#Characteristics').append(partialView);
});
}
//child partial
@model ABC.Core.Models.DTOs.Characteristic
@using (Html.BeginCollectionItem("Characteristics"))
{
<div id="characteristic-details" class="card">
<div class="form-horizontal">
<div class="card-block">
<div class="container">
<div class="row">
<div class="col-*-*">
@Html.LabelFor(m => m.Name, "Name", new { @class = "form-control-label" })
</div>
<div class="col">
@Html.TextBoxFor(m => m.Name, null, new { @class = "form-control" })
</div>
<div class="col-*-*">
@Html.LabelFor(m => m.Value, "Value", new { @class = "form-control-label" })
</div>
<div class="col">
@Html.TextBoxFor(m => m.Value, null, new { @class = "form-control" })
</div>
<div class="col-*-*">
<a id="characteristic-remove" href="#" onclick="removeCharacteristic(this)" class="btn btn-danger pull-right">Remove</a>
</div>
</div>
</div>
</div>
</div>
</div>
}
$('#Characteristics').append(partialView);
問題與這部分代碼有關,如果您添加了多個父局部視圖,則會有多個Characteristics
容器,那么,如果使用上述代碼添加子局部視圖,則新項目將添加到第一個局部視圖中。
解決這個問題,可以根據觸發按鈕查找相鄰的Characteristics
容器,例如:根據觸發按鈕查找父元素,然后使用find()方法查找Characteristics
容器:
$(element).parent().find("#Characteristics").append(partialView);
這是一個示例,您可以參考它:
主頁面中的代碼(使用一個按鈕添加多個父局部視圖(AddPost_PV)):
<button id="add_Post" onclick="AddPost(this);" type="button" class="btn btn-success">Add Post</button>
<div id="parent_pv_container">
</div>
父視圖頁面中的代碼:
@model dotNetCore3_1.Models.Post
<div class="row">
<div class="col-md-4">
<form asp-action="AddPost_PV">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Title" class="control-label"></label>
<input asp-for="Title" class="form-control" />
<span asp-validation-for="Title" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Content" class="control-label"></label>
<input asp-for="Content" class="form-control" />
<span asp-validation-for="Content" class="text-danger"></span>
</div>
<div class="form-group">
<button id="add_blog" onclick="AddBlog(this);" type="button" class="btn btn-success">Add Blogs</button><br />
<div id="child_pv_container">
</div>
</div>
</form>
</div>
</div>
JavaScript 代碼:
var index = 0;
// add parent partial view
function AddPost(element) {
var action = '@Url.Action("AddPost_PV", "Blog")';
$.post(action)
.done(function (partialView) {
index++;
$("#parent_pv_container").append("<h4>Parent Partial View " + index + "</h4><hr />");
$('#parent_pv_container').append(partialView);
});
}
var childindex = 0;
//add children partial view.
function AddBlog(element) {
var action = '@Url.Action("AddBlog_PV", "Blog")';
$.post(action)
.done(function (partialView) {
childindex++;
$(element).parent().find("#child_pv_container").append("<h4>Child Partial View " + childindex + "</h4><hr />");
$(element).parent().find("#child_pv_container").append(partialView);
});
}
截圖如下:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.