MVC jQuery的進展微調在提交

Question

問候，

誰能幫助我如何實現Jquery的進展微調與ASP.NET MVC上按一下按鈕，請

三江源提前。

Answer 1

$.ajax({ 
type="get", 
url="someurl.html", 
dataType:"html", 
beforeSend(jqXHR, settings) 
{ 
    //append spinner image to some html element 
}, 
success:function(data) 
{ 
    //manipulate data 
}, 
Complete:(jqXHR, textStatus) 
{ 
    //Remove spinner from the page 
} 
}); 

Answer 2

假設你有500個項目（文件/不管）來處理的進展過程中，...

你不得不單獨處理每一個項目。

然後遍歷所有項目和：

• 做一個$就呼叫到您的ItemController的「句柄」的行動，處理一個項目
• 回報，如果一個JSON結果代碼
• OK，移動jQuery的進展事情了一步
• 如果失敗了，要麼做下一個，或取消整個過程（根據您的要求）

Answer 3

Showing loading animation in center of page while making a call to Action method in ASP .NET MVC

Answer 4

我結束了使用這些偉大的資源：

1. http://contextllc.com/dev_tools/jQuery/showLoading/latest/jquery.showLoading.example.html
2. http://ajaxload.info/

容易和簡單。

Answer 5

所以我發現了這個問題，我正在尋找，但我不喜歡官方答案的概念......爲什麼？很好地使用AJAX提交表單很不錯，但是你失去了ASP MVC的力量，以及他將@model返回給View的概念，並且通過使用AJAX，您還必須更改大量代碼才能返回AJAX/JSON響應（更改返回ActionResult JsonResult，等等......）。我不想失去的ActionResult的輸出與return View(model)，因爲它涉及非常方便（尤其是與jQuery驗證掛在模型）......於是我想出了使用替代以下：

@using (Html.BeginForm()) { 
    @Html.AntiForgeryToken() 
    ... 

    <div class="form-group"> 
     <button id="saveBtn" type="submit" class="btn btn-primary">Save</button> 
     @Html.ActionLink("Back to List", "Index") 
    </div> 
} 

@section Scripts { 
    <!-- jQuery ASP Validation --> 
    @Scripts.Render("~/Scripts/jqueryval") 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      // clear error summary from inside our global variable (defined in _layout view) 
      window.App.errorSummary = {}; 

      // Attach click handler to the submit button 
      // from there, attach a spinner but only if no error summary are showing 
      $('#saveBtn').click(function() { 
       // has to be inside a timer else it would be triggered too late 
       setTimeout(function() { 
        if (window.App.errorSummary.numberOfInvalids < 1) { 
         // your spinner here... in my case spinner.js 
        } 
       }, 50); 
      }); 
     }); 
    </script> 
} 

和你還必須擴展jQuery的驗證對象，但最好將其擴展您的_Layout視圖中，並從那裏我的代碼看起來是這樣的：

window.App = { 
    baseUrlArea: '@((ViewContext.RouteData.Values["area"] == null) ? "" : ViewContext.RouteData.Values["area"])', 
    baseUrl: '@Url.Content("~/")', 
    language: '@((ViewContext.RouteData.Values["language"] == null) ? "en" : ViewContext.RouteData.Values["language"])', 
    controller: '@ViewContext.RouteData.Values["controller"]', 
    action: '@ViewContext.RouteData.Values["action"]', 
    errorSummary: {} 
}; 

$(document).ready(function() { 
    // extend the jquery validator object to keep track of error summary 
    // save summary inside the global (window.App) variable 
    if (typeof $.validator !== "undefined") { 
     $.validator.setDefaults({ 
      showErrors: function (errorMap, errorList) { 
       window.App.errorSummary.numberOfInvalids = this.numberOfInvalids(); 
       window.App.errorSummary.errorMap = errorMap; 
       window.App.errorSummary.errorList = errorList; 

       $("#summary").html("Your form contains " 
        + this.numberOfInvalids() 
        + " errors, see details below."); 
       this.defaultShowErrors(); 
      } 
     }); 
    }    
}); 

你可能想，爲什麼與numberOfInvalids麻煩？如果不這樣做，點擊保存按鈕時會顯示調整器，儘管我們只希望它在驗證錯誤摘要爲空時顯示出來......有意義嗎？所以，你去了，我們現在通過jQuery驗證重獲ASP/MVC的全部力量！而我們的微調只在需要展示的時候纔會展示。甜！！！ :)

Answer 6

您可以使用ajaxStart/ajaxStop。 jQuery 1。8例如：

$(document).ready(function() { 
     $("#btnShowSpinner").click(ajaxToExecute); // wire up click event for the button 
     (function() { $("#loading").hide(); })(); // hide the spinner initially 
     $(document).ajaxStart(function() { $("#loading").show(); }); // show spinner when ajax request executes 
     $(document).ajaxStop(function() { $("#loading").hide(); });// show spinner when ajax request completes 
}); 

在您的網頁標記添加包含微調，以向用戶顯示一個div：

<input id="btnShowSpinner" type="button" value="Show Spinner" /> 
<div id="loading"><img src="spinner.gif" /></div> 

Ajax調用：

function ajaxToExecute() { 
    $.ajax({ 
     cache: false, 
     type: "POST", 
     url: myURL 
     data: { "id": id}, 
     success: function (data) { 
      updateDiv.html(data); 
     }, 
     error: function (xhr, ajaxOptions, thrownError) { 
        alert('Request failed.\nError: ' + thrownError); 
       } 
    }); 
} 

這種設計也將允許重用微調頁面上的任何其他Ajax請求。