MVC5 + EF6 + Bootstrap3 (8) HtmlHelper用法大全(上)

<a href="#HtmlHelper">HtmlHelper简介</a>

<a href="#prepare">准备工作</a>

<a href="#link">链接</a>

<a href="#AL">ActionLink链接</a>

<a href="#RL">RouteLink链接</a>

<a href="#I">input控件</a>

<a href="#TB">TextBox输入框</a>

<a href="#H">Hidden隐藏域</a>

<a href="#P">Password密码输入框</a>

<a href="#C">CheckBox勾选框</a>

<a href="#RB">RadioButton单选按钮</a>

<a href="#S">列表框</a>

<a href="#LB">ListBox多选框</a>

<a href="#A">添加属性</a>

<a href="#F">结尾</a>

在ASP.NET MVC5的View页面中，HtmlHelper被用来输出HTML代码。更官方点的描述，System.Web.Mvc.HtmlHelper对象，该对象用于呈现HTML元素。如下图所示。

HtmlHelper中的每一个函数都对应生成一种标签，后面会逐一详细介绍给大家。

很多人会问为什么要用HtmlHelper而不直接写html？

我觉得有下面几个原因：

直接写HTML的话如果语句有语法错误，如缺少结尾标记&lt;/b&gt;，编译器不会报错，出来的页面可能会很乱且难以查出错误在哪。如果用HtmlHelper在编译的时候就会指出错误，可以及时修改。

View中的页面一般都是动态页面，也就是说如果没有HtmlHelper，我们经常会写如&lt;input type="text" value="@id"&gt;这样的服务器端代码和HTML代码的混合代码。这样写不仅形式混乱、执行顺序不好判断，而且出错也不容易发现，不如全部用HtmlHelper写成服务器端代码。而且用HtmlHelper做数据绑定更方便。

HtmlHelper和HTML语言的关系，我觉得跟Linq和SQL语言的关系差不多。就是说微软给你提供了一种方式让你在不熟悉HTML或SQL这种非.NET语言的时候，使用.NET框架内的与之等价的类来帮助你更好的解决问题。

为了更好的演示HtmlHelper，我们在项目中新建一个默认Controller和默认Action。

在解决方案资源管理器中右键点击Controllers文件夹选择添加-&gt;控制器。在弹出的窗口中选择MVC 5 控制器 - 空，点确定。输入默认控制器名，DefaultControllerController。将下面代码写入DefaultControllerController.cs文件。

从上面代码可以看出在名为DefaultController的Controller中我们创建了一个名为DefaultAction的的Action。

然后我们来创建对应的View。在Views文件夹下的DefaultController文件夹里删除已有的View添加一个名为DefaultAction的View。打开这个DefaultAction.cshtml文件，删除掉所有代码。这样我们的准备工作就完成了。下面开始添加HtmlHelper代码。

ActionLink用来生成HTML中的&lt;a&gt;标签，在页面中生成一个超链接下面给出ActionLink的三个常用重载：

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

LinkText是链接显示出的文字，如果ActionLink的参数中给出Controller则链接指向对应的Controller下的Action。如果没有给出Controller则指向当前页面对应的Controller下的Action。如果ActionLink的参数中给出要传递的参数，如id，则在链接的最后写出id值。

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

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

TextBox用来生成HTML中的&lt;input type="text"&gt;标签，常用重载有下面两种：

生成标签如下：

可见TextBox的第一个参数被赋值给input标签的id和name属性，如果没有value参数则value为空，如果有则赋值给value属性。

Hidden用来在页面中写入&lt;input type="hidden"&gt;标签，其用法和TextBox类似。代码如下：

结果如下：

Password用来写入&lt;input type="password"&gt;标签，其用法和TextBox类似。代码如下：

CheckBox这个函数比较特殊，先看代码和运行结果：

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

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

RadioButton会生成一个&lt;input type="radio"&gt;标签，代码如下：

生成代码如下：

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

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

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

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

生成的结果如下：

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

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

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

得到结果如下：

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

这个主题未完待续，由于小弟实在精力有限，且写作时字斟句酌、精心选例、深入分析、亲自实践，希望大家谅解。

喜欢的话就点个赞吧，或者哪里有疑问留言讨论讨论。