jQuery Ajax Mvc Part 7 - jQuery UI Progress Bar

在這個例子MVC的架構中，希望能夠套用jQuery .Ajax()的方式，透過透過POST方式呼叫給Controller中的Action，經過Action處理後(可能是查詢或存取後端資料庫處理元件)，透過jQuery UI progress bar的介面方式,回應目前系統處理狀態在使用者所瀏覽的網頁上。

首先使用VS Web Developer 2010 Express建立一個ASP.NET MVC的專案。

首先得引用jQuery，這裡我們使用Google API的方式，當然也可以將jQuery的相關js檔案直接加入我們的專案檔中來使用。

   1:  <script type="text/javascript" src="https://ajax.googleapis.com

        /ajax/libs/jquery/1.4.3/jquery.min.js"></script>

   2:  <script type="text/javascript" src="https://ajax.googleapis.com

        /ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>

接著，我們在HomeController中，加上兩個Action，可看到我們為了拉長Action處理時間，特別加上sleep()方法以更明顯來觀察progress bar的變化，並且回應一個「處理完成」的字串訊息如下:

   1:  public ActionResult jQueryDemo7()

   2:  {

   3:      return View();

   4:  }

   5:   

   6:  public ActionResult jQueryProgressBar()

   7:  {

   8:      for (int i = 0; i < 10; i++)

   9:      {

  10:          Thread.Sleep(100);

  11:      }

  12:      Response.Write("處理完成");

  13:      return null;

  14:  }

並且建立一個jQueryDemo7.aspx的View，然後加上jQuery的.ajax()語法，說明如下：
1.URL:這裡就是我們MVC架構中，我們要POST的/{Controller}/{Action}，就是上面程式碼中的HomeController中的jQueryProgressBar這個Action。
2.type:我們使用POST的方式。
3.async:true表示我們需要使用同步即時的方式取得Server回應。
4.data:{}，就是我們要這個範例並沒有傳給jQueryProgressBar這個Action任何參數。
5.datatype:"text"，表示我們回傳回來的是text型態資料。
6.success:若執行完畢，則讓progress bar顯示長度為100%，並以html格式顯示「處理完成」的字串訊息至id=Results的<div>區塊內。

   1:  <h2>jQuery Ajax Mvc - jQuery UI Progress Bar</h2>

   2:  <p>使用jQuery UI 的prpgress bar效果</p>

   3:  <script type="text/javascript" language="javascript">

   4:  $(document).ready(function () {

   5:      $("#progressbar").progressbar({ value: 0 });

   6:      $("#btnSubmit").click(function () {

   7:          var intervalID = setInterval(updateProgress, 100);

   8:          $.ajax({                   

   9:              url: "/Home/jQueryProgressBar",

  10:              type: "POST",

  11:              async: true,

  12:              data: {},

  13:              dataType: "text",              

  14:              success: function (data) {

  15:                  $("#progressbar").progressbar("value", 100);

  16:                  $("#Results").html(data);

  17:                  clearInterval(intervalID);

  18:              }                  

  19:          });

  20:          return false;

  21:      });

  22:  });

  23:   

  24:  function updateProgress() {

  25:      var value = $("#progressbar").progressbar("option", "value");

  26:      if (value < 100) {

  27:          $("#progressbar").progressbar("value", value + 1);

  28:      }

  29:  }                

  30:  </script>

  31:   

  32:  <div id="progressbar"></div>

  33:  <div id="Results"></div><br />                             

  34:  <input type="button" id="btnSubmit" value="Submit" />   

我們就可以執行這個MVC專案，我們點選Demo7這個頁籤，如下圖：

然後按下Submit按鈕後，就看到隨著處理時間經過而顯示灰色bar由短變長的jQuery UI progress bar效果，如下圖:

系統處理完成後，我們收到Action傳來的「處理完成」的字串訊息，如下圖: