jQuery AJAX 使用 MVC 的顺序调用

Question

我在 MVC 项目中有一个奇怪的设置，其中我有一个 @Ajax.BeginForm() 包含以下字段：-

地址行 1
地址行 2
城镇
县
邮编

我们需要使用此地址转到 Google 地理编码，并在单击 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.

当我第二次 post 时，字段是正确的纬度和经度值。我认为这可能是因为 OnBegin() 允许 Ajax.BeginForm 在 success 子句的最后一行被执行之前完成它的工作，因此 0.

任何人都可以建议如何让第二个表格延迟提交，直到我知道 success 子句的最后一行已经完成？

Answer 1

您需要 return 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 执行此操作：您不想在该操作进行时冻结 UI。您可能想要做的是禁用控件，这样用户就无法更改它们，然后在 success 和 error 中 re-enable 它们。

jQuery AJAX 使用 MVC 的顺序调用

jQuery AJAX sequential calls with MVC

c#

ajax

asp.net-mvc

jquery

ajax.beginform