问题描述
我有一个添加父子视图的按钮,父子视图也有一个在其中添加子子视图的添加按钮。我的问题是当我按主按钮添加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);
});
}
//子部分
@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,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,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);
如果使用ID选择器,它将始终选择ID为Characteristics
的第一个元素。
尝试以下代码:
function add(element){
var action = ' @Url.Action("NewIndividualSearchCharacteristic","Blended")';
$.post(action)
.done(function (partialView) {
element.previousElementSibling.append(partialView);
});
}