2013年12月17日 星期二

C# - MVC之Helper

本文要介紹的是Helper,它是MVC不可或缺的好幫手,可以在MVC視圖中使用自定義的HTML Helpers,HTML Helpers可以減少繁瑣的HTML標籤,並有效的整理HTML的頁面呈現。
HTML Helper是返回一個字串的方法。該字串可以代表任何類型的內容。例如可以使用HTML Helpers函數來成為標準的HTML標記,如HTML的<input>和<img>標記。也可以使用HTML輔助函數來呈現更複雜的內容,如標籤或資料庫的HTML表格。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.Index"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns= "http://www.w3.org/1999/xhtml ">

<head id="Head1" runat="server">
    <title>Index</title>
</head>
<body>

      <div>

          <% using (Html.BeginForm()){ %>

               <label for="firstName">First Name:</label>

               <br />

               <%= Html.TextBox("firstName")%>

               <br /><br />

               <label for="lastName">Last Name:</label>
               <br />
               <%= Html.TextBox("lastName")%>
               <br /><br />
               <input type="submit" value="Register" />   

          <% } %>
          </div>
</body>

</html>

該Html.BeginForm()Helper方法用於建立在開始和結束的HTML<form>標記。要注意的是Html.BeginForm()方法被調用using語句中。 using語句確保<form>標籤在using塊結束時關閉。

開發者可以使用Html.EndForm()輔助方法來關閉<form>標籤,使用任何方法來建立一個開閉,不用建立一個block。

Html.TextBox(),要呼叫HTML Helper時是採用<%=%>標記,而不是<%%>標記呈現。

<%@ Page Language="C#" AutoEventWireup="false" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Index" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Index</title>
</head>
<body>
     <div>
          <form action="http://localhost:33102/" method="post">
               <label for="firstName">First Name:</label>
               <br />
               <input id="firstName" name="firstName" type="text" value="" />
               <br /><br />
               <label for="lastName">Last Name:</label>
               <br />
               <input id="lastName" name="lastName" type="text" value="" />
               <br /><br />
               <input id="btnRegister" name="btnRegister" type="submit" value="Register" />
          </form>
     </div>
</body>

</html>

建立一個HTML Helper最簡單的方法,是創建一個返回字符串的靜態方法。

namespace MvcApplication1.Helpers
{
    public class LabelHelper
    {
        public static string Label(string target, string text)
        {
            return String.Format("<label for='{0}'>{1}</label>", target, text);
        }
    }

}


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index2.aspx.cs" Inherits="MvcApplication1.Views.Home.Index2"%>
<%@ Import Namespace="MvcApplication1.Helpers" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
     <title>Index2</title>
</head>
<body>
     <div>
          <% using (Html.BeginForm())
          { %>
               <%= LabelHelper.Label("firstName", "First Name:") %>
               <br />
               <%= Html.TextBox("firstName")%>
               <br /><br />
               <%= LabelHelper.Label("lastName", "Last Name:") %>
               <br />
               <%= Html.TextBox("lastName")%>
               <br /><br />
               <input type="submit" value="Register" />
          <% } %>
     </div>
</body>

</html>

要創建一個標準HTML Helper 運作方式如同ASP.NET MVC  framework,需要建立extension methods。extension methods能夠以現有的類添加新的方法。建立一個HTML Helper的方法,添加新的方法來通過一個視圖的html屬性所代表的HtmlHelper類別。

namespace MvcApplication1.Helpers
{
    public static class LabelExtensions
    {

        public static string Label(this HtmlHelper helper, string target, string text)
        {
            return String.Format("<label for='{0}'>{1}</label>", target, text);
        }
    }

}

當建立一個extension methods之後,並成功地構建應用程序,extension methods會出現在Visual Studio的自動類別清單裡。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index3.aspx.cs" Inherits="MvcApplication1.Views.Home.Index3" %>
<%@ Import Namespace="MvcApplication1.Helpers" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
     <title>Index3</title>
</head>
<body>
     <div>
          <% using (Html.BeginForm())
          { %>
               <%= Html.Label("firstName", "First Name:") %>
               <br />
               <%= Html.TextBox("firstName")%>
               <br /><br />
               <%= Html.Label("lastName", "Last Name:") %>
               <br />
               <%= Html.TextBox("lastName")%>
               <br /><br />
               <input type="submit" value="Register" />
          <% } %>
     </div>
</body>

</html>

在Web開發之中,Helper可以運用在像是「下拉式連動選單」這樣的設計上。唯一特別的事,此方式是採用MVC的架構導向。所以在設計上,可以是更有架構,程式也更為簡潔。

-雲遊山水為知已逍遙一生而忘齡- 電腦神手

沒有留言:

張貼留言