MVC学习系列-HtmlHelper分析以及实例演示

在继续MVC的学习之前我们需要明白很重要的一点：MVC中不允许再使用服务器端控件了。也就是说不能再像WebForm时代，拖拉一个服务器控件，双击该控件就能添加后台响应代码的操作了（如果还能这样操作，岂不是又回到了WebForm时代？）。

那么，我们又该如何定义并操作控件呢？

微软为我们提供了两种方式：

（1）类似于WebForm时代的拖拉控件，但是这里的控件绝不是服务器控件

（2）使用页面的Html属性进行控件的动态添加

关于第一种方式我想就没有介绍的必要了吧，今天我们着重学习第二种方式。

1.HtmlHelper

在开始之前，我们先来看一下页面的Html属性。



上面的代码截图为大家标注出来了页面的几个重要的属性：ViewData、ViewBag、Url、Model、Html等属性，今天我们主要学习的是Html属性，其他属性的学习可以参考我其他的学习系列文章。

在这里我们看到Html属性的类型为HtmlHelper，那么这个HtmlHelper又是个什么类型呢？



从上面的类定义中我们看到，HtmlHelper类只是一个普通的类，它主要是微软定义用来帮助我们生成标签的类。

我们经常在页面中通过Html点出各种方法，可你有没有仔细想过原因呢？



看到上面的代码截图了吗？看懂扩展名那三个字了吗？看到下面的注释了吗？

HtmlHelper帮助我们开发人员创建控件的核心就是使用了扩展方法。

本来还想查找源码看在哪个静态类中对HtmlHelper类进行扩展的，无奈找不到，再次感觉到微软很不给力。

我们可以自己创建帮助器，也可以使用微软为我们封装好的，下面为大家讲解一下微软自带的HTML帮助器

2.实例演示

帮助器函数有多个重载，具体使用哪一个根据需要选用，在此只列出简单的几个

首先介绍一下对应于两种视图引擎HTML帮助器的两种写法：

<%:Html.ActionLink()%>

@Html.ActionLink()

ActionLink -
链接到操作方法

        <%:Html.ActionLink("添加", "Index", "User")%>>
        <%:Html.ActionLink("修改", "Index", "User", new { page = 1 }, null)%>>
        <%:Html.ActionLink("删除", "Index", new { page = 1 })%>>
        <%:Html.ActionLink("查询", "Index", "User", new { id = "link1" })%>>
        <%:Html.ActionLink("链接", "Index", null, new { id = "link1" })%>>
        <%:Html.ActionLink("跳转", "Index", "User", new { page = 1 }, new { id = "link1" })%>>

调试运行时生成的代码如下所示：

<a href="/">添加</a>
<a href="/?page=1">>修改</a>
<a href="/?page=1">删除</a>
<a href="/?Length=4" id="link1">查询</a>
<a href="/" id="link1">链接</a>
<a href="/?page=1" id="link1">跳转</a>

BeginForm -
开始表单元素的提交

EndForm -
结束表单元素的提交

@using(Html.BeginForm("Index","User",FormMethod.Post)){
}
@Html.BeginForm("Index", "User", FormMethod.Post)
@Html.EndForm()

调试运行时生成的代码如下所示：

<form action="/User/Index" method="post"></form>

CheckBox -
呈现复选框

Hidden -
在窗体中嵌入未呈现的信息以供用户查看

@Html.CheckBox("chk1",true)
@Html.CheckBox("chk1", new { @class="checkBox"})
@Html.CheckBoxFor(a =>a.IsVaild, new { @class = "checkBox" })

调试运行时生成的代码如下所示：

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

<input class="checkBox" id="chk1" name="chk1" type="checkbox" value="true" /><input name="chk1" type="hidden" value="false" />

<input checked="checked" class="checkBox" id="IsVaild" name="IsVaild" type="checkbox" value="true" /><input name="IsVaild" type="hidden" value="false" />

ListBox -
呈现列表框

<%:Html.ListBox("lstBox1", (SelectList)ViewData["type"])%>>

调试运行时生成的代码如下所示：

<select id="lstBox1" multiple="multiple" name="lstBox1">
<option value="1">Teacher</option>
<option value="2">Studnet</option>
<option selected="selected" value="3">Master</option>
<option value="4">Manager</option>
</select>

TextArea -
呈现文本区域（多行文本框）

<%:Html.TextArea("input5", Model.UserInfo, 3, 9,null)%>
<%:Html.TextAreaFor(a => a.UserInfo, 3, 3, null)%>

调试运行时生成的代码如下所示：

<textarea cols="9" id="input5" name="input5" rows="3">Beverages</textarea>
<textarea cols="3" id="UserInfo" name="UserInfo" rows="3">Beverages</textarea>

在使用TextArea这个帮助器时一定要注意不能使用动态获取后台数据（貌似是不支持）

<%:Html.TextArea("input5",ViewData["Ssex"],3,9,new {id="link2"})%>>

例如写成上面的形式会给出提示：HtmlHelper<dynamic>不包含"TextArea"的定义

TextBox -
呈现文本框

<%:Html.TextBox("txtName") %>>
<%:Html.TextBox("txtSex", ViewData["Ssex"], new{style = "width:300px;" })%>>
<%:Html.TextBox("txtSex", ViewData["Ssex"])%>>

调试运行时生成的代码如下所示：

<input id="txtName" name="txtName" type="text" value="">
<input id="txtSex" name="txtSex" style="width:300px;" type="text" value="">
<input id="txtSex" name="txtSex" type="text" value="">

Password -
呈现用于输入密码的文本框

RadioButton -
呈现单选按钮

DropDownList -
呈现下拉列表
剩下的几种在此不再讲述，具体可参考MSDN:https://msdn.microsoft.com/en-us/library/system.web.mvc.htmlhelper(v=vs.118).aspx

上面列举的都是微软帮我们封装好的扩展方法，当然我们还可以进行自己HtmlHelper方法的扩展。

下面的系列学习文章我会动手做一个分页的方法扩展，加深HtmlHelper扩展方法的使用，欢迎阅读、共同学习。

由于本人也是初学MVC，对上面的理解可能有不对之处，如果想看权威建议MSDN:https://msdn.microsoft.com/en-us/library/system.web.mvc.htmlhelper(v=vs.118).aspx

MVC学习系列-了解Url的路由规则

MVC学习系列-表单的异步提交

MVC学习系列-表单数据提交

MVC学习系列-ViewData与ViewBag

MVC学习系列-表单数据的校验