MVC之htmlhelper总结

自学习mvc以来，htmlhelper使用的也非常多，下面开始总结一下吧，由于本人比较懒，内容大部分摘自slark.net的笔记，

有人问为什么用这个htmlhelper,我就喜欢用原生的标签，这个按个人习惯吧，不过存在即是真理，微软给你封装好了，简单易扩展，何必不用呢，那我们就开始吧.

1,ActionLink

@Html.ActionLink("LinkText", "ActionName")
@Html.ActionLink("LinkText", "ActionName", "ControllerName")
@Html.ActionLink("LinkText", "ActionName", new { id = 1 })

点击在浏览器中查看。运行结果：

<a href="/DefaultController/ActionName">LinkText</a>   //使用当前controller默认controller
<a href="/ControllerName/ActionName">LinkText</a>      //使用指定controller
<a href="/DefaultController/ActionName/1">LinkText</a>　　　

2,RouteLink,这种用的倒不多，直接把例子拷过来吧

RouteLink同样是用来生成HTML中的<a>标签的，但是其参数和ActionLink不同。我们这里给出能实现上面三行HTML代码的RouteLink代码：

@Html.RouteLink("LinkText", new { action = "ActionName" })
@Html.RouteLink("LinkText", new { action = "ActionName", controller = "ControllerName" })
@Html.RouteLink("LinkText", new { action = "ActionName", id = 1 })

从上面代码可以看出LinkText依然是链接显示的文字，而链接的其他信息则包含在RouteLink的第二个参数中。这个参数是个Object，它的action属性表示指向的Action而controller属性表示指向的Controller。如果没有controller属性则指向当前Controller。id属性则为要传递的参数。

3,TextBox,Hidden,Password这三种用法差不多，就直接列出来

@Html.TextBox("NameId")
@Html.TextBox("NameId","Value")

@Html.Hidden("NameId")
@Html.Hidden("NameId", "Value")

@Html.Password("NameId")
@Html.Password("NameId", "Value")

4,这里特别说明下Html.CheckBox的用法

@Html.CheckBox("NameId", true)
@Html.CheckBox("NameId", false)

<input checked="checked" id="NameId" name="NameId" type="checkbox" value="true" /><input name="NameId" type="hidden" value="false" />
<input id="NameId" name="NameId" type="checkbox" value="true" /><input name="NameId" type="hidden" value="false" />

本来，正常情况下它应该只生成一个<input type="checkbox">的标签，如果CheckBox第二个参数是true则有checked="checked"属性，表示这个框打勾。但是为什么这个标签有value="true"而且后面还有个尾巴<input name="NameId" type="hidden" value="false" />呢？

因为在我们ASP.NET MVC中这样子写的效果就是：如果这个CheckBox打勾了，那么提交之后就会传给目标页面一个NameId="true"的值，如果没打勾就会传一个NameId="false"的值。这个值就是由<input name="NameId" type="hidden" value="false" />传递的。若是没有<input name="NameId" type="hidden" value="false" />这一段，如果打勾了之后提交，仍然会传给目标页面一个NameId="true"的值，而不打勾则不会传NameId的值过去。

5,

RadioButton会生成一个<input type="radio">标签，代码如下：

@Html.RadioButton("NameId","Value", true)
@Html.RadioButton("NameId", "Value", false)

生成代码如下：

<input checked="checked" id="NameId" name="NameId" type="radio" value="Value" />
<input id="NameId" name="NameId" type="radio" value="Value" />

可以看出RadioButton和CheckBox一样都有checked参数，而RadioButton多了一个Value参数可以设置。

6,

DropDownList函数可以创建<select>标签表示的下拉菜单。在创建下拉菜单之前我们需要创建用<option>标签表示的菜单选项列表，创建方法如下：

@{
        SelectListItem item;
        List<SelectListItem> list = new List<SelectListItem>();
        for(int i=1;i<5;i++)
        {
            item = new SelectListItem();
            item.Text = "Text" + i;
            item.Value = "Value" + i;
            item.Selected = (i==2);
            list.Add(item);
        }
}

SelectListItem类会生成一个菜单项，其Text属性表示其显示的文字，Value属性表示其对应的值，Selected属性表示其是否被选中。上面代码生成了若干个<option>标签并且当i为2时，标签被选中。

通过下面代码可以生成包含上面选项列表的下拉菜单：

@Html.DropDownList("NameId", list)

生成的结果如下：

<select id="NameId" name="NameId">
    <option value="Value1">Text1</option>
    <option selected="selected" value="Value2">Text2</option>
    <option value="Value3">Text3</option>
    <option value="Value4">Text4</option>
</select>

可见DropDownList函数的第一个参数是其id和name，第二个参数就是其四个选项组成的List。每一个选项都有各自的Text、Value，并且第二个选项被选中。

7,

ListBox可以生成一个多选列表框，对应HTML里的<select multiple="multiple">标签，ListBox的结构和DropdownList的结构基本一样，只是多了multiple="multiple"属性。我们这里依然使用上面创建的选项列表来创建我们的ListBox，代码如下：

@Html.ListBox("NameId", list)

生成的结果如下：

<select id="NameId" multiple="multiple" name="NameId">
    <option value="Value1">Text1</option>
    <option selected="selected" value="Value2">Text2</option>
    <option value="Value3">Text3</option>
    <option value="Value4">Text4</option>
</select>

8,除了上述标签外，还有个通用的方法给这些生成的标签加上属性

例如想给一个标签添加class和style可以用下面办法：

@Html.TextBox("NameId", "Value", new { @class = "classText",@style="width:200px" })

得到结果如下：

<input class="classText" id="NameId" name="NameId" style="width:200px" type="text" value="Value" />

上面黄色标记部分即为添加的属性。其实你可以以同样的方式添加任意的属性名和属性值，都会生效。

