ASP.NET MVC- HtmlHelper的用法
在ASP.NET MVC框架中没有了自己的控件,页面显示完全就回到了写html代码的年代。还好在asp.net mvc框架中也有自带的HtmlHelper和UrlHelper两个帮助类。另外在MvcContrib扩展项目中也有扩展一些帮助类,这样我们就不光只能使用完整的html来编写了需要显示的页面了,就可以使用这些帮助类来完成。
1.ActionLink
<div>
@Html.ActionLink("这是一个测试", "Other", "Home"); 带有QueryString的写法
@Html.ActionLink("这是一个测试", "Other", "Home", new { page = 1 });
@Html.ActionLink("这是一个测试", "Other", "Home", new { page = 1 }, null); QueryString与Html属性同时存在
@Html.ActionLink("这是一个测试", "Other", "Home", new { page = 1 }, new { id = "link1" })
@Html.ActionLink("这是一个测试", "Other", new { page = 1 }, new { id = "link1" }) 实际用途(弹出新窗口)
@Html.ActionLink("这是一个测试", "Other", "Home", new { page = 1 }, new { target = "_blank" });
</div>
生成结果:
<div>
<a href="/Home/Other">这是一个测试</a>; 带有QueryString的写法
<a href="/Home/Other?Length=4" page="1">这是一个测试</a>;
<a href="/Home/Other?page=1">这是一个测试</a>; QueryString与Html属性同时存在
<a href="/Home/Other?page=1" id="link1">这是一个测试</a>
<a href="/Home/Other?page=1" id="link1">这是一个测试</a> 实际用途(弹出新窗口)
<a href="/Home/Other?page=1" target="_blank">这是一个测试</a>;
</div>
2.RouteLink 跟ActionLink功能一样
<%=Html.RouteLink("关于", "about", new { })%>
带QueryString
<%=Html.RouteLink("关于", "about", new { page = 1 })%>
<%=Html.RouteLink("关于", "about", new { page = 1 }, new { id = "link1" })%> 生成结果:
<a href="/about">关于</a>
<a href="/about?page=1">关于</a>
<a href="/about?page=1" id="link1">关于</a>
3.Form表单
<div>
@using (Html.BeginForm("Other", "Home", FormMethod.Post, new { id = "myForm" }))
{ }
</div>
生成结果:
<div>
<form action="/Home/Other" id="myForm" method="post"></form>
</div>
4.TextBox和TextBoxFor
TextBox和TextBox的不同是,TextBoxFor里面可以存放Model的字段值,而TextBox不可以
<div>
@Html.TextBox("txtName", "ChenChunXiao", new { style = "width:300px" })
@Html.TextBoxFor(a => a.CategoryName, new { @style = "width:300px;" })
</div> 生成结果
<input id="txtName" name="txtName" style="width:300px" type="text" value="ChenChunXiao" />
<input id="CategoryName" name="CategoryName" style="width:300px;" type="text" value="Beverages" />
5.TextArea和TextAreaFor
@Html.TextArea("input5", Model.CategoryName, 3, 9,null)
@Html.TextAreaFor(a => a.CategoryName, 3, 3, null) 生成结果:
<textarea cols="9" id="input5" name="input5" rows="3">Beverages</textarea>
<textarea cols="3" id="CategoryName" name="CategoryName" rows="3">Beverages</textarea>
6、CheckBox和CheckBoxFor (除了生成CHEKCBOX的HTML还会生成HIDDEN的HTML)
@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" />
7、ListBox
<div>
@{
List<SelectListItem> dropList = new List<SelectListItem>();
for (int i = ; i < ; i++)
{
var dropItem = new SelectListItem();
dropItem.Value = i.ToString();
dropItem.Text = i.ToString();
dropList.Add(dropItem);
}
}
@Html.DropDownList("myList", dropList, "请选择")
</div> 生成代码
<select id="myList" name="myList">
<option value="">请选择</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
二、扩展方法
采用这样的方式,我们通常需要新建一个文件夹,专门存放我们自定义的辅助方法(很多时候,我们自定义的辅助方法可能很多,但像是Controller,Models这样的文件夹并不适合存放这些方法),其实也就是专门为辅助方法建立一个新的命名空间。
我在自己的包里建下这个扩展方法:
namespace Package.Utility
{
public static class Tool
{
public static string Truncate(this HtmlHelper helper, string input, int length)
{
if (input.Length <= length)
{
return input;
}
else
{
return input.Substring(, length) + "...";
}
}
}
}
然后我在View视图里,先引用这个命名空间后,就可以直接使用该HTMLHELPER的扩展方法了。
@using Package.Utility
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Test</title>
</head>
<body>
<div>
@Html.Truncate("myHelper", 3)
</div>
</body>
</html>
三、Helper扩展方法的使用
直接看一下代码例子
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
@helper ShowHelloWorld(string str)
{
<div>@str</div>
}
<div>
@ShowHelloWorld("Hello World CCx")
</div>
</body>
</html>
参考文章
常用的 http://www.cnblogs.com/fishtreeyu/archive/2011/03/23/1992498.html
http://www.cnblogs.com/longgel/archive/2010/02/03/1662894.html
扩展的 http://www.cnblogs.com/wenjiang/archive/2013/03/30/2990854.html
ASP.NET MVC- HtmlHelper的用法的更多相关文章
- ASP.NET MVC HtmlHelper用法集锦
ASP.NET MVC HtmlHelper用法集锦 在写一个编辑数据的页面时,我们通常会写如下代码 1:<inputtype="text"value='<%=View ...
- 扩展ASP.NET MVC HtmlHelper类
在这篇帖子中我会使用一个示例演示扩展ASP.NET MVC HtmlHelper类,让它们可以在你的MVC视图中工作.这个示例中我会提供一个简单的方案生成Html表格. HtmlHelper类 Htm ...
- asp.net mvc htmlHelper
ASP.NET MVC 3.0 HTML辅助方法 HTML辅助方法(html helper)是用来帮助生成HTML的方法. 1.HTML辅助方法应用实例 ◊ 生成form元素 @using (Ht ...
- ASP .NET MVC HtmlHelper扩展——简化“列表控件”的绑定
在众多表单元素中,有一类<select>元素用于绑定一组预定义列表.传统的ASP.NET Web Form中,它对应着一组重要的控件类型,即ListControl,我们经常用到DropDo ...
- ASP.NET MVC HtmlHelper 类的扩展方法
再ASP.NET MVC编程中用到了R语法,在View页面编辑HTML标签的时候,ASP.NET MVC 为我们准备好了可以辅助我们写这些标签的办法,它们就是HtmlHelper.微软官方地址是:ht ...
- [转]ASP.NET MVC HtmlHelper扩展之Calendar日期时间选择
本文转自:http://blog.bossma.cn/asp_net_mvc/asp-net-mvc-htmlhelper-calendar-datetime-select/ 这里我们扩展HtmlHe ...
- asp.net MVC过滤器的用法(转)
转自:http://www.studyofnet.com/news/257.html APS.NET MVC中的每一个请求,都会分配给相应的控制器和对应的行为方法去处理,而在这些处理的前前后后如果想再 ...
- C# ASP.NET MVC HtmlHelper用法大全
UrlHrlper 下面的两个地址一样的功能 下边这个防止路由规则改变 比如UserInfo/Index改为UserInfo-Index,使用下面的不受影响 另一种形式的超链接: <%: Htm ...
- ASP.NET MVC HtmlHelper用法大全
HTML扩展类的所有方法都有2个参数: 以textbox为例子public static string TextBox( this HtmlHelper htmlHelper, string name ...
- 【MVC】ASP.NET MVC HtmlHelper用法大全
1.ActionLink <%=Html.ActionLink("这是一个连接", "Index", "Home")%> 带 ...
随机推荐
- Linux C double linked for any data type
/************************************************************************** * Linux C double linked ...
- SAS使用SPD引擎并报Encoding错误
ERROR: Unable to open data file because its file encoding differs from the SAS session encoding and ...
- AsyncTask类
1.定义 异步任务类,在类中实现异步操作,并提供回调方法反馈当前异步执行的程度,最后反馈 的结果提供给UI主线程. <1>Android线程 ...
- JBPM4之decision节点:1、好学生 | 坏学生
JBPM入门系列文章: JBPM4入门——1.jbpm简要介绍 JBPM4入门——2.在eclipse中安装绘制jbpm流程图的插件 JBPM4入门——3.JBPM4开发环境的搭建 JBPM4入门—— ...
- hdu 5253 最小生成树
赤裸裸最小生成树,没啥说的,我用kruskal过的 /* * Author : ben */ #include <cstdio> #include <cstdlib> #inc ...
- js保留小数点后N位的方法介绍
js保留小数点后N位的方法介绍 利用toFixed函数 代码如下 复制代码 <script language="javascript"> document.write( ...
- CAD操作
1.建立构造线 说签名和图签不在同一条直线上,如何判断两个对向到底是不是在一条线上呢?通过构造线( Construction Line)可以进行判断,CAD中打入: xl 命令,再键入h(horizo ...
- (转载)OC学习篇之---代理模式
在前一篇文章我们介绍了OC中的协议的概念,这篇文章我们就来介绍一下OC中的代理模式,关于代理模式,如果还有同学不太清楚的话,就自己去补充知识了,这里就不做介绍了,这里只介绍OC中是如何实现代理模式的. ...
- 用js完成blog项目
//前台调用 var $ = function (args) { return new Base(args); } //基础库 function Base(args) { //创建一个数组,来保存获取 ...
- GitHub--git push出错解决
当使用GitHub进行代码push是,出现了下面的错误,该如何是好? 错误描述: ! [rejected] master -> master (non-fast-forward)e ...