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 介紹