Последовательные вызовы jQuery AJAX с MVC

Question

У меня странная настройка в проекте MVC, где у меня есть @Ajax.BeginForm() со следующими полями:-

• Адресная строка 1
• Адресная строка 2
• Городок
• округ
• салонов Почтовый

Нам нужно перейти в Google Geocode с этим адресом и получить широту и долготу по нажатию кнопки отправки в форме Ajax. Так:-

@using (Ajax.BeginForm("EditLocation", "Location", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "new-locations", OnBegin = "return OnBegin()", OnSuccess = "OnSuccess()", InsertionMode = InsertionMode.InsertBefore }, new { @id = "EditLocationForm" })) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(false)
    <!-- Standard Text Fields -->
    @Html.TextBoxFor(m => m.Latitude)
    @Html.TextBoxFor(m => m.Longitude)
    <input type="submit" class="btn btn--gradient btn--right" id="EditLocationSubmit" />  
}

function OnBegin() {
    $.ajax({
        url: '/Location/CheckAddress/',
        datatype: "json",
        async: false,
        data: { addressLine1: $("#BrandLocationAddress_AddressLine1").val(), addressLine2: $("#BrandLocationAddress_AddressLine2").val(), town: $("#BrandLocationAddress_Town").val(), county: $("#BrandLocationAddress_County").val(), postcode: $("#BrandLocationAddress_Postcode").val(), },
        type: "POST",
        success: function (data) {
            if (data !== "NORESULTS") {
                $("#Latitude").val(data.Latitude);
                $("#Longitude").val(data.Longitude);
                return true;
            }
            else {

            }
        },
        error: function (response) {
            console.log(response);
            return false;
        }
    });
}

Результаты /Location/CheckAddress/ возвращают широту и долготу, как и ожидалось, но Ajax.BeginForm() переходит к отправке формы до заполнения двух полей #Latitude и #Longitude. Когда я смотрю в [HttpPost] модели, широта и долгота 0.

Когда я публикую второй раз, поля имеют правильные значения широты и долготы. Я думаю, что это может быть потому, что OnBegin() позволяет Ajax.BeginForm сделать свое дело до последней строки success пункт был выполнен, следовательно 0.

Может кто-нибудь посоветовать, как сделать задержку подачи второй формы, пока я не узнаю последнюю строку success пункт был завершен?

Answer 1

Вам нужно вернуть false из вашей функции:

var allowSubmit = false;
function OnBegin() {
    if (allowSubmit == true) { return true; }
    $.ajax({
        // ... code
        success: function (data) {
            // ... code
            // here you need to submit the form using 
            $( "#EditLocationForm" ).submit()
            allowSubmit = true;
        },
        error: function (response) {
          // .. code
        }
    });

    return false;
}

В success, отправьте форму, как показано в коде выше.

Кроме того, не делайте этого, используя async: false: вы не хотите останавливать пользовательский интерфейс во время этой операции. Что вы можете сделать, это отключить элементы управления, чтобы пользователь не мог их изменить, а затем снова включить их в success а также error,