賀瑞斯機器兵: 2010

2010年12月21日星期二

MVC 與 HTML5

雖然MVC3 RC2已經發佈了(Announcing ASP.NET MVC 3 RC2)，但是MVC本身對與HTML5的開發支援還是有待加強。好消息是在微軟的codeplex.com網站中，可下載在MVC中欲使用HTML5開發的輔助工具，名為MVC HTML 5 Toolkit。以下就實際舉一個MVC 2專案來說明如何使用這個HTML5的工具。

先在開發環境建立一個ASP.NET MVC 2 專案檔，如下圖：

使用System.Web.Mvc.Html5元件

我們可先下載微軟官方MVC HTML 5 Toolkit，然後將這個工具在開發環境中當作是一個参考物件(Add Reference)包含到專案檔中，但沒有下載基本上也是可以全手工撰寫HTML5的新式標籤，有Toolkit只是比較方便撰寫程式，如下圖：

引用完後,可看到System.Web.Mvc.Html5這個元件已經包含在我們專案檔中了，如下圖：

在web.config設定檔加上 <add namespace="System.Web.Mvc.Html5" /> 讓整個專案都可使用，如下：

   1:  </system.web>

   2:    <pages >

   3:      <namespaces>

   4:        <add namespace="System.Web.Mvc.Html5" />

   5:      </namespaces>

   6:    </pages>

   7:  </system.web>

使用HTML5的Email、Slider Bar 與 Tag mark等標籤

在\Views\Home\Index.aspx程式中輸入以下程式碼與HTML5的新標籤，我們在撰寫的過程中，可以更方便的使用剛才引入的元件(System.Web.Mvc.Html5)，配合MVC的寫法(<%： Html.Html5TextFor(……) %>)，完整式碼如下：

   1:  <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master"

   2:   Inherits="System.Web.Mvc.ViewPage" %>

   3:  <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent"

   4:   runat="server">

   5:  HTML 5 Demo

   6:  </asp:Content>

   7:  <asp:Content ID="Content2" ContentPlaceHolderID="MainContent"

   8:   runat="server">

   9:      <h2><%: ViewData["Message"] %></h2>

  10:      <b>Demo 1 : Email Type</b><br />

  11:      <label for="email">

  12:          請輸入您的Email:</label>

  13:      <%: Html.Html5TextBox("userEmal", InputTypes.InputType.Email,

  14:          "horacelin@chinatrust.com.tw") %>

  15:      <p>---------------------------------------------------</p>

  16:      <b>Demo 2 : Slider Bar</b>

  17:      <p>

  18:          Total Recall Awesomness Gauge

  19:      </p>

  20:      <%: Html.Html5Range(1, 50, 2, 25, null) %>

  21:      <p>---------------------------------------------------</p>

  22:      <b>Demo 3 : Tag mark</b>

  23:      <p>

  24:          Now we will Demo...

  25:          <mark>HTML 5 &lt;mark&gt; Demo</mark>

  26:          let you know something!

  27:      </p>

  28:      <button type="submit">

  29:          Submit Form

  30:      </button>

  31:  </asp:Content>

以IE9 與 Chrome 來測試MVC+HTML5

接著我們也使用不同的瀏覽器來觀察，以下是Google Chrome瀏覽器執行MVC + HTML5撰寫的範例網頁後的結果，這三個新的HTML5標籤，全部都可顯示預期的效果，如下圖：

如果我們使用IE9執行我們這個範例網頁，則很不幸的，這3種新的HTML5剛好都不能支援，如下圖：

結語

HTML5 中包含了很多方便的新式標籤，雖然我們在VS 2010中看不到對HTML5的支援開發工具，但很快的VS 2010 SP1中已經可以支援HTML5的開發，且未來HTML5若一旦成為正式版本後，無論是傳統的Web Form或是MVC的方式，相信微軟應該很快推出新版本的開發工具來支援 .NET + HTML5的開發。

参考網址

HTML5

W3C組織HTML5網址
W3Schools HTML5學習資源網址
Mozilla組織HTML5資源網址
維基百科HTML 5
微軟IE9 Beta and HTML5 CSS3
Google HTML5展示與教學網站(Cool)

MVC 與 VS 2010 SP1

微軟ASP.NET MVC
微軟MVC Html5 ToolKit網址
MVC + HTML5
VS 2010 SP1 介紹

2010年12月19日星期日

.NET 4 URL Routing

