如何在提交之前在 ASP.NET Core Razor 页面中创建不显眼的 AJAX？答案

【问题标题】：How can Create Unobtrusive AJAX in ASP.NET Core Razor Pages Before Submit?如何在提交之前在 ASP.NET Core Razor 页面中创建不显眼的 AJAX？
【发布时间】：2021-01-05 12:02:18
【问题描述】：

我试图在发送 ajax 请求时禁用该按钮。唯一被触发的是console.log。我认为如果我在 ajax 中使用 beforeSubmit 选项，我可以实现，但 Unobtrusive AJAX 没有提供该选项。有什么方法可以实现吗？

非常感谢您


@using (Ajax.BeginForm("OrderDetails",
                       "Checkout",
                       null,
                       new AjaxOptions
                       {
                           HttpMethod = "POST",
                           UpdateTargetId = "Checkout",
                           InsertionMode = InsertionMode.Replace,
                           OnBegin = "disableBtnBegin()",
                           OnSuccess = "disableBtnSuccess()",
                           OnFailure = "disableBtnFailure()",
                           LoadingElementId = "loaderSubmit"
                       },
                       new { id = "OrderDetailsForm" }))
{
    

    <div class="card mb-3">
        <div class="card-body">
            <h3 class="card-title"></h3>
           
            <h3 class="card-title"></h3>
            <div class="form-group">
                <div class="form-check row">
                    <div class="check-bx-wrapper col-12">
                        <div class="input-check">
                         
                        </div>
                    </div>
                </div>
            </div>
            <div id="shippingAddressGroup" class="company-account-form row shipping_address w-100">
               
            </div>
            <div class="col-12">
                <button type="submit" class="btn btn-custom-primary" id="nextStepBtn">
                    <span id="loaderSubmit" class="loader-hidden lds-dual-ring" style="display: none;"></span>
                
                </button>
            </div>
        </div>
    </div>
}


    <script>

        function disableBtnBegin() {

            console.log("on begin");
  
            var nextBtn = $('#nextStepBtn');
        
            nextBtn.prop("disabled", true);

        }


    </script>

【问题讨论】：

标签： jquery asp.net-core asp.net-ajax

【解决方案1】：

我使用与您共享的相同代码进行了测试，这对我来说运行良好，按钮可以按预期禁用。

您可以在浏览器中检查该按钮的实际 html 源代码，并检查是否设置了 disabled 属性。

你可以试试下面的代码sn-p，然后看看是否有效。

$('#nextStepBtn').attr("disabled", true);

另外，请重新检查您是否在您的项目中安装/包含jQuery unobtrusive ajax客户端库，并添加所需jQuery库的引用。

<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

【讨论】：