在下拉列表中选择后附加多个 PartialViews

如何解决在下拉列表中选择后附加多个 PartialViews

我有一个视图，可以为模型中的每个“单元”加载多个局部视图。如果用户更改“评估”下拉列表中的选择，我需要使用正确的单位重新渲染部分。当页面加载时，它会加载以下内容：

                <div class="kt-portlet__body" id="unitSection" >
                    @if (Model.Units != null)
                    {
                        foreach (var unit in Model.Units)
                        {
                            Html.RenderPartial("UnitGapRow",unit);
                        }
                    }
                </div>

当用户像这样更改下拉列表中的选择时，我正在进行 ajax 调用：

        $('#AssessmentId').change(function (e) {
           var assessmentId = $(this).val();
           getUnits(assessmentId);
        });

    function getUnits(assessmentId) {
    $('#unitSection').html('');
    $.ajax({
        url: "@(Url.Action("GetRequirementUnits","Config",new { area = "Competency" }))",data: {
            AssessmentId: assessmentId,RequirementId: "@Model.RequirementId"
        },type: "POST",success: function (data) {
            for (var unit in data) {
                $('#unitSection').append(@Html.RenderPartial("UnitGapRow",unit));
            }
        }
    })
}

除了渲染每个单元的部分外，一切正常。我尝试使用 load 方法，但它“替换”而不是“附加”每个部分。

非常感谢任何帮助。

解决方法

我能够用循环“链接”“load()”方法以呈现部分。由于 load() 替换，我动态创建了 div，附加到原始 div 并使用动态创建的 div 调用加载方法：

    function getUnits(assessmentId) {
    $('#unitSection').html('');
    $.ajax({
        url: "@(Url.Action("GetRequirementUnits","Config",new { area = "Competency" }))",data: {
            AssessmentId: assessmentId,RequirementId: "@Model.RequirementId"
        },type: "POST",success: function (data) {

            var i = 0;
            for (var x = 0; x < data.length; x++) {
                var unit = data[x];
                var unitId = unit.UnitId;
                $('#unitSection').append('<div id="div' + i + '"></div>');
                $('#div' + i).load('@Url.Action("GetRequirementUnit",new { area = "Competency" })?UnitId=' + unitId);
                i++;
            }
        }
    })
}

我希望这对其他人有帮助。