jQuery Ajax Mvc Part 1 - POST + Get Message(POST參數並同步接收Server回應的文字訊息)

我們在MVC的架構中，希望能夠套用jQuery .Ajax()的方式，將參數POST到Server某一個Action中，然後在原來的View中接收這個Server中Action的回應資料。就好像一般MVC架構中，最典型的流程，即是POST一個Form或者是一些參數值到一個Controller的Action中，然後這個Action再將回應資料，回應給某一個View。

這裡也主要也是這樣的流程，不過我們希望透過使用jQuery的Ajax方是，可以同步取得Action中的回應，然後及時回應給使用者的網頁上，當然，因為我們使用Ajax，所以使用者不會有redirect到另外一頁的感覺。

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

要使用jQuery，得先引用jQuery的library，這裡我們使用Google API的方式，當然也可以將jQuery的相關js檔案直接引用到我們的專案檔的主頁/View/Shared/Site.Master來使用。

   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，如下：

   1:  public ActionResult jQueryDemo1()

   2:  {

   3:      return View();

   4:  }

   5:   

   6:  public ActionResult jQueryGetWelcomeMsg(string id)

   7:  {

   8:      string msg = "<p>Hello! " + id + "!<br/>" + 

   9:          "<img src='/Content/world.png' alt='earth'/></p>";

  10:      Response.Write(msg);

  11:      return null;

  12:  }

並且建立一個jQueryDemo1.aspx的View，然後加上下列jQuery的.ajax()語法，說明如下：
1.url：這裡就是我們MVC架構中，我們要POST的/{Controller}/{Action}，就是上面程式碼中的HomeController中的jQueryGetWelcomeMsg這個Action。
2.type："POST"：我們使用POST的方式。
3.async：true表示我們需要使用同步即時的方式取得Server回應。
4.data："id=HoraceLin"，就是我們要傳給jQueryGetWelcomeMsg這個Action一個參數，這個參數名稱為id，其帶入的值為HoraceLin。
5.datatype："text"，表示我們回傳回來的是文字型態資料，並顯示在id=Results的<div>中。

   1:      <h3>jQuery Ajax - POST & Get Message</h3>

   2:      <p>POST 參數給Server，並接收文字資料</p>

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

   4:          $(function () {

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

   6:                  $.ajax({

   7:                      url: "/Home/jQueryGetWelcomeMsg",

   8:                      type:"POST",

   9:                      cache: false,

  10:                      async: true,

  11:                      data: "id=HoraceLin",

  12:                      datatype: "text",

  13:                      success: function (data) {

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

  15:                      }

  16:                  });

  17:              });

  18:          });  

  19:      </script>

  20:      <input id="btnSubmit" type="submit" value="Submit" />

  21:      <div id="Results">

  22:      </div>

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

然後按下Submit按鈕後，就從Server端HomeController的Action中,回應text型態的一些Html碼,這裡就可呈現Ajax即時回應資料的網頁體驗，如下圖：

未來的一些文章中，將陸續示範jQuery Ajax運用在MVC的範例。