jQuery Ajax Mvc Part 6 - Response Json use .getJSON() + Display with ListItem(將資料傳回後放入ListItem中)

在這個例子MVC的架構中，希望能夠套用jQuery .Ajax()的方式，透過.getJSON()的方式呼叫給Controller中的Action，透過Action處理後(查詢或存取後端資料庫處理元件)，Return一個Json類型的資料，並且以ListItem的下拉清單方式及時回應在使用者所瀏覽的網頁上。

首先使用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，可看到我們需標示這是一個JsonResult的Action與return出Json型態資料;因為我們MVC這邊預設不用get方式，所以當我們使用到jQuery的.getJSON()時，須特別加上JsonRequestBehavior.AllowGet這個准許使用get的設定，如下:

   1:  public ActionResult jQueryDemo6()

   2:  {

   3:      return View();

   4:  }

   5:   

   6:  public JsonResult jQueryGetListItem()

   7:  {

   8:      List<ListItem> list = new List<ListItem>() {

   9:          new ListItem() { Text = "2001太空漫遊 /

                                2001: A Space Odyssey" },

  10:          new ListItem() { Text = "銀翼殺手 / Blade Runner" },

  11:          new ListItem() { Text = "ET /

                                E.T. the Extra-Terrestrial" },

  12:          new ListItem() { Text = "消失的1943 / 

                                The Philadelphia Experiment" },

  13:          new ListItem() { Text = "魔鬼終結者 / The Terminator" },

  14:          new ListItem() { Text = "異形 / Aliens" },

  15:          new ListItem() { Text = "星際爭霸戰 / Star Trek XI" }

  16:      };

  17:      return this.Json(list, JsonRequestBehavior.AllowGet);

  18:  }

並且建立一個jQueryDemo6.aspx的View，然後加上jQuery的.ajax()語法，說明如下：
1.each():Ajax讀取迴圈資料的語法，因目前回應的Jason資料型態中包含List資料，故我們使用.each()語法，將Action的itemData資料欄位值一一讀出，然後加到list這個變數中。
2.getJSON():我們使用Get的方式取得Json型態的回應資料(可参考jQuery文件)，有3個参數需留意：

.getJSON()(被執行的URL，get的輸入参數，執行後回應的結果)

被執行的URL就是上面程式碼中的HomeController中的jQueryGetListItem這個Action，然後把執行後回應的結果資料填入itemList的Html標籤中。

   1:  <script type="text/javascript">

   2:  $('#itemsList').disableSelection();

   3:  $.fn.addItems = function (data) {

   4:      return this.each(function () {

   5:          var list = this;

   6:          $.each(data, function (index, itemData) {

   7:              var option = new Option(itemData.Text);

   8:              list.add(option);

   9:          });

  10:      });

  11:  };

  12:   

  13:  $(function () {

  14:      $('#itemsList').show();

  15:      $('#btnSubmit').click(function () {

  16:          $.getJSON("/Home/jQueryGetListItem",

  17:             null, function (data) {

  18:              $("#itemsList").addItems(data);

  19:          });

  20:      });

  21:  });

  22:  </script>

  23:  <button id="btnSubmit" name="btnClick">

  24:      科幻電影Science Fiction Films</button>

  25:  <br />

  26:  <select id="itemsList" name="itemsList">

  27:  </select>

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

然後按下「科幻電影Science Fiction Films」按鈕(Submit)後，就可呈現Ajax即時回應資料的網頁體驗，且這裡是以ListItem的下拉清單方式呈現科幻電影的名稱如下圖: