HtmlHelper用法大全(上)
目录:
- HtmlHelper简介
- 准备工作
- 链接
- ActionLink链接
- RouteLink链接
- input控件
- TextBox输入框
- Hidden隐藏域
- Password密码输入框
- CheckBox勾选框
- RadioButton单选按钮
- 列表框
- DropDownList下拉菜单
- ListBox多选框
- 添加属性
- 结尾
HtmlHelper简介
在ASP.NET MVC5的View页面中,HtmlHelper被用来输出HTML代码。更官方点的描述,System.Web.Mvc.HtmlHelper对象,该对象用于呈现HTML元素。如下图所示。
HtmlHelper中的每一个函数都对应生成一种标签,后面会逐一详细介绍给大家。
很多人会问为什么要用HtmlHelper而不直接写html?
我觉得有下面几个原因:
- 直接写HTML的话如果语句有语法错误,如缺少结尾标记</b>,编译器不会报错,出来的页面可能会很乱且难以查出错误在哪。如果用HtmlHelper在编译的时候就会指出错误,可以及时修改。
- View中的页面一般都是动态页面,也就是说如果没有HtmlHelper,我们经常会写如<input type="text" value="@id">这样的服务器端代码和HTML代码的混合代码。这样写不仅形式混乱、执行顺序不好判断,而且出错也不容易发现,不如全部用HtmlHelper写成服务器端代码。而且用HtmlHelper做数据绑定更方便。
- HtmlHelper和HTML语言的关系,我觉得跟Linq和SQL语言的关系差不多。就是说微软给你提供了一种方式让你在不熟悉HTML或SQL这种非.NET语言的时候,使用.NET框架内的与之等价的类来帮助你更好的解决问题。
准备工作
为了更好的演示HtmlHelper,我们在项目中新建一个默认Controller和默认Action。
在解决方案资源管理器中右键点击Controllers文件夹选择添加->控制器。在弹出的窗口中选择MVC 5 控制器 - 空,点确定。输入默认控制器名,DefaultControllerController。将下面代码写入DefaultControllerController.cs文件。
using System.Web.Mvc;namespace SlarkInc.Controllers {public class DefaultControllerController : Controller{//// GET: /DefaultController/public ActionResult DefaultAction(){return View();}} }
从上面代码可以看出在名为DefaultController的Controller中我们创建了一个名为DefaultAction的的Action。
然后我们来创建对应的View。在Views文件夹下的DefaultController文件夹里删除已有的View添加一个名为DefaultAction的View。打开这个DefaultAction.cshtml文件,删除掉所有代码。这样我们的准备工作就完成了。下面开始添加HtmlHelper代码。
链接
ActionLink
ActionLink用来生成HTML中的<a>标签,在页面中生成一个超链接下面给出ActionLink的三个常用重载:
@Html.ActionLink("LinkText", "ActionName") @Html.ActionLink("LinkText", "ActionName", "ControllerName") @Html.ActionLink("LinkText", "ActionName", new { id = 1 })
点击在浏览器中查看。运行结果:
<a href="/DefaultController/ActionName">LinkText</a> <a href="/ControllerName/ActionName">LinkText</a> <a href="/DefaultController/ActionName/1">LinkText</a>
LinkText是链接显示出的文字,如果ActionLink的参数中给出Controller则链接指向对应的Controller下的Action。如果没有给出Controller则指向当前页面对应的Controller下的Action。如果ActionLink的参数中给出要传递的参数,如id,则在链接的最后写出id值。
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属性则为要传递的参数。
Input控件
TextBox
TextBox用来生成HTML中的<input type="text">标签,常用重载有下面两种:
@Html.TextBox("NameId") @Html.TextBox("NameId","Value")
生成标签如下:
<input id="NameId" name="NameId" type="text" value="" /> <input id="NameId" name="NameId" type="text" value="Value" />
可见TextBox的第一个参数被赋值给input标签的id和name属性,如果没有value参数则value为空,如果有则赋值给value属性。
Hidden
Hidden用来在页面中写入<input type="hidden">标签,其用法和TextBox类似。代码如下:
@Html.Hidden("NameId") @Html.Hidden("NameId", "Value")
结果如下:
<input id="NameId" name="NameId" type="hidden" value="" /> <input id="NameId" name="NameId" type="hidden" value="Value" />
Password
Password用来写入<input type="password">标签,其用法和TextBox类似。代码如下:
@Html.Password("NameId") @Html.Password("NameId", "Value")
结果如下:
<input id="NameId" name="NameId" type="password" value="" /> <input id="NameId" name="NameId" type="password" value="Value" />
CheckBox
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的值过去。
RadioButton
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参数可以设置。
列表框
DropDownList
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("Id", 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,并且第二个选项被选中。
ListBox
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>
添加属性
例如想给一个标签添加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" />
上面黄色标记部分即为添加的属性。其实你可以以同样的方式添加任意的属性名和属性值,都会生效。
HtmlHelper用法大全(上)相关推荐
- MVC5 + EF6 + Bootstrap3 (9) HtmlHelper用法大全(下)
MVC5 + EF6 + Bootstrap3 (9) HtmlHelper用法大全(下) 上一节:MVC5 + EF6 + Bootstrap3 (8) HtmlHelper用法大全(上) 下一节: ...
- MVC中HtmlHelper用法大全
MVC中HtmlHelper用法大全参考 解析MVC中HtmlHelper控件7个大类中各个控件的主要使用方法(1) 2012-02-27 16:25 HtmlHelper类在命令System.Web ...
- C# ASP.NET MVC HtmlHelper用法大全
C# ASP.NET MVC HtmlHelper用法大全 (原文) HTML扩展类的所有方法都有2个参数: 以textbox为例子 public static string TextBox( thi ...
- MVC HtmlHelper用法大全
http://www.cnblogs.com/jyan/archive/2012/07/23/2604474.html HtmlHelper用来在视图中呈现 HTML 控件. 以下列表显示了当前可用的 ...
- 史上最全面的 ADB命令 及用法 大全
史上最全面的 ADB命令 及用法 大全 ADB Usage Complete / ADB 用法大全 https://mazhuang.org/awesome-adb/ ADB,即 Android De ...
- c3p0 参数 模糊查询_MySQL模糊查询用法大全(正则、通配符、内置函数等)
文章来源:MySQL模糊查询用法大全(正则.通配符.内置函数等) 原文作者:陈哈哈 来源平台:CSDN SELECT * from table where username like '%陈哈哈%' ...
- MySQL中show命令用法大全
MySQL中show命令用法大全 官方文档:https://dev.mysql.com/doc/refman/5.6/en/show.html https://dev.mysql.com/doc/re ...
- Metasploit用法大全
Metasploit用法大全 Metasploit用户接口 msfconsole Armitage: KaliGUI启动:armitage命令启动 Metasploit功能程序 msfvenom 集 ...
- 【ADB 操作命令详解及用法大全(非常全)】
ADB操作命令详解及用法大全 一.ADB是什么? ADB,即 Android Debug Bridge 是一种允许模拟器或已连接的 Android 设备进行通信的命令行工具,它可为各种设备操作提供 ...
- C++——CString用法大全
VC:CString用法大全 列表形式的如下: CString的构造函数 CString( ); 例:CString csStr; CString( const CString& string ...
最新文章
- python编辑用户登录界面_python编辑用户登入界面的实现代码
- pandas.DataFrame的pivot()和unstack()实现行转列
- 如果看了这篇文章你还不懂傅里叶变换,那就过来掐死我吧(下)
- 深度学习声纹识别_kaldi/语音识别ASR/声纹识别SRE/资源汇总
- 搭建完全分布式的hadoop[转]
- 自己使用过比较好用的VSCode插件
- [项目总结-原创]InternetRadio项目Ajax技术方案选型
- 用命令行netsh修改windows的ip、网关、dns
- tlwn726n无线网卡Linux驱动,tl-wn726n网卡驱动win10-tl-wn726n无线网卡驱动下载 v1.0官方免费版--pc6下载站...
- PL/0语言 语义分析及中间代码生成
- 筋膜枪有感电机和无感电机是什么意思?如何区别
- LTE帧结构----符号长度
- 误操作rm -rf /*之后该如何挽救,除了跑路还能怎么办
- cm-14.1 Android系统启动过程分析(8)-应用程序进程启动过程
- 在win10中安装xp虚拟机的教程--win10专业版
- 移动客户端触屏滑动事件
- 华为、微软、瑞幸、维达、奈飞、爱彼迎等公司高管变动
- 中国宗教活动场所数据库(数据+python代码)
- ScriptManager.RegisterStartupScript用法详解
- 设计的BOOST的详细流程(亲手设计的BOOST电路的详细解释)
热门文章
- 计算机配置音箱便宜,电脑音箱买什么价位的好 六款适合不同群体的音箱推荐...
- 安装CentOS7.6
- ftm模块linux驱动,飞思卡尔K60 FTM模块详解【二】
- ajax怎么会突然出现401,当jquery ajax遇上401请求
- linux报错ora12514,ORA-12514:RMAN连接报错解决
- 2019-01-01T00:00:00.000Z 这种时间日期类型格式是属于:格林尼治时间
- 四次挥手为什么要等2个MSL,而不是1个MSL
- TE TM TEM模的区别
- inputbox使用
- mysql事务应该多复杂_可能是全网最好的MySQL重要知识点/面试题总结