ASP.NET 4中，有一個新的URL Routing的功能，可讓我們很方便的自由設定我們想要的URL格式，例如：

http://yourWebSite/search.aspx?key=WPF7

透過URL Routing，網址列可變成

http://yourWebSite/search/WPF7

http://yourWebSite/employee.aspx?country=UK&city=London

透過URL Routing，網址列可變成

http://yourWebSite/employee/UK/London

然後利用URL Routing的機制，系統會自動對應與攜帶參數到指定的實際程式中去執行，以下就介紹5種URL Routing的使用方式與範例。

首先我們建立一個Web Application，並且在Site.Master中設計幾個選單，每一個選單點下去，就透過Global.asax.cs，分別對應出各種URL Routing的使用方式。整個範例結果看起來如下：

在Site.Master中我們先撰寫每個menu、URL與參數值

   1:  <asp:Menu ID="NavigationMenu" runat="server" >

   2:    <Items>

   3:        <asp:MenuItem NavigateUrl="~/" Text="Home"/>

   4:        <asp:MenuItem NavigateUrl="~/About" Text="About"/>

   5:        <asp:MenuItem NavigateUrl="~/product/" Text="Product"/>

   6:        <asp:MenuItem NavigateUrl="~/search/hello" Text="Search"/>

   7:        <asp:MenuItem NavigateUrl="~/users/MarkLin" Text="User"/>

   8:        <asp:MenuItem NavigateUrl="~/employee/UK/London/HoraceLin"

   9:                                 Text="Employee"/>

  10:    </Items>

  11:  </asp:Menu>

在Global.asax.cs中，我們要引用using System.Web.Routing，並且在RegisterRoutes這個Method中，寫入下列程式，分別表示使用者瀏覽器端輸入的各種URL，我們這邊該如何對應到真實的程式中。

1:

   2:  void RegisterRoutes(RouteCollection routes)

   3:  {

   4:      RouteTable.Routes.MapPageRoute("HomeRoute", "Home",

   5:                    "~/Default.aspx");

   6:      RouteTable.Routes.MapPageRoute("AboutRoute", "About",

   7:                    "~/About.aspx");

   8:      RouteTable.Routes.MapPageRoute("ProductRoute", "product",

   9:                    "~/product.aspx");

  10:      RouteTable.Routes.MapPageRoute("SearchRoute",

  11:                  "search/{searchterm}", "~/search.aspx");

  12:      RouteTable.Routes.MapPageRoute("UserRoute",

  13:                  "users/{username}", "~/users.aspx");

  14:      RouteTable.Routes.MapPageRoute("EmployeeRoute",

  15:                  "employee/{country}/{city}/{name}",

  16:                  "~/employee.aspx");

  17:      RouteTable.Routes.MapPageRoute("LoginRoute", "Login",

  18:                    "~/Account/Login.aspx");

  19:  }

RouteTable.Routes.MapPageRoute()之內基本上帶有4個参數，為了說明，本範例只帶前3個参數：

RouteTable.Routes.MapPageRoute(
    路徑名稱,
    路徑URL格式,
    對應實體的程式URL,
    (option)是否應該驗證使用者是否已獲得授權可存取實體 URL)

1.URL Routing with no param.

我們按下範例中的「Home」、「About」、「Product」選單與右上角的「Login In」連結(因在最右邊，Cut圖沒有出現)，URL分別為「http://website/Home」、「http://website/About」、「http://website/product」與「http://website/Login」，透過Global.asax.cs中URL Routing機制，分別對應實際程式「Default.aspx」、「About.aspx」、「About.aspx」、「product.aspx」與「/Account/Login.aspx」，如下圖所示點選單後的畫面(請注意網址列的URL)：

2.URL Routing + parms. + Page.RouteData.Values[]

我們按下範例中的「Search」選單，如Site.Master程式所述，這裡假設帶一個参數值hello，所以URL：「http://website/search/hello」，透過Global.asax.ca中URL Routing Format：search/{searchterm}，{searchterm}即為參數名稱，分別對應實際程式search.aspx，並在search.aspx.cs撰寫如下程式：

   1:  protected void Page_Load(object sender, EventArgs e)

   2:  {

   3:     Result.Text = Page.RouteData.Values["searchterm"].ToString();

   4:  }

我們使用Page.RouteData.Values["參數名稱"]來承接參數值，並顯示在網頁控制項label=Result上，如下圖(請注意網址列的URL)：

