mvc基础系列说谈(4)——HtmlHelper，自定义，扩展HtmlHelper

在视图中可以直接写Html，也可以使用HtmlHelper来创建。

例如：

<input id="tbxcontent" />
<%=Html.TextBox("tbxname") %>

 

页面源码：

<input id="tbxcontent" />
<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);

 

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

 

这个方法首先调用：

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） 基本

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

（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>
<div class="divMargin">
    <span class="spanHeader">用户密码：</span>
    <%=Html.Password("tbxUserPW")%>
</div>
<div class="divMargin">
    <input type="submit" value="登录" />
</div>
<%} %>

 

其中的Detail  是路由的名称。

BeginForm可以用using的方法关闭form，来代替EndForm

再写一个BeginForm的例子：

<%Html.BeginForm("Validate", "Login"); %>
    <div class="divMargin">
        <span class="spanHeader">用户帐号：</span>
        <%=Html.TextBox("tbxUserId") %>
    </div>

    <div class="divMargin">
        <span class="spanHeader">用户密码：</span>
        <%=Html.Password("tbxUserPW") %>
    </div>

    <div class="divMargin">
    <input type="submit" value="登录" />
    </div>
<%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>