Как предотвратить отправку зависит от результата AJAX

Question

В проекте ASP.NET MVC я хочу, чтобы кнопка не делала отправку, если результат получен из AJAX-кода, ложного.

Но он всегда делает отправку.

Это код:

@using (Html.BeginForm("Add", "Category", FormMethod.Post))
{

    <input name="CategoryID" id="myCategoryId" type="text" value="0" />

    <input name="CategoryName" id="myCategoryNameId" type="text" value="" />


    <input class="btn btn-primary" id="myid" type="submit" value="Add" />
}

и это код Javascript:

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

    var data = {};
    data.CategoryName = $("#myCategoryNameId").val();
    data.CategoryID = $("#myCategoryId").val();

    $.ajax({
        type: 'POST',
        data: JSON.stringify(data),
        url: '/Category/ValidateCategoryName',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {

            if (!result) {

                event.preventDefault();
            }
        }
    });
});

Answer 1

Самый чистый способ сделать это:

$(document).on('submit','form' function(event) {
    event.preventDefault();
    event.stopImmediatePropagation();

    $this = $(this);

    var data = {};
    data.CategoryName = $("#myCategoryNameId").val();
    data.CategoryID = $("#myCategoryId").val();

    $.ajax({
        type: 'POST',
        data: JSON.stringify(data),
        url: '/Category/ValidateCategoryName',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {
            if (result) {
                $this.submit();
            }
        }
    });
});

Answer 2

Я бы заменил элемент ввода кнопки отправки на элемент кнопки, так что нажатие кнопки вызовет событие onclick без отправки формы.Затем, когда вы получите ответ ajax, вы можете условно использовать jQuery для отправки формы.Это может потребовать некоторых усилий, чтобы получить форму от onclick, но это не позволит вам отправить форму слишком рано, так как я подозреваю, что ваша проблема.

@using (Html.BeginForm("Add", "Category", FormMethod.Post))
{
    <input name="CategoryID" id="myCategoryId" type="text" value="0" />
    <input name="CategoryName" id="myCategoryNameId" type="text" value="" />
    <button class="btn btn-primary" id="myid">Add</button>
}

и

$('#myid').on('click', function(event) {
    var data = {
        CategoryName: $("#myCategoryNameId").val(),
        CategoryID: $("#myCategoryId").val()
    };
    $.ajax({
        type: 'POST',
        data: JSON.stringify(data),
        url: '/Category/ValidateCategoryName',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {
            if (result) {
                $('#myid').closest('form').submit();
            }
        }
    });
});

Answer 3

Очень давно я знаю, что действие перенаправления по умолчанию Form не будет ждать, пока ajax вернет свой результат. Таким образом, вы можете использовать логическую переменную для управления этим .. см. Следующий код

$(document).ready(function(){
  var DefaultFormAction = false;   //set the default form action to false
  $('form').on('submit' , function(e){
    var $this = $(this);
    if(DefaultFormAction == false){  // when the default action is false 
      e.preventDefault();   // prevent the default redirect
      setTimeout(function(){   // I use setTimeout here for testing .. Use the next code in your ajax success
        DefaultFormAction = true;   // return default action to true
        $this.submit();       // then submit the form again
      } ,10000);
      console.log('This result when default is false you will go to the default form action after 10second');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input name="CategoryID" id="myCategoryId" type="text" value="0" />
  <input name="CategoryName" id="myCategoryNameId" type="text" value="" />
  <input class="btn btn-primary" id="myid" type="submit" value="Add" />
</form>

Для проверки действие перенаправления Form по умолчанию не будет ждать, пока ajax вернет свой результат вы можете использовать e.preventDefault() внутри setTimeout и даже если вы сделаете время 1 мс без $this.submit(), оно все равно будет использовать перенаправление по умолчанию

$(document).ready(function(){
  var DefaultFormAction = false;   //set the default form action to false
  $('form').on('submit' , function(e){
    var $this = $(this);
    if(DefaultFormAction == false){  // when the default action is false 
      setTimeout(function(){   // I use setTimeout here for testing .. Use the next code in your ajax success
        e.preventDefault();   // prevent the default redirect
      } , 1);
      console.log('This result when default is false you will go to the default form action after 10second');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input name="CategoryID" id="myCategoryId" type="text" value="0" />
  <input name="CategoryName" id="myCategoryNameId" type="text" value="" />
  <input class="btn btn-primary" id="myid" type="submit" value="Add" />
</form>

Answer 4

Чтобы уточнить мой комментарий выше.измените

  <input class="btn btn-primary" id="myid" type="submit" value="Add" />

на

  <input class="btn btn-primary" id="myid" type="button" value="Add" />

И в вашей функции успеха измените

if (!result) {
   event.preventDefault();
}

на

if (result) {
   $('#myid').closest("form").submit();
}

Таким образом, вы будетеОтправляйте форму только в том случае, если результат равен true, если вызов ajax завершился неудачно или результат false, тогда форма не будет отправлена.

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: приведенный выше код может не работать, но я надеюсь, что вы поняли общую идею.