带有MVC的jQuery AJAX顺序调用

Question

I've got an odd setup in an MVC project, where I have an @Ajax.BeginForm() with the following fields:-

• Address Line 1
• Address Line 2
• Town
• County
• PostCode

We require to go to Google Geocode with this address, and get the latitude and longitude on click of the submit button on the Ajax form. So:-

@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;
        }
    });
}

The results of the /Location/CheckAddress/ bring back a latitude and longitude as expected, but the Ajax.BeginForm() goes into the form submission before the two #Latitude and #Longitude fields are populated. When I look in the [HttpPost] of the model, latitude and longitude are 0.

When I post a second time, the fields are the correct latitude and longitude values. I think this might be because OnBegin() is allowing the Ajax.BeginForm to do its stuff before the last line of the success clause has been executed, hence 0.

Can anyone advise on a way to make the second form delay submission until I know the last line of the success clause has been completed?

Answer 1

You need to return false from your function:

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;
}

In success , submit the form as shown in code above.

Also, do not do this using async: false : you do not want to freeze the UI while that operation is going on. What you may want to do is to disable the controls so the user cannot change them and then re-enable them in success and error .