MVC中的引導按鈕加載狀態和Ajax幫助器

Question

我有一個帶有按鈕的Ajax表單，並且我希望按鈕具有「加載」文本，而客戶端正在等待來自服務器的響應...這是我擁有的現在：

<div id="updateButton"> 
    @using (Ajax.BeginForm("Donate", "Home", new AjaxOptions() { UpdateTargetId = "updateButton" ,InsertionMode = InsertionMode.Replace, })) 
    { 
     <input type='hidden' name='receiverID' value=@Model> 
     <button type="submit" data-loading-text="Loading..." class="btn btn-primary" >Loading state </button> 
    } 
</div> 

但它不起作用。

bootstrap.js，的jquery.js和jQuery的不顯眼，ajax.js包括...

Answer 1

如果你想使用Ajax.BeginForm選項更改按鈕加載狀態，見下圖：

<script> 
    function onBegin() { 
     $("#mybtn").hide(); 
    } 

    function onComplete() { 
     $("#mybtn").show(); 
    } 
</script> 
@using (Ajax.BeginForm("Donate", "Home", new AjaxOptions() { UpdateTargetId = "updateButton", InsertionMode = InsertionMode.Replace, LoadingElementId = "resultLoadingDiv", OnBegin = "onBegin", OnComplete = "onComplete" })) 
{ 
    <input type='hidden' name='receiverID' value=@Model> 
    <input type="submit" id="mybtn" value="OK" /> 
    <button type="button" id="resultLoadingDiv" style="border: slategray 1px solid; display: none;margin: auto;"> 
      Loading... 
    </button> 
} 

如果你只想使用引導，見下圖：

<div id="updateButton"> 
     @using (Ajax.BeginForm("Donate", "Home", new AjaxOptions() { UpdateTargetId = "updateButton" ,InsertionMode = InsertionMode.Replace, })) 
     { 
      <input type='hidden' name='receiverID' value=@Model> 
      <button type="submit" data-loading-text="Loading..." class="btn btn-primary" >Loading state </button> 
     } 
    </div> 
    <script> 
     $('.btn').click(function() { 
       var btn = $(this) 
       btn.button('loading') 
        setTimeout(function() { 
         btn.button('reset') 
        }, 3000); 
       }); 
    </script>