资源描述
Html的用法.docx
《Html的用法.docx》由会员分享，可在线阅读，更多相关《Html的用法.docx（16页珍藏版）》请在冰豆网上搜索。
Html的用法
1.@Html.ActionLink（Text,ViewName,objectrouteValues）
@Html.ActionLink（Text,ViewName,ControlName）
2.Html.DisplayFor（modelitem=>item.name）
3.Html.Display
4.@Html.Label（）;
在ASP.NETMVC框架中没有了自己的控件，页面显示完全就回到了写html代码的年代。
还好在mvc框架中也有自带的HtmlHelper和UrlHelper两个帮助类。
另外在MvcContrib扩展项目中也有扩展一些帮助类，这样我们就不光只能使用完整的html来编写了需要显示的页面了，就可以使用这些帮助类来完成，但最后运行时都还是要生成html代码的。
先来看看HtmlHelper能帮我们生成一些什么样的html呢。
直接看效果吧。
1.使用HtmlHelper生成超链接:
<%=Html.ActionLink（"我是超链接",""）%>
2.使用HtmlHelper生成表单:
<%Html.BeginForm（"Index","Simple",FormMethod.Post,new{id="myForm"}）;%>
<%Html.EndForm（）;%>
3.使用HtmlHelper根据路由规则生成表单:
<%Html.BeginRouteForm（new{controller="Simple",action="Demo"}）;%>
<%Html.EndForm（）;%>
4.使用HtmlHelper生成一个复选框：
<%=Html.CheckBox（"checkBox",new{id="myCheckBox"}）%>复选框
5.使用HtmlHelper生成上拉列表框:
<%vardropList=newList（）;
for（inti=0;i<5;i++）
{
vardropItem=newSelectListItem（）;
dropItem.Value=i.ToString（）;
dropItem.Text=i.ToString（）;
dropList.Add（dropItem）;
}
%>
<%=Html.DropDownList（"myList",dropList,new{style="width:
100px;"}）%>
6.使用HtmlHelper生成隐藏域:
<%=Html.Hidden（"hidden"）%>
7.使用HtmlHelper生成列表框：
<%varlist=newList（）;
for（vari=0;i<5;i++）
{
varitem=newSelectListItem（）;
item.Value=i.ToString（）;
item.Text=i.ToString（）;
list.Add（item）;
}
%>
<%=Html.ListBox（"listBox",list,new{style="width:
100px;"}）%>
8.使用HtmlHelper生成密码输入框:
<%=Html.Password（"password","longgel"）%>
9.使用HtmlHelper生成单选框:
<%=Html.RadioButton（"radio","boy",true）%>男
<%=Html.RadioButton（"radio","girl",false）%>女
10.使用HtmlHelper生成部分视图（用户控件）：
<%Html.RenderPartial（"PartialView"）;%>
11.使用HtmlHelper根据路由规则生成超链接：
<%=Html.RouteLink（"我是由路由生成的超链接",new{controller="Simple",action="Index"}）%>
12.使用HtmlHelper生成富文本框：
<%=Html.TextArea（"myTxtArea",new{style="width:
300px;height:
100px;"}）%>
13.使用HtmlHelper生成文本框：
<%=Html.TextBox（"myTxtBox","我是文本框"）%>
其实大家可能注意到了，当我们在使用<%%>中有同样都是使用的HtmlHelper中的方法，为什么有的需要加上等号，有的不需要，其实在HtmlHelper中的方法中，只要是返回的是MvcHtmlString类型的方法都需要使用等号将值输出。
在来看看生成的结果吧。
1.使用HtmlHelper生成超链接:
我是超链接
2.使用HtmlHelper生成表单:
3.使用HtmlHelper根据路由规则生成表单:
4.使用HtmlHelper生成一个复选框：
复选框
5.使用HtmlHelper生成上拉列表框:
100px;">0
1
2
3
4
6.使用HtmlHelper生成隐藏域:
7.使用HtmlHelper生成列表框：
100px;">0
1
2
3
4
8.使用HtmlHelper生成密码输入框:
9.使用HtmlHelper生成单选框:
男
女
10.使用HtmlHelper生成部分视图（用户控件）：
Red">Hi，我是部分视图（用户控件）
11.使用HtmlHelper根据路由规则生成超链接：
我是由路由生成的超链接
12.使用HtmlHelper生成富文本框：
300px;height:
100px;">
13.使用HtmlHelper生成文本框：
另外HtmlHelper中还有ValidationMessage（）和ValidationSummary（）等方法，下次学到验证的时候一起写出来。
^_^
在写一个编辑数据的页面时，我们通常会写如下代码
由前篇我们所讲的Helper演化，我们思考，对于这种代码我们是不是也可以用一个Helper来自动绑定数据呢
这当然是可以的，ASP.NETMVC提供了一个HtmlHelper用于生成有数据绑定的Html标签。
1.ActionLink其中最常用的就是Html.ActionLink
（1）.ActionLink（stringlinkText,stringactionName）
//页面显示linkText指向Global.asax.cs中默认的Controller对象的actionName方法
（2）.ActionLink（stringlinkText,stringactionName,stringcontrollerName）
//页面显示linkText指向controllerName对应的Controller的actionName方法
（3）.ActionLink（stringlinkText,stringactionName,objectroutues,objecthtmlAttributes）
//页面显示linkText指向Global.asax.cs中默认的Controller对象的actionName方法,并且传递参数给action方法（以匿名类型的名称/值对的方式来实现），并设置页面链接的属性htmlAttributes。
1.1基本的使用方式
在UrlRouting规则为默认规则的情况下，它生成的HTML代码为
1:
这是一个连接
ActionLink中的三个参数分别为
显示的文字
Action
Controller
其中Controller可以省略，省略时指向同一Controller下的Action。
1.2ActionLink中QueryString与Html属性设置
1:
带有QueryString的写法
2:
<%=Html.ActionLink（"这是一个连接","Index","Home",new{page=1},null）%>
3:
<%=Html.ActionLink（"这是一个连接","Index",new{page=1}）%>
4:
有其它Html属性的写法
5:
<%=Html.ActionLink（"这是一个连接","Index","Home",new{id="link1"}）%>
6:
<%=Html.ActionLink（"这是一个连接","Index",null,new{id="link1"}）%>
7:
QueryString与Html属性同时存在
8:
<%=Html.ActionLink（"这是一个连接","Index","Home",new{page=1},new{id="link1"}）%>
9:
<%=Html.ActionLink（"这是一个连接","Index",new{page=1},new{id="link1"}）%>
其生成结果为：
1:
带有QueryString的写法
2:
page=1">这是一个连接
3:
page=1">这是一个连接
4:
有其它Html属性的写法
5:
Length=4"id="link1">这是一个连接
6:
这是一个连接
7:
QueryString与Html属性同时存在
8:
page=1"id="link1">这是一个连接
9:
page=1"id="link1">这是一个连接
这样就可以使用ActionLink生成近乎所有的地址连接了。
注意，如果连接中不涉及到action及controller就没有必要使用ActionLink,而是直接写HTML代码就可以了，例如
1:
一章
2:
void（0）"onclick="delete（）;">删除
2.RouteLink
2.1与ActionLink
RouteLink与ActionLink相差无几，只是它的地址是由Route生成拿上面的例子
1:
<%=Html.ActionLink（"这是一个连接","Index","Home"）%>
来说，如果用RouteLink来写就是
1:
<%=Html.RouteLink（"这是一个连接",new{controller="Home",action="Index"}）%>
而带上QueryString以及Html属性的ActionLink
1:
<%=Html.ActionLink（"这是一个连接","Index",new{page=1},new{id="link1"}）%>
就可以这样来写
其实就是用一个新建立的RoutueDictionary的对象（new{}所实例化的对象将会等价转换为RoutueDictionary）来替原来的Action,Controller字符串的单独指定。
2.2RouteLink使用Route规则
除了这些协同的用法，RouteLink还支持使用Route规则名来创建连接
例如我们在Global.asax文件中添加一个Route规则
1:
routes.MapRoute（
2:
"about",//这是规则名
3:
"about",//url
4:
new{controller="Home",action="about"}
5:
）;
那么我们就可以使用这个Route规则
1:
<%=Html.RouteLink（"关于","about",new{}）%>
2:
<%=Html.RouteLink（"关于","about",new{page=1}）%>
3:
<%=Html.RouteLink（"关于","about",new{page=1},new{id="link1"}）%>
来生成如下的HTML：
1:
关于
2:
page=1">关于
3:
page=1"id="link1">关于
3.表单很多情况下是要生成表单元素的，正如文章开始所述，修改一个内容的情况下，我们可能要将数据与表单绑定。
3.1生成Form
我们当然可以使用纯的Html代码或UrlHelper来生成一个Form。
如
但是因为是在HTML的属性中，所以还是难以维护，幸好ASP.NETMVC为我们提供了一个Helper，我们可以通过以下两种方式生成一个Form：
1:
<%using（Html.BeginForm（"index","home",FormMethod.Post））{%>
2:
表单内容
3:
<%}%>
4:
<%Html.BeginForm（"index","home",FormMethod.Post）;//注意这里没有=输出%>
5:
表单内容
6:
<%Html.EndForm（）;%>
BeginForm方法类似于ActionLink的调用方式，所以ASP.NETMVC还提供了BeginRouteForm这种方法。
当然这里我们也可以使用new{}来为form的action增加querystring或HTML属性，方法与前面介绍的大同小异，参见方法列表即可。
3.2表单元素
ASP.NETMVC提供了多种表单元素的Helper。
其中包括：
TextBox（类似inputtype=text，下面类似）、TextArea、DropDownList（select）、CheckBoxHidden、ListBox、Password、RadionButton。
注意：
因为一般情况下是不会绑定数据的所以ASP.NETMVC并未提供此Helper（曾经提供过在preview2之前）。
如果我们想提供一个inputtype=text它的name为t1则以下代码：
1:
<%=Html.TextBox（"t1"）%>
3.3表单元素绑定如果我们想要让上文中的t1初始时就有一个值，比如“重典”那么我们可以按以下方式
1:
<%=Html.TextBox（"t1","重典"）%>
如果数据是从数据库中读取，即得到数据是从Action中获取的，那么我们可以在Action中使用ViewData传递
Action:
1:
ViewData["name"]="重典";
View：
1:
<%=Html.TextBox（"t1",ViewData["name"]）%>
以上方法看似简单，其实ASP.NETMVC为我们提供了更为简便的绑定方式---只要保证ViewData的Key与Helper所生成元素的name保持一致就可以自动绑定：
Action：
1:
ViewData["t1"]="重典";
View:
1:
<%=Html.TextBox（"t1"）%>
这样就可以自动绑定了
3.4列表数据显示与绑定
像TextBox这种值单一的数据比较容易，但是存在的数据比较多的DropDownList或ListBox应该怎么绑定数据及初始化值呢，我们来看看下面的例子：
Action：
1:
ViewData["sel1"]=newSelectList（
2:
new[]{1,2,3}
3:
3
4:
）;
View：
1:
<%=Html.DropDownList（"sel1"）%>
这样就可以将列表内容、默认值、以及表单元素三者绑定在一起了。
而我们的列表内容并不是任何情况下都是数组的，大多情况下还是Key-Value对居多。
我们可以使用以下方式：
1:
Listlist=newList
2:
{
3:
newSelectListItem{Text="重典",Value="1"},
4:
newSelectListItem{Text="邹健",Value="2"},
5:
};
6:
ViewData["sel1"]=newSelectList（
7:
list
8:
"2"
9:
）;
HTML扩展类的所有方法都有2个参数：
以textbox为例子
publicstaticstringTextBox（thisHtmlHelperhtmlHelper,stringname,Objectvalue,IDictionaryhtmlAttributes）
publicstaticstringTextBox（thisHtmlHelperhtmlHelper,stringname,Objectvalue,ObjecthtmlAttributes）
这2个参数代表这个html标签的属性集合。
使用方法如下。
1.ActionLink
<%=Html.ActionLink（"这是一个连接","Index","Home"）%>
带有QueryString的写法
<%=Html.ActionLink（"这是一个连接","Index","Home",new{page=1},null）%>
<%=Html.ActionLink（"这是一个连接","Index",new{page=1}）%>
有其它Html属性的写法
<%=Html.ActionLink（"这是一个连接","Index","Home",new{id="link1"}）%>
<%=Html.ActionLink（"这是一个连接","Index",null,new{id="link1"}）%>
QueryString与Html属性同时存在
<%=Html.ActionLink（"这是一个连接","Index","Home",new{page=1},new{id="link1"}）%>
<%=Html.ActionLink（"这是一个连接","Index",new{page=1},new{id="link1"}）%>
生成结果为：
这是一个连接
带有QueryString的写法
page=1">这是一个连接
page=1">这是一个连接
有其它Html属性的写法
Length=4"id="link1">这是一个连接
这是一个连接
QueryString与Html属性同时存在
page=1"id="link1">这是一个连接
page=1"id="link1">这是一个连接
2.RouteLink
跟ActionLink在功能上一样。
<%=Html.RouteLink（"关于","ab
升级会员 