3.URL Routing + parms. + RouteUrl：RouteName

我們按下範例中的「Search」選單後，在search.aspx網頁中也撰寫如下連結：

   1:  <asp:HyperLink ID="HyperLink1" runat="server"

   2:      NavigateUrl="<%$RouteUrl:RouteName=SearchRoute,

   3:      searchterm=scott%>">

   4:      Demo Routing : Search for Scott

   5:  </asp:HyperLink>

上述RouteName後面即利用在Global.asax.cs中之前已經寫好的路徑名稱SearchRoute，後面接searchterm這個参數與參數值scott：

   1:  RouteTable.Routes.MapPageRoute("SearchRoute",

   2:       "search/{searchterm}",

   3:       "~/search.aspx");

所以URL為「http://website/search/scott」，透過Global.asax.cs中URL Routing Format:search/{searchterm}對應實際程式search.aspx，並顯示在網頁控制項label=Result上，如下圖(請注意網址列的URL)：

4.URL Routing + parms. + RouteValue

如同上小段，URL也是帶一個参數，只是這裡是用RouteValue的與法來承接參數值。我們按下範例中的「User」選單，如Site.Master程式所述，這裡假設帶一個参數值MarkLin，所以URL為「http://website/users/MarkLin」，透過Global.asax.cs中URL Routing Format：users/{username}，{username}即為參數名稱，分別對應實際程式users.aspx如下程式：

   1:  <p><asp:Label ID="Result" runat="server" Text=

   2:       "<%$RouteValue:username%>" CssClass="msg"/>

   3:  </p>

我們使用 RouteValue：參數名稱來承接參數值，並顯示在網頁控制項label=Result上，如下圖(請注意網址列的URL)：

5.URL Routing + multi parms. + RouteValue

我們按下範例中的「Employee」選單，如Site.Master程式所述，這裡假設帶3個参數值UK、London與HoraceLin，所以URL：「http://website//employee/UK/London/HoraceLin」，透過Global.asax.cs中URL Routing Format:employee/{country}/{city}/{name}，{country}{city}{name}即為參數名稱，分別對應實際程式employee.aspx，並在employee.aspx撰寫如下程式：

   1:  <h2>Employee Information</h2>

   2:  <p>

   3:  Country　: <asp:Label runat="server" Text=

   4:                "<%$RouteValue:country%>"

   5:                CssClass="msg1"/><br />

   6:  City     : <asp:Label runat="server" Text=

   7:               "<%$RouteValue:city%>"

   8:                CssClass="msg1"/><br />

   9:  Name     : <asp:Label runat="server" Text=

  10:               "<%$RouteValue:name%>"

  11:                CssClass="msg1"/>

  12:  </p>

我們使用 RouteValue：參數名稱來承接參數值，並顯示在網頁如下圖(請注意網址列的URL)：

2010年12月14日星期二

EntityFramework.dll CTP 5 release

這邊公告一個消息，.NET最新使用Entity Framework方式(現在很多Entity Framework的書我看又要丟掉，然後重寫了)。

微軟會出一個EntityFramework.dll的元件版本，之後使用.NET C#程式的一般OO程式寫法，就可以直接套用EntityFramework的方式存取資料庫。不用像現在要先連好資料庫，然後去create 一個EntityFramework的*.edmx檔案。

目前這個EntityFramework.dll版本是CTP 5。可至下列微軟網址下載，當然可待正式版再拿來用。

Microsoft ADO.NET Entity Framework Feature Community Technology Preview 5

加入後專案檔會自動參照(reference)EntityFramework.dll這個元件到專案中(當然MVC專案檔也會有)。

使用基本範例可參考Scott Gu這位微軟高層所發表的文章:

Announcing Entity Framework Code First CTP5 Release

將陸續介紹實際使用範例。

2010年12月8日星期三

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同步的方式即時回傳的資料顯示在網頁上。

2010年11月30日星期二

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>

   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傳來的「處理完成」的字串訊息，如下圖:

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的下拉清單方式呈現科幻電影的名稱如下圖:

2010年11月29日星期一

文章分類: jQuery

2010-12-8 星期三

jQuery Ajax Mvc Part 8 - jQuery UI Progress Bar + Json

2010-11-30 星期二

jQuery Ajax Mvc Part 7 - jQuery UI Progress Bar

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

2010-11-30 星期二

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

2010-11-29 星期一