9，Form表单

在HtmlHelper中生成表单Form会用到两个函数：BeginForm和EndForm。有两种方法可以生成<form>...</form>表单，使用方法如下所示：

@using (Html.BeginForm("actionName", "controllerName", FormMethod.Get))
{
    @Html.TextBox("NameId")
    <input type="submit" value="SubmitButton" />
}

@{Html.BeginForm("actionName", "controllerName", FormMethod.Post);}
    @Html.TextBox("NameId")
    <input type="submit" value="SubmitButton" />
@{Html.EndForm();}

仔细看上面两种生成Form方法的区别：第一种方法将Html.BeginForm()函数放入@using (){}结构中这种方法可以直接生成form的开始标记和结束标记；第二种方法先写Html.BeginForm()函数生成开始标记，再在最后写Html.EndForm()函数生成结尾标记。这两种方法生成的结果是一样的。结果如下：

<form action="/controllerName/actionName" method="get">
　　<input id="NameId" name="NameId" type="text" value="" />
    <input type="submit" value="SubmitButton" />
</form>
<form action="/controllerName/actionName" method="post">
　　<input id="NameId" name="NameId" type="text" value="" />
　　<input type="submit" value="SubmitButton" />
</form>

从运行结果可以看出BeginForm()的第一个参数指定Action的名字，第二个参数指定Controller的名字，第三个参数指定提交的时候是用Post方法还是Get方法。上面代码中第一个Form用的是Get方法，第二个Form用的是Post方法。

其实也可以什么参数不指定，直接用的默认的本页面提交,提交方式post

@using (Html.BeginForm()){
  //内容
}

10,使用TagBuilder扩展HtmlHelper方法

using System.Web.Mvc;
public static class HtmlExtensions
{
    public static MvcHtmlString Submit(this HtmlHelper helper, string value)
    {
        var builder = new TagBuilder("input");
        builder.MergeAttribute("type", "submit");
        builder.MergeAttribute("value", value);
        return MvcHtmlString.Create(builder.ToString(TagRenderMode.SelfClosing)); 
　　}
}

我们来解读一下上面的代码：

• 首先，要用TagBuilder就要引入System.Web.Mvc类库。
• 接着我们看这个函数的参数，this HtmlHelper helper保证这个方法会被添加到HtmlHelper中，string value对应将来的提交按钮显示的文字，也就是value属性。
• var builder = new TagBuilder("input");使我们创建的标签名字设为input。
• MergeAttribute函数给创建出的元素添加属性，如MergeAttribute("type", "submit") 就是加入 type="submit" 属性。
• TagRenderMode.SelfClosing使生成的标签自我关闭，也就是说有<input />这种形式。
• 最后用MvcHtmlString作为返回值是为了使返回值不被转义，比如"<"不会被转成"&lt"。这是我们不想看到的。

然后我们在View中写入下面代码调用刚才写好的函数：

@Html.Submit("SubmitButton")

生成结果如下：

<input type="submit" value="SubmitButton" />

可以看到我们在函数中所设置的标签名、属性、自包含都做到了。这样我们就成功生成了自创的submit按钮。

如果这里不用TagBuilder也可以，自己去拼html，用TagBuilder更结构化，更高大上不是，但拼好的String别忘了用MvcHtmlString.Create格式化一下，我刚开始写的时候就犯过这样的错误，直接返回string,结果在页面上显示的是标签，而不是控件，然后用在View上用@Html.Raw(..)来解决，很丑陋。

11,强类型的HtmlHelper

各位看观，很抱歉告诉各位，刚才我们学习的HtmlHelper统统都是弱类型的，强类型的HtmlHelper现在闪亮登场，Htmlhelper中几乎每一个弱类型函数都会对应一个强类型函数，它们的对应关系是强类型函数名比弱类型函数名多了一个For。比如TextBox()是一个弱类型函数，那么其对应的强类型函数就是TextBoxFor()。

HtmlHelper之所以可以使用强类型，因为利用了我们的model,view上面@model 你的类

然后在文件中插入如下代码：

@Html.TextBoxFor(m =>m.Name)

这就是我们的强类型HtmlHelper函数的一个例子TextBoxFor。TextBoxFor的这个参数的意思就是取Model的Name属性。由于我们在Controller中初始化了这个值，那么这个值应该是"Name属性的值"。运行结果如下。

<input id="Name" name="Name" type="text" value="Name属性的值" />

由上面结果可以看出，属性的名字Name被赋值给了这个元素的id和name，属性值Name属性的值赋值给了value属性。这样我们就完成了一个简单的强类型HtmlHelper。

12,LabelFor标签

例子中给实体的属性是这样写的:

        [Display(Name = "Name")]
        public string Name { get; set; }

现在生成的代码是这样的:

        [DisplayName("主键")]
        public int Id { get; set; }        

DisplayNameFor生成的是列名，LabelFor生成的是label标签，两都都用到DisplayName

13，DisplayFor与EditorFor

　　　　 [DataType(DataType.EmailAddress)]       
　　　　 public string Email { get; set; }

代码中黄色部分是对Email数据类型的描述。它的数据类型是邮件地址EmailAddress。在View中写下如下代码：

@Html.DisplayFor(m => m.Email)
@Html.EditorFor(m => m.Email)

DisplayFor和EditorFor都将Model的Email属性作为自己的参数。运行结果如下：

对应的代码如下：

<a href="mailto:xxx@163.com">xxx@163.com</a>
<input class="text-box single-line" id="Email" name="Email" type="email" value="xxx@163.com" />

从结果中可以看到由于数据类型是EmailAddress,其在显示数据时就生成了一个发送邮件的超链接。在编辑数据时就生成了一个email专用的输入框<input type="email">。