Ajax-вызов контроллера приводит к ошибке 400

Question

У меня есть следующий вызов Ajax, который указывает на функцию контроллера:

<script type="text/javascript">
    $(document).ready(function () {
        $('#AddNote').click(function () {
            $('#AddNote').addClass("disabled");

                var txtNote = document.getElementById('note');
                var result = document.getElementById('result');

                result.innerText = "Adding note...";

                $.ajax({
                    url: "@Url.Action("AddNoteAsync", "Leads")",
                    type: "POST",
                    data: { leadId: @Model.Id, note: txtNote.value },
                    async: true,
                    success: function (data) {
                        // removed
                    },
                });
            });
        });
</script>

Когда я нажимаю кнопку AddNote, я вижу сообщение «Добавление заметки ...», и больше ничего не происходит. Когда я проверяю консоль в Chrome, она гласит:

:44309/Leads/AddNoteAsync:1 - Failed to load resource: the server responded with a status of 400 ()

Итак, я знаю, что 400 означает плохой запрос, но я не уверен, почему это происходит. Я пробовал:

• Добавлены кавычки в поля "leadId" и "note" в данных - без разницы.
• Добавлены окна предупреждений, чтобы показать значения @ Model.Id и txtNote.value перед вызовом AJAX, чтобы убедиться, что они верны - они есть.
• Установите точку останова в функции AddNoteAsync в моем контроллере - она ​​никогда не срабатывает
• Жестко закодировал поле URL в /Leads/AddNoteAsync - без разницы

Так как функция контроллера никогда не срабатывает, я предполагаю, что с частью &.ajax что-то не так, но я не могу понять, что.

Редактировать: Метод контроллера:

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> AddNoteAsync(int? leadId, string note)
{
    ViewData["AddedNote"] = false;

    if (leadId == null)
    {
        return RedirectToAction("Index", new { initials = User.Identity.Name });
    }

    var lead = await _context.Leads.FirstOrDefaultAsync(m => m.Id == leadId);
    if (lead == null)
    {
        return RedirectToAction("Index", new { initials = User.Identity.Name });
    }

    var ownsLead = await LeadBelongsToCurrentUser(leadId.Value, User.Identity.Name);
    if (!ownsLead)
    {
        return RedirectToAction("Index", new { initials = User.Identity.Name });
    }

    _context.LeadNotes.Add(new LeadNoteModel()
    {
        LeadId = leadId.Value,
        Note = note,
        NoteDate = DateTime.Now
    });

    await _context.SaveChangesAsync();

    ViewData["AddedNote"] = true;

    return Content("Success");
}

Answer 1

Исправлено.Я пропустил это из моего запроса AJAX:

beforeSend: function (xhr) {
   xhr.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="f"]').val());
},

И это из моего Startup.cs:

services.AddAntiforgery(options =>
{
    options.FormFieldName = "f";
    options.HeaderName = "XSRF-TOKEN";
});

Answer 2

При принятии запроса POST вы должны принять параметры в качестве модели (рекомендуется).Предлагаемая модель будет -

public class NoteModel
{
    public int? leadId { get; set; }
    public string note { get; set; }
}

, а действие может быть -

public async Task<IActionResult> AddNoteAsync(NoteModel model)
{
}

Также Jquery может быть -

<script type="text/javascript">
$(document).ready(function () {
    $('#AddNote').click(function () {
        $('#AddNote').addClass("disabled");

            var txtNote = document.getElementById('note');
            var result = document.getElementById('result');
            var postData = { leadId: @Model.Id, note: txtNote.value };
            result.innerText = "Adding note...";

            $.ajax({
                url: "@Url.Action("AddNoteAsync", "Leads")",
                type: "POST",
                data: JSON.stringify(postData),
                async: true,
                success: function (data) {
                    // removed
                },
            });
        });
    });