C# 视图中的多对多局部视图关系

我有一个添加父部分视图的按钮，父部分视图也有一个添加按钮，在其中添加子部分视图。我的问题是，当我按主按钮添加两个父部分视图，并在第二个父部分视图中按添加子部分按钮时，然后在第一个父部分视图中创建子部分视图。我想根据父部分视图添加子部分视图。我该怎么做

编码

//父部分

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

@（Model.SearchFirstName+Model.SearchLastName==“”？“新搜索个人”：Model.SearchFirstName+Model.SearchLastName）
@如果（ViewData[“hideRemove”]==null | | |（bool？）ViewData[“hideRemove”]==false）
{
}
@LabelFor（m=>m.SearchPostcode，“搜索帖子代码”，新的{@class=“formcontrollabel”}）
@TextBoxFor（m=>m.SearchPostcode，null，新{@class=“form control”}）
@if（型号？.Characteristics！=null）
{
对于（变量i=0；im.Characteristics）*@
}
}
添加特征
//钮扣
函数添加（元素）{
var action='@Url.action（“NewIndividualSearchCharacteristic”，“Blended”）；
$.post（行动）
.done（功能（部分视图）{
$（“#特征”）.append（partialView）；
});
}
//儿童部分
@模型ABC.Core.Models.DTOs.Characteristic
@使用（Html.BeginCollectionItem（“特征”））
{
@LabelFor（m=>m.Name，“Name”，新的{@class=“formcontrollabel”}）
@TextBoxFor（m=>m.Name，null，new{@class=“form control”}）
@LabelFor（m=>m.Value，“Value”，新的{@class=“formcontrollabel”}）
@TextBoxFor（m=>m.Value，null，新的{@class=“form control”}）
}

问题与这部分代码有关，如果您添加了多个父部分视图，则将有多个

特征
容器，然后，如果使用上述代码添加子部分视图，则新项目将添加到第一个部分视图

要解决此问题，可以根据触发器按钮查找相邻的
特征
容器，例如：基于触发器按钮查找父元素，然后使用find（）方法查找
特征
容器：

  $(element).parent().find("#Characteristics").append(partialView);

这是一个示例，您可以参考它：

主页中的代码（使用按钮添加多个父部分视图（AddPost_PV））：

添加帖子

父视图页面中的代码：

@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>

@model dotNetCore3_1.Models.Post
添加博客


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

var指数=0；
//添加父部分视图
函数AddPost（元素）{
var action='@Url.action（“AddPost_PV”，“Blog”）；
$.post（行动）
.done（功能（部分视图）{
索引++；
$（“#父#pv_容器”）.append（“父部分视图”+索引+”
）；
$（“#父项_pv_容器”）.append（partialView）；
});
}
var-childindex=0；
//添加子部分视图。
函数AddBlog（元素）{
var action='@Url.action（“AddBlog_PV”，“Blog”）；
$.post（行动）
.done（功能（部分视图）{
childindex++；
$（element）.parent（）.find（“#child_pv_容器”）.append（“子部分视图”+childindex+”
）；
$（element.parent（）.find（“#child_pv_container”）.append（partialView）；
});
}

屏幕截图如下：


问题与这部分代码有关，如果您添加了多个父部分视图，则将有多个
特征
容器，然后，如果使用上述代码添加子部分视图，则新项目将添加到第一个部分视图

要解决此问题，可以根据触发器按钮查找相邻的
特征
容器，例如：基于触发器按钮查找父元素，然后使用find（）方法查找
特征
容器：

  $(element).parent().find("#Characteristics").append(partialView);

这是一个示例，您可以参考它：

主页中的代码（使用按钮添加多个父部分视图（AddPost_PV））：

添加帖子

父视图页面中的代码：

@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>

@model dotNetCore3_1.Models.Post
添加博客


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

var指数=0；
//添加父部分视图
函数AddPost（元素）{
var action='@Url.action（“AddP