ASP.NET Core中关闭模态表单后执行Ajax调用的问题

问题场景 #

当前使用ASP.NET Core 6，通过Ajax填充Razor视图中的#assessmentTablesDiv区域，填充后该区域会被包含模态按钮的局部视图替换。点击模态表单的保存按钮后，数据已保存但无法通过reloadAssessment()函数刷新该区域内容，且不想刷新整个页面避免丢失未保存数据。

初始填充代码：

var assessmentTablesDiv = $('#assessmentTablesDiv');
var id = $('#adminDetailsAndOverviewId').val();

$.ajax({
      url: "@Url.Action("LoadAssessmentTables", "Assessments")",
      data: { id:id },
      type: "GET",
      success: function (data) {
          assessmentTablesDiv.replaceWith(data);
      }
});

保存及刷新代码：

$("#btnSave").on('click', function (event) {
    if (validate()) {
        var viewModel = {
            "AssessmentId": $('#assessmentId').val(),
            "AdmissionDetailsAndReviewsId": $('#adminDetailsAndReviewsId').val(),
            "AssessmentTypeId": $('#AssessmentSelectionId').val(),
            "DateMostRecent": $('#dateMostRecent').val(),
            "IQSpecifyOrOther": $("#iqSpecifyOrOther").val(),
            "Score": $('#score').val(),
        }

        $.ajax({
            type: "POST",
            url: "@Url.Action("SaveGeneralAssessment", "Assessments")",
            headers: { "RequestVerificationToken": "@GetAntiXsrfRequestToken()" },
            datatype: "json",
            data: viewModel,
            async: false,
            success: function (response) {
                $('#mdAddAssessment').modal('hide')
                reloadAssessment();
            },
            failure: function (response) {
                alert(JSON.stringify(response));
            },
            error: function (response) {
                alert(JSON.stringify(response));
            }
        });
    };
});

function reloadAssessment() {
    var assessmentTablesDiv = $('#assessmentTablesDiv');
    var id = $('#adminDetailsAndOverviewId').val();

    $.ajax({
        url: "@Url.Action("LoadAssessmentTables", "Assessments")",
        data: { id: id },
        type: "GET",
        success: function (data) {
            assessmentTablesDiv.replaceWith(data);
        }
    });
}

核心原因 #

使用replaceWith(data)会将原有的#assessmentTablesDiv元素完全移除，替换为返回的局部视图内容。如果局部视图中没有重新包含id="assessmentTablesDiv"的容器，后续reloadAssessment()中$('#assessmentTablesDiv')将无法找到目标元素，导致刷新失效。即使局部视图包含该容器，之前缓存的assessmentTablesDiv变量指向的是已被移除的旧DOM元素，调用replaceWith也不会作用于新元素。

解决方案 #

方案1：改用html()替换内容（推荐） #

保留原有的#assessmentTablesDiv容器，仅替换其内部内容，避免容器丢失。修改两处代码：

1. 初始填充的success回调：

success: function (data) {
    // 替换容器内部内容，保留#assessmentTablesDiv元素
    assessmentTablesDiv.html(data);
}

2. reloadAssessment()的success回调：

success: function (data) {
    assessmentTablesDiv.html(data);
}

方案2：确保局部视图包含容器元素 #

调整LoadAssessmentTables返回的局部视图，确保内容外层始终包裹id="assessmentTablesDiv"的div：

<div id="assessmentTablesDiv">
    <!-- 原有表格内容 -->
    <div class="row">
        <div class="col-md-12 mb-2 mt-2">
            <button type="button" class="btn-sm btn-primary float-right"
                    data-toggle="ajax-modal" data-target="#mdAddAssessment"
                    data-url="@Url.Action("Create", "Assessments")"
                    title="Click add an assessment.">
                Add Assessment
            </button>
        </div>
    </div>
</div>

同时，将reloadAssessment()中获取容器的代码改为每次重新查询（避免缓存旧元素）：

function reloadAssessment() {
    var id = $('#adminDetailsAndOverviewId').val();

    $.ajax({
        url: "@Url.Action("LoadAssessmentTables", "Assessments")",
        data: { id: id },
        type: "GET",
        success: function (data) {
            // 每次重新查询容器并替换
            $('#assessmentTablesDiv').replaceWith(data);
        }
    });
}

额外优化建议 #

• 移除async: false：同步Ajax会阻塞浏览器线程，可能导致UI响应异常，改用异步模式即可。
• 添加调试日志：在reloadAssessment()的success和error回调中加入console.log()，确认Ajax请求是否正常触发及返回数据是否正确。
• 验证元素存在性：在reloadAssessment()中先检查$('#assessmentTablesDiv')是否存在，避免无意义的Ajax请求。

内容的提问来源于stack exchange，提问作者user20408154