楠槡

ASP.NET MVC HtmlHelper类

2017-07-22

ASP.NET MVC之 HtmlHelper

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

示例

诸如下述代码:

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

示例视图

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

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

链接

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

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

ActionLink()

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

常量或静态内容

@Html.Raw()

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

编码

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

表单

  1. Using(Html.BeginForm(actionName,controllerName)){…}
    . @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,并写入以下的一个静态方法:
    1
    2
    3
    4
    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")

Tags: dotNET
使用支付宝打赏
使用微信打赏

若你觉得我的文章对您有帮助,点击上方按钮请我喝杯咖啡☕

若文章中存在问题,或您有任何意见和疑问,均可与我联系

扫描二维码,分享此文章 📱