ASP.NET MVC HtmlHelper类

ASP.NET MVC之 HtmlHelper

在ASP.NET MVC项目的开发中,一般会默认使用Razor视图来进行View层的编写,从而实现高效率的C#/HTML代码的混写。

示例

诸如下述代码:

<input name="UserName" type="text" value="@ViewData["UserName"] " />

如图会自动对ViewBag的键值进行匹配并生成对应的HTML代码。然而在实际的编写中这样仍旧不太方便,于是这里便可以用到VS为我们默认集成好的HtmlHelper。

先贴一下MSDN的HtmlHelper的链接,MSDN对每一个构造函数、属性、方法和扩展方法都做了说明,我这里就常用的部分方法做一下简要的展示。

链接

@Html.ActionLink() 生成超链接,并自动根据路由进行匹配。 Eg:

@Html.ActionLink("超链接eg", "About","Hello")

自动匹配了超链接的标题,若不指定,则按照当前默认路由规则生成链接,避免了当路由规则发生变化后,需要对超链接进行重复修改。

常量或静态内容

@Html.Raw()

输出打印常量或者静态内容。

编码

@Html.Encode() 对内容进行编码

表单

  1. Using(Html.BeginForm(actionName,controllerName)){…}
  2. @Html.BeginForm(actionNmae,controllerName) …… @{Html.EndForm();}

上述两种方法都可以在页面生成表单,下面对表单的常用控件做一个简述,并使用颜色进行区分。

上图依次展示了Form表单,TextBox控件,Label控件,Hidden控件,RadioButton控件,DropDownList控件,以及DropDownList的list格式。

扩展方法

借助MSDN的介绍:“扩展方法使你能够向现有类型“添加”方法,而无需创建新的派生类型、重新编译或以其他方式修改原始类型。”扩展方法是一种特殊的静态方法,但可以像扩展类型上的实例方法一样进行调用。我们可以回到第一部分对HtmlHelper的扩展类-InputExtension类上,它是对于HtmlHelper的扩展。

扩展方法的三要素

  1. 静态类  可以从上图看出,InputExtension首先是一个静态类;
  2. 静态方法  既然是静态类,那么其所有的方法必然都是静态方法,例如:public static MvcHtmlString CheckBox();
  3. this关键字  可以从方法名定义中看出,第一个参数都是this HtmlHelper htmlHelper,代表对HtmlHelper类的扩展; 自定义扩展方法   1.在Models文件夹下新建一个类,取名为:MyHtmlHelperExt   2.将MyHtmlHelperExt设置为static,并写入以下的一个静态方法:
public static HtmlString MyExtHtmlLabel(this HtmlHelper helper, string value) {    
return new HtmlString(string.Format("<span style='font-weight:bold;'>Hello-{0}-End</span>", value)); }

3.确定满足了扩展方法的三要素之后,将命名空间改为:System.Web.Mvc

namespace System.Web.Mvc

注意:为什么要改命名空间为System.Web.Mvc? 这是因为如果不改命名空间,我们要使用自定义的扩展方法需要在每个页面中引入Models(MyHtmlHelper所在的那个命名空间)这个命名空间,为了防止重复的命名空间引入操作(想想我们使用Html.TextBox()不也没有引入命名空间么?),于是我们将命名空间与HtmlHelper类所在的命名空间保持一致。   4.在页面中我们就可以使用我们自己写的扩展方法了

@Html.MyExtHtmlLabel("EdisonChou")

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏老脸一黑

go 并发处理脚本

最近经常涉及到脚本的编写。本身项目数据量较大,所以经常编写的脚本需要高并发,干脆就提取出来。

53326
来自专栏Flutter入门

Flutter入门三部曲(2) - 界面开发基础

上一节我们熟悉了初始化后的flutter的界面。这一节,我们就来重点了解一下这部分的内容。

4450
来自专栏ytkah

{dede:list}和{dede:arclist}的区别

1.{dede:list}是用于列表页的文章列表调用,通常是用于list_article.htm页面,这个文章列表是可以分页的。 功能说明:表示列表模板里的分...

3456
来自专栏前端架构与工程

【翻译】JavaScript内存泄露

我们在进行JavaScript开发时,很少会考虑内存的管理。JavaScript中变量的声明和使用看起来是一件很轻松的事,底层的细节处理交给浏览器去做就好了。 ...

2726
来自专栏Golang语言社区

Go语言的os包中常用函数初步归纳

1)os.Getwd函数原型是func Getwd() (pwd string, err error) 返回的是路径的字符串和一个err信息,为什么先开这个呢?...

3697
来自专栏从零开始学自动化测试

python爬虫beautifulsoup4系列1

前言 以博客园为例,爬取我的博客上首页的发布时间、标题、摘要,本篇先小试牛刀,先了解下它的强大之处,后面讲beautifulsoup4的详细功能。 一、安装...

37611
来自专栏偏前端工程师的驿站

JS魔法堂:再识ASCII实体、符号实体和字符实体

一、前言                                            相信大家都熟悉通过字符实体 &nbsp; 来实现多个连续空格的输...

2188
来自专栏未闻Code

正则表达式re.sub替换不完整的问题现象及其根本原因

问题的起因来自于一段正则替换。为了从一段HTML代码里面提取出正文,去掉所有的HTML标签和属性,可以写一个Python函数:

1372
来自专栏极客编程

mootools入门

MooTools是一个简洁,模块化,面向对象的开源JavaScript web应用框架。

1042
来自专栏吴裕超

认识createDocumentFragment

今天在看vue源码解析时候发现一个api没有见过,一查是原生的,赶紧补漏。 DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的...

2707

扫码关注云+社区

领取腾讯云代金券