jQuery Ajax Mvc Part 5 - Get + Response Json use .getJSON() (使用.getJSON()方法取得資料)

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

2010-11-29 星期一

jQuery Ajax Mvc Part 4 - POST + Response List Json (傳回List方式的Json型態資料)

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

2010-11-29 星期一

jQuery Ajax Mvc Part 3 - POST Parm + Response Data(傳遞參數與回應Html型態字串資料)

在這個例子MVC的架構中，希望能夠套用jQuery .Ajax()的方式，透過POST方式，將網頁上輸入兩個参數給Controller中的Action，將過Actiont處理後(查詢或存取後端資料庫處理元件)，及時回應一群資料給使用者所瀏覽的網頁上。....MORE

2010-11-29 星期一

jQuery Ajax Mvc Part 2 - POST + Response Json(回應一個Json資料型態)

我們在MVC的架構中，希望能夠套用jQuery .Ajax()的方式，透過POST方式，自一個Controller的Action中，取回一個物件類型的資料，這個時候，我們可以使用上Return一個Json類型的資料及時回應給使用者所瀏覽的網頁上，當然，因為我們使用Ajax，所以使用者感受到的是在同一網頁中即時就取得資料的感覺。....MORE

2010-10-3 星期三

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到另外一頁的感覺。....MORE

jQuery Ajax Mvc Part 5 - Get + Response Json use .getJSON() (使用.getJSON()方法取得資料)

在這個例子MVC的架構中，希望能夠套用jQuery .Ajax()的方式，透過.getJSON()的方式呼叫給Controller中的Action，透過Action處理後(查詢或存取後端資料庫處理元件)，Return一個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，透過傳入的参數Category來選擇輸出資料，可看到我們需標示這是一個JsonResult的Action與return出Json型態資料;因為我們MVC這邊預設不用get方式，所以當我們使用到jQuery的.getJSON()時，須特別加上JsonRequestBehavior.AllowGet這個准許使用get的設定，如下:

   1:  public ActionResult jQueryDemo5()

   2:  {

   3:      return View();

   4:  }

   5:  public JsonResult jQueryGetJsonByParm(string Category)

   6:  {

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

   8:      if (Category == "A")

   9:      {

  10:         list.Add(new Product { Name = "A01", Price = 11 });

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

  12:         list.Add(new Product { Name = "A03", Price = 23 });

  13:      }

  14:      else

  15:      {

16:

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

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

  19:         list.Add(new Product { Name = "B03", Price = 26 });

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

  21:         list.Add(new Product { Name = "B05", Price = 33 });

  22:         list.Add(new Product { Name = "B06", Price = 26 });

  23:      }

  24:      return Json(list, JsonRequestBehavior.AllowGet);

  25:  }

並且建立一個jQueryDemo5.aspx的View，然後加上jQuery的.ajax()語法，說明如下：
1.URL:這裡就是我們MVC架構中，我們要POST的/{Controller}/{Action}，就是上面程式碼中的HomeController中的jQueryGetJsonByParm這個Action。
2.getJSON():我們使用Get的方式取得Json型態的回應資料(可参考jQuery文件)，
有3個参數需留意：

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

3.each():Ajax讀取迴圈資料的語法，因目前回應的Jason資料型態中包含List資料，故我們使用.each()語法，並透過操作 d 這個物件，將Name與Price這些資料欄位的值一一讀出，當然也可使用for...next這類的讀取語法。

   1:  <h2>jQuery Ajax Mvc - Get + Response Json use .getJSON()</h2>

   2:  <p>用.getJSON()方式，Send給Server一個(或數個)參數，

   3:  並自Server取回JSON類型資料(一個List->包含數個Product物件資料)</p>

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

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

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

   7:              var URL = "/Home/jQueryGetJsonByParm";

   8:              $.getJSON(URL, { Category: $("#Category").val() },

   9:                 function (data) {

  10:                  var resultA = '';

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

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

  13:                          resultA += "Product Name:"

  14:                              + d.Name + " | ";

  15:                          resultA += "Price:"

  16:                             + d.Price + "<br/>";

  17:                      }

  18:                  });

  19:                  $("#Results").html(resultA);

  20:              });

  21:          });

  22:      });

  23:  </script>

  24:  Input A or B Category:<input id="Category" type="text" />

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

  26:  <div id="Results">

  27:  </div>

我們就可以執行這個MVC專案，我們點選Demo5這個頁籤，並輸入A或B任一種類別，當然可自行加上一些驗證與檢核功能，如下圖：

