mvc基礎系列說談(4)——HtmlHelper，自定義，擴充HtmlHelper

在視圖中可以直接寫Html，也可以使用HtmlHelper來建立。

例如：

<input id="tbxcontent" />

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

頁面源碼：

<input id="tbxname" name="tbxname" type="text" value="" />

ViewPage的Html屬性就是一個HtmlHelper類型的屬性。它的用于建立Html的一些方法例如：TextBox，是通過擴充方法來實作。

FormExtensions  Represents support for HTML in an application. 

InputExtensions  Represents support for HTML input controls in an application. 

LinkExtensions  Represents support for HTML links in an application. 

RenderPartialExtensions  Provides support for rendering a partial view. 

SelectExtensions  Represents support for making selections in a list. 

TextAreaExtensions  Represents support for HTML textarea controls. 

ValidationExtensions  Provides support for validating the input from an HTML form.

它們位于System.Web.Mvc.Html

（一）InputExtensions

它能建立5種類型的Html控件（傳回5種類型的Html控件的字元串）。

·CheckBox

·RadioButton

·TextBox

·Password

·Hidden

每一種有多個重載，用于滿足不同參數。

以TextBox為例。

public static string TextBox(this HtmlHelper htmlHelper, string name);

public static string TextBox(this HtmlHelper htmlHelper, string name, object value);

public static string TextBox(this HtmlHelper htmlHelper, string name, object value, Dictionary<string, object> htmlAttributes);

public static string TextBox(this HtmlHelper htmlHelper, 

string name, object value, object htmlAttributes);

這個方法首先調用：

public static string TextBox(this HtmlHelper htmlHelper, string name)這個方法，然後最終調用：

public static string TextBox(this HtmlHelper htmlHelper,string name,

object value,IDictionary<string, object> htmlAttributes)

{

    return htmlHelper.InputHelper(InputType.Text, name, value, (value == null), 

                                  false,true, true, htmlAttributes);

}

然後調用：htmlHelper.InputHelper這個方法。

以TextBox來示例：

（1） 基本

（2） 添加css

<%=Html.TextBox("tbxname",string.Empty, new { @class="cssText"})%>

（3）綁定

 現在不提供強類型，以一個ViewData為例

<%=Html.TextBox("tbxname",ViewData["test"], new { @class="cssText"})%>

（二）FormExtensions

它用于顯示Form。有三種。

·BeginForm

·BeginRouteForm

·EndForm

其中，BeginRouteForm是以路由方式送出表單。

routes.MapRoute(

     "Detail",

     "{controller}/{action}/{id}",

      new { Controller = "News", action = "Detail", id = 2 },

         new { id=new SelfConstraint()}

     );

這是一個路由，然後：

<% using (Html.BeginRouteForm("Detail", new { controller = "Login", action = "Validate" })){%>

<div class="divMargin">

    <span class="spanHeader">使用者帳号：</span>

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

</div>

    <span class="spanHeader">使用者密碼：</span>

    <%=Html.Password("tbxUserPW")%>

    <input type="submit" value="登入" />

<%} %>

其中的Detail  是路由的名稱。

BeginForm可以用using的方法關閉form，來代替EndForm

再寫一個BeginForm的例子：

<%Html.BeginForm("Validate", "Login"); %>

    <div class="divMargin">

        <span class="spanHeader">使用者帳号：</span>

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

    </div>

        <span class="spanHeader">使用者密碼：</span>

        <%=Html.Password("tbxUserPW") %>

<%Html.EndForm(); %>

注意的是，開始與結束沒有等号，且，都有分号結束符。

（三）LinkExtensions

用于提供html連結，有兩種方法：

·ActionLink

·RouteLink

每一類方法有多種重載。 

public static string ActionLink(this HtmlHelper htmlHelper, string linkText, string actionName)

這是ActionLink的一個方法，它可以連結到同控制器下的某一動作中。

<%=Html.ActionLink("到新聞清單頁","NewsList") %>

然後，傳遞參數：

<%=Html.ActionLink("到新聞詳細頁", "Detail", new { id=2})%>

下面是一個RouteLink的方法

public static string RouteLink(this HtmlHelper htmlHelper, string linkText, object routeValues)

<%=Html.RouteLink("到新聞清單頁", new { controller="News",action="NewsList"})%>

<%=Html.RouteLink("到新聞詳細頁", new { action = "Detail", id = 2 })%>

（四）自定義HtmlHelper

自定義一個Label

public class LabelHelper

    public static string Label(string target, string text)

    {

        return String.Format("<label id='{0}'>{1}</label>", target, text);

    }

在使用時：要添加名字空間進來：

<%@ Import Namespace="Web.Models.SelfHelper" %>

然後這樣使用：

<%=LabelHelper.Label("label1","這是一個标簽")%>

為了和HtmlHelper提供的控件一緻，擴充一下HtmlHelper，以一個span為例：

public static class HtmlExtensions

   public static string Span(this HtmlHelper helper, string strId,string strContent)

   {

      return string.Format("<span id=\"{0}\">{1}</span>", strId, strContent);

   }

使用：

同樣也要引用空間，然後：

<%=Html.Span("span1","這是一個span") %>

（五） TagBuilder

在自定義HtmlHelper時，可以通過TagBuilder來建立。下邊列出幾個常用的方法：

public void AddCssClass(string value);

public void GenerateId(string name);

public void SetInnerText(string innerText);

public void MergeAttribute(string key, string value);

現在還是來建立一個span：

public static string Span(this HtmlHelper helper, string strId, 

              string strcontent, string strClass)

    TagBuilder builder = new TagBuilder("span"); 

    builder.GenerateId(strId);

    builder.SetInnerText(strcontent);

    builder.AddCssClass(strClass);

    builder.MergeAttribute("title", "span!");

    return builder.ToString();

<%=Html.Span("span2","tagbuilder建立的span","normalCss") %>

源碼： 

<span class="normalCss" id="span2" title="span!">tagbuilder建立的span</span>

部落格園大道至簡

http://www.cnblogs.com/jams742003/

轉載請注明：部落格園