如何在提交前在 ASP.NET 核心 Razor 頁面中創建不顯眼的 AJAX？

Question

當我發送 ajax 請求時，我試圖禁用該按鈕。 唯一被觸發的是console.log。 我認為如果我在 ajax 中使用 beforeSubmit 選項，但不引人注目的 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>

Answer 1

我使用與您共享的相同代碼進行了測試，這對我來說效果很好，可以按預期禁用按鈕。

您可以在瀏覽器中檢查該按鈕的實際 html 源，並檢查是否已設置disabled屬性。

您可以嘗試以下代碼片段，然后檢查它是否有效。

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

此外，請重新檢查您是否在項目中安裝/包含了 jQuery 不顯眼的 ajax客戶端庫，並添加所需 jQuery 庫的引用。

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