然後按下Submit按鈕後，就可呈現Ajax即時回應資料的網頁體驗，如下圖:

jQuery Ajax Mvc Part 4 - POST + Response List Json (傳回List方式的Json型態資料)

在這個例子MVC的架構中，希望能夠套用jQuery .Ajax()的方式，透過POST方式呼叫給Controller中的Action，透過Action處理後(查詢或存取後端資料庫處理元件)，Return一個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，可看到我們需標示這是一個JsonResult的Action與return出Json型態資料，如下：

   1:  public ActionResult jQueryDemo4()

   2:  {

   3:      return View();

   4:  }

5:

   6:  public JsonResult jQueryGetProductJson()

   7:  {

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

   9:      list.Add(new Product { Name = "P001", Price = 1100 });

  10:      list.Add(new Product { Name = "P002", Price = 1300 });

  11:      list.Add(new Product { Name = "P003", Price = 2300 });

  12:      return Json(list);

  13:  }

並且建立一個jQueryDemo4.aspx的View，然後加上jQuery的.ajax()語法，說明如下：
1.url:這裡就是我們MVC架構中，我們要POST的/{Controller}/{Action}，就是上面程式碼中的HomeController中的jQueryGetProductJson這個Action。
2.type:我們使用POST的方式。
3.async:true表示我們需要使用同步即時的方式取得Server回應。
4.data:{}，這個範例並沒有傳給jQueryGetProductJson這個Action任何參數。
5.datatype:"json"，表示我們回傳回來的是json型態資料。
6.success:在這裡我們以html格式顯示至id=Results的<div>區塊內。
7.each():Ajax讀取迴圈資料的語法，因目前回應的Jason資料型態中包含List資料，故我們使用.each()語法，並透過操作d這個物件，將Name與Price這些資料欄位的值一一讀出，當然也可使用for...next這類的讀取語法。

   1:  <h2>jQuery Ajax Mvc POST + Response JSON</h2>

   2:  <p>用POST方式，自Server取回JSON類型資料

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

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

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

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

   7:              $.ajax({

   8:                  url: "/Home/jQueryGetProductJson",

   9:                  type: "POST",

  10:                  async: true,

  11:                  data: {},

  12:                  dataType: "json",

  13:                  success: function (data) {

  14:                      var result = '';

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

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

  17:                              result += "Product Name:" +

  18:                               d.Name + " | ";

  19:                              result += "Price:" +

  20:                               d.Price + "<br/>";

  21:                          }

  22:                      });

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

  24:                  }

  25:              })

  26:          });

  27:      });

  28:  </script>

  29:  <input id="btnSubmit" type="submit"/>

  30:  <div id="Results"></div>

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

然後按下Submit按鈕後，就可呈現Ajax即時回應資料的網頁體驗，如下圖：

jQuery Ajax Mvc Part 3 - POST Parm + Response Data(傳遞參數與回應Html型態字串資料)

在這個例子MVC的架構中，希望能夠套用jQuery .Ajax()的方式，透過POST方式，將網頁上輸入兩個参數給Controller中的Action，透過Action處理後(查詢或存取後端資料庫處理元件)，及時回應一群資料給使用者所瀏覽的網頁上。

首先使用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，我們將資料簡化存在List型態變數中，然後用StringBuilding將傳入参數與資料包成Html碼輸出到前端網頁顯示出來，如下：

   1:  public ActionResult jQueryDemo3()

   2:  {

   3:      return View();

   4:  }

5:

   6:  public ActionResult jQueryGetProductData(string uName, string uCity)

   7:  {

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

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

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

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

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

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

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

  15:      StringBuilder sb = new StringBuilder();

  16:      sb.Append("Customer ID:" + uName +

  17:          "<br/>City:" + uCity + "<br/>");

  18:      foreach (Product p in list)

  19:      {

  20:          sb.Append("Product Name:" + p.Name +

  21:              "  |  Price:" + p.Price  + "<br/>");

  22:      }

  23:      Response.Write(sb.ToString());

  24:      return null;

  25:  }

