AJAX 调用是否会在 Razor Pages 中重新加载我的整个页面？

Question

我正在尝试从我的 Razor Pages 页面进行 AJAX 调用。

JavaScript:

$.ajax({
    type: 'POST',
    url: '?handler=Delete',
    data: {
        id: $(this).data('id')
    },
    beforeSend: function (xhr) {
        // Required for POST, but have same issue if I removed this
        // and use GET
        xhr.setRequestHeader('XSRF-TOKEN',
            $('input:hidden[name="__RequestVerificationToken"]').val());
    },
})
.fail(function (e) {
    alert(e.responseText);
})
.always(function () {
    // Removed to simplify issue
    //location.reload(true);
});

后面的代码：

public async System.Threading.Tasks.Task OnPostDeleteAsync(int id)
{
    string userId = UserManager.GetUserId(User);
    var area = DbContext.Areas.FirstOrDefault(a => a.UserId == userId && a.Id == id);
    if (area != null)
    {
        DbContext.Remove(area);
        await DbContext.SaveChangesAsync();
    }
}

而且，事实上，这工作正常并且项目被删除。

但是，调用了 $.ajax.fail() 处理程序，错误表明存在 NullReferenceException。

我的标记（CSHTML 文件）中出现异常：

@if (Model.ActiveAreas.Count == 0)  @***** NullReferenceException here! *****@
{
    <div class="alert alert-info">
        You don't have any active life areas.
    </div>
}

出现这个异常的原因是因为我的页面模型的所有属性都是空的。它们为空，因为从未调用我的 OnGetAsync() 方法来初始化它们！

我的问题是为什么我的标记在执行时就好像我正在更新整个页面一样？我正在打 AJAX 电话。我不想更新整个页面。所以我不知道为什么我的 OnGetAsync() 需要被调用。

Answer 1

(Based on your provided code)

我认为您的 always() 回调函数或 Cliek 事件或您的 return 语句存在问题。

总是():

无论 AJAX 请求成功与否，只要 AJAX 请求完成，就会调用传递给 always() 函数的回调函数。传递给回调函数的三个参数将与传递给 done() 或 fail() 的三个参数相同，具体取决于 AJAX 请求是成功还是失败。

响应成功请求，函数参数与.done(): data, textStatus, and the jqXHR object相同。对于失败的请求，参数与 .fail(): the jqXHR object, textStatus, and errorThrown.

的参数相同

deferred.always() 方法接收用于 .resolve() 或 .reject() Deferred 对象的参数，它们通常非常不同。出于这个原因，最好只将它用于不需要检查参数的操作。在所有其他情况下，使用显式 .done() 或 .fail() 处理程序，因为参数将具有众所周知的顺序。

参考：

或

Cliek 事件： 我认为您的按钮正在触发页面刷新。所以在你的点击事件中使用 preventDefault()。

示例：

$('...').on('click', function (event) {

    event.preventDefault();//add the prevent default.

    //Your code

});

或

Return声明：如果你的OnPostDelete方法returnPage()请改成JsonResult或 RedirectToPage.

示例：

   public Task<IActionResult> OnPostDelete(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }
            //Your Code

           return Page();//Remove it

           return new JsonResult ("Customer Deleted Successfully!");// Use some thing like it as u need.

            return RedirectToPage("./Index");//if u want to reload page then use it.
        }

AJAX 调用是否会在 Razor Pages 中重新加载我的整个页面？

Does AJAX call reload my entire page in Razor Pages?

c#

ajax

jquery

asp.net-core

razor-pages

JavaScript:

后面的代码：