jQuery Ajax Mvc Part 8 - jQuery UI Progress Bar + Json (以jQuery UI Progress Bar介面 + 取回Json型態資料)

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

首先使用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>

我們在/Models內建立一個Product類別，如下：

   1:  public class Product

   2:  {

   3:      public string Name { get; set; }

   4:      public int Price { get; set; }

   5:  }

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

   1:  public ActionResult jQueryDemo8()

   2:  {

   3:      return View();

   4:  }

   5:   

   6:  public JsonResult jQueryJasonProgressBar()

   7:  {

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

   9:      {

  10:          Thread.Sleep(800);

  11:      }

  12:      List<Product> list = new List<Product>();

  13:      list.Add(new Product { Name = "F001", Price = 1320 });

  14:      list.Add(new Product { Name = "F002", Price = 3301 });

  15:      list.Add(new Product { Name = "F003", Price = 2623 });

  16:      list.Add(new Product { Name = "F004", Price = 1320 });

  17:      list.Add(new Product { Name = "F005", Price = 3301 });

  18:      list.Add(new Product { Name = "F006", Price = 2623 });

  19:      return Json(list);

  20:  }

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

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

   2:  <p>使用jQuery UI 的progress bar效果+

   3:  取回Json資料型態(一個List->包含數個Product物件資料)</p>

   4:   

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

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

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

   8:      $("#progressbar").hide();

   9:      $("#loadingMsg").hide();

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

  11:          $("#progressbar").show();

  12:          $("#loadingMsg").show();

  13:          //設定progress bar的顯示方式與速度

  14:          var intervalID = setInterval(updateProgress, 250);

  15:          $.ajax({

  16:              url: "/Home/jQueryJasonProgressBar",

  17:              type: "POST",

  18:              async: true,

  19:              data: {},

  20:              dataType: "json",                                    

  21:              //當有錯誤發生時,在errormsg <div>中顯示錯誤訊息

  22:              error: function (xhr, status, thrownError) {

  23:                  $("#errormsg").text(xhr.statusText);

  24:                  $("#errormsg").show();

  25:              },

  26:              //當處理成功時,關閉progerss bar與loading 訊息,

  27:              //並且顯示Action處理後之資料

  28:              success: function (data) {

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

  30:                  $("#progressbar").hide();

  31:                  var result = '';

  32:                  $.each(data, function (index, d) {

  33:                      if (d.Name != '') {

  34:                          result += "Name:" + d.Name + " | ";

  35:                          result += "Price:" + d.Price + "<br/>";

  36:                      }

  37:                  });

  38:                  $("#Results").html(result);

  39:                  clearInterval(intervalID);

  40:                  $("#loadingMsg").hide();

  41:              }

  42:          });

  43:          return false;

  44:      });

  45:  });

  46:   

  47:  function updateProgress() {

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

  49:      if (value < 100) {

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

  51:      }

  52:  }         

  53:  </script>

  54:   

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

  56:  <div id="loadingMsg">Loading....</div>

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

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

  59:  <div id="errormsg" style="color:Red;"></div>

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

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

處理完畢後，可看到以Ajax同步的方式即時回傳的資料顯示在網頁上。