AJAX call перезагружает всю мою страницу в Razor Pages? - PullRequest
Новая
       3

AJAX call перезагружает всю мою страницу в Razor Pages?

0 голосов
/ 26 марта 2020

Я пытаюсь позвонить AJAX со своей страницы Razor Pages.

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.

AJAX Error

Возникла исключительная ситуация в моей разметке (файл CS HTML): 

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

Причина этого исключения заключается в том, что все свойства моего Модель страницы пуста. Они нулевые, потому что мой метод OnGetAsync() никогда не вызывается для их инициализации!

Мой вопрос: почему моя разметка выполняется так, как будто я обновляю всю страницу? Я делаю AJAX звонок. Я не хочу обновлять всю страницу. Поэтому я не знаю, почему мой OnGetAsync() должен был бы быть вызван.

1 Ответ

2 голосов
/ 08 апреля 2020

(на основе предоставленного вами кода)

Я думаю, что проблема в вашей функции обратного вызова always() или событии Cliek или вашем выражении возврата.

всегда ():

Функция обратного вызова, переданная функции always(), вызывается всякий раз, когда завершается запрос AJAX, независимо от того, * 1083 или нет * Запрос успешно или неудачно. Три параметра, переданные в функцию обратного вызова, будут либо теми же тремя параметрами, которые передаются в done(), либо fail(), в зависимости от того, успешно или нет запрос AJAX.

В ответ на успешный запрос, аргументы функции такие же, как у .done(): data, textStatus, and the jqXHR object. Для неудачных запросов аргументы такие же, как и у .fail(): the jqXHR object, textStatus, and errorThrown.

Метод deferred.always() получает аргументы, которые использовались для .resolve() или .reject() Отложенного объекта, которые часто сильно отличаются. По этой причине лучше использовать его только для действий, которые не требуют проверки аргументов. Во всех других случаях используйте явные обработчики .done() или .fail(), поскольку аргументы будут иметь хорошо известные порядки.

Ссылка:

  1. http://tutorials.jenkov.com/jquery/ajax.html

  2. https://api.jquery.com/jquery.ajax/

  3. https://api.jquery.com/deferred.always/

ИЛИ

Событие Cliek: Мне кажется, ваша кнопка вызывает обновление страницы sh. поэтому используйте preventDefault() в вашем событии клика.

Пример: 

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

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

    //Your code

});

ИЛИ

Оператор возврата: Если ваш OnPostDelete метод возвращает Page() пожалуйста, измените его на 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.
        }
...