关闭模态窗体asp.net core后运行ajax调用

Question

我使用的是asp.net core 6

我有一个剃刀视图，其中有一个部分由 ajax 调用填充 -

 <div id="assessmentTablesDiv">
     <!-- ...content... -->
 </div>

此 div 填充有以下内容。

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

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

div 被替换为具有调用模态表单按钮的部分视图。

  </div>
      <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>

当我按下模态表单上的保存按钮时，数据将被保存并关闭模态。然后我想运行 ajax 调用来替换assessmentTablesDiv 中的数据以显示新保存的数据。 我已经尝试过以下方法，但它不起作用 -

$("#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);
        }
    });
}

我不想重新加载整个页面，因为在页面上输入的任何其他未保存的数据都将丢失。 有什么想法吗

谢谢

Answer 1

.html()

而不是

.replaceWith():

这保留了

#assessmentTablesDiv

元素，而不会出现事件绑定并发症。

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

使用

.done()

和

.fail()

异步处理成功和失败

.done(function (response) {
    $('#mdAddAssessment').modal('hide');
    reloadAssessment();
})
.fail(function (response) {
    alert("An error occurred: " + JSON.stringify(response));
});

它应该可以顺利重新加载，无需重新加载页面。