ASP. NET CORE 3.0 Jquery Ajax Успешное выполнение запроса иногда не выполняется в одном представлении

Question

Это мой взгляд, ajax запрос и контроллер соответственно. Проблема в том, что когда я что-то сохраняю, иногда это срабатывает в методе успеха в запросе ajax, а иногда нет.

Просмотр

        <form id="myForm">
        <div>
            <div class="row">
                <div class="col-12">
                    <label asp-for="RoleName" class="control-label"></label>
                </div>
            </div>
            <div class="row">
                <div class="col-10">
                    <input asp-for="RoleName" class="form-control" />
                    <span asp-validation-for="RoleName" class="text-danger"></span>
                </div>
                <div class="col-2">
                    <div>
                        <button value="Index" id="btnSave" class="btn btn-success" data-toggle="tooltip" data-placement="bottom" title="Save !"><i class="fa fa-save"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </form>

Ajax запрос

        $("#btnSave").click(function () {

        debugger;

        var RoleObj = { RoleName: $('#RoleName').val() };

        $.ajax({
            cache: false,
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: '@Url.Action("Index", "MasterRoles")',
            dataType: "json",
            data: JSON.stringify(RoleObj),
            headers: { RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val() }
        }).done(function (response) {
            alert('Success');
        }).fail(function (jqXHR, textStatus) {
            alert('Error');
        });
    });

Это контроллер, который вызывается в почтовый метод. Единственная проблема, связанная с отправкой данных, заключается в том, что возвращаемые значения иногда приводят к успеху, но не всегда

      [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<JsonResult> Index([Bind("RoleName")] [FromBody] MasterRole masterRole)
    {
        try
        {
            if (ModelState.IsValid)
            {
                _context.Add(masterRole);
                await _context.SaveChangesAsync();

                return Json(new { status = "1", roleList });
            }
            else
            {
                return Json(new { status = "2", roleList });
            }
        }
        catch (Exception ex)
        {
            return Json(new { status = "2" });
        }
    }

Answer 1

У меня есть подозрение, что ваша форма отправляется при нажатии кнопки, поэтому иногда вы не видите, как вызывается функция ajax.

Необходимо игнорировать щелчок мыши по умолчанию на кнопке, так как это отправит форму:

$("#btnSave").click(function (e) {
  e.preventDefault();
  debugger;
  var RoleObj = { RoleName: $("#RoleName").val() };
  $.ajax({
    cache: false,
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: '@Url.Action("Index", "MasterRoles")',
    dataType: "json",
    data: JSON.stringify(RoleObj),
    headers: {
      RequestVerificationToken: $(
        'input:hidden[name="__RequestVerificationToken"]'
      ).val(),
    },
  })
    .done(function (response) {
      alert("Success");
    })
    .fail(function (jqXHR, textStatus) {
      alert("Error");
    });
});