並且建立一個jQueryDemo3.aspx的View，然後加上jQuery的.ajax()語法，說明如下：
1.url:這裡就是我們MVC架構中，我們要POST的/{Controller}/{Action}，就是上面程式碼中的HomeController中的jQueryGetProductData這個Action。
2.type:我們使用POST的方式。
3.async:true表示我們需要使用同步即時的方式取得Server回應。
4.data:我們取得網頁上輸入的客戶的Name與City兩個TextBox的值，對應並傳遞給jQueryGetProductData這個Action兩個参數，uName與uCity。
5.datatype:"text"，表示我們回傳回來的是text型態資料。
6.success:在這裡我們以html格式顯示至id=Results的<div>區塊內。

   1:  <h2>jQuery Ajax Mvc POST Parm + Get Data</h2>

   2:  <p>用POST方式，自Server取回Html類型資料(一個List->包含數個Product物件資料)</p>

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

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

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

   6:              $.ajax({

   7:                  url: "/Home/jQueryGetProductData",

   8:                  type: "POST",

   9:                  async: true,

  10:                  data: "uName=" + $("#Name").val() + "&uCity=" + $("#City").val(),

  11:                  datatype: "text",

  12:                  success: function (data) {

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

  14:                  }

  15:              });

  16:          });

  17:      });

  18:  </script>

  19:  Customer's Name:<input id="Name" type="text" /><br />

  20:  Customer's City:<input id="City" type="text" /><br />

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

  22:  <div id="Results"></div>

我們就可以執行這個MVC專案，我們點選Demo3這個頁籤，並輸入客戶的Name與City如下圖：

然後按下Submit按鈕後，就可呈現Ajax即時回應資料的網頁體驗，如下圖：

jQuery Ajax Mvc Part 2 - POST + Response Json(回應一個Json資料型態)

我們在MVC的架構中，希望能夠套用jQuery .Ajax()的方式，透過POST方式，自一個Controller的Action中，取回一個物件類型的資料，這個時候，我們可以使用上Return一個Json類型的資料及時回應給使用者所瀏覽的網頁上，當然因為我們使用Ajax，所以使用者感受到的是在同一網頁中即時就取得資料的感覺。

首先使用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，可看到我們需標示這是一個JsonResult的Action與return出Json型態資料如下：

   1:  public ActionResult jQueryDemo2()

   2:  {

   3:     return View();

   4:  }

5:

   6:  public JsonResult jQueryGetSimpleJSON()

   7:  {

   8:      Product prd = new Product {

   9:          Name = "B002",

  10:          Price = 3301

  11:      };

  12:      return Json(prd);

  13:  }

並且建立一個jQueryDemo2.aspx的View，然後加上jQuery的.ajax()語法，說明如下：
1.url:這裡就是我們MVC架構中，我們要POST的/{Controller}/{Action}，就是上面程式碼中的HomeController中的jQueryGetSimpleJSON這個Action。
2.type:我們使用POST的方式。
3.async:true表示我們需要使用同步即時的方式取得Server回應。
4.data:{}，就是我們要這個範例並沒有傳給jQueryGetSimpleJSON這個Action任何參數。
5.datatype:"json"，表示我們回傳回來的是Json型態資料。
6.success:在這裡我們可使用data.xxxx的方式將產品"B002"的名稱與價格資料讀出，並以html格式顯示至id=Results的<div>區塊內。

   1:  <h2>jQuery Ajax - POST & Response Json</h2>

   2:  <p>用POST方式,自Server取回JSON類型資料(一個Product物件資料)</p>

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

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

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

   6:              $.ajax({

   7:                  url: "/Home/jQueryGetSimpleJSON",

   8:                  type: "POST",

   9:                  async: true,

  10:                  data: {},

  11:                  dataType: "json",

  12:                  success: function (data) {

  13:                      $("#Results").html("<b>Product Name:</b>"

  14:                       + data.Name

  15:                       + "<br/><b>Price:</b>" + data.Price);

  16:                  }

  17:              })

  18:          });

  19:      });

  20:  </script>

  21:  <div>

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

  23:      <br />

  24:      <br />

  25:      <div id="Results">

  26:      </div>

  27:  </div>

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

然後按下Submit按鈕後，就可呈現Ajax即時回應資料的網頁體驗，如下圖:

2010年11月3日星期三

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的範例。

訂閱：文章 (Atom)

2010年12月21日 星期二

2010年12月19日 星期日

2010年12月14日 星期二

2010年12月8日 星期三

2010年11月30日 星期二

2010年11月29日 星期一

2010年11月3日 星期三

2010年12月21日星期二

2010年12月19日星期日

2010年12月14日星期二

2010年12月8日星期三

2010年11月30日星期二

2010年11月29日星期一

2010年11月3日星期三