问题描述
我有一个视图,可以为模型中的每个“单元”加载多个局部视图。如果用户更改“评估”下拉列表中的选择,我需要使用正确的单位重新渲染部分。当页面加载时,它会加载以下内容:
<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++;
}
}
})
}
我希望这对其他人有帮助。