HtmlHelper总结

一、为什么会出现HtmlHelper?

HtmlHelper是为了方便视图View的开发而产生的。

在MVC中普通首页超链接为<a href="/Home/Index">首页</a>,当路由改变时可能需要修改为<a href="/XXX_Home/Index">首页</a>,如果项目里有很多超链接就需要改动很多地方。

我们需要的是路由改变也不受影响,所以应运而生了@Html.ActionLink("首页","Index","Home")

1.在App_Start中修改RouteConfig默认路径

2.在视图中创建超链接:

<a href="/Home/Index">首页</a><br/>
@Html.ActionLink("首页","Index","Home")

3.在浏览器中查看源码

<a href="/Home/Index">首页</a>

<a href="/XXX_Home">首页</a>

二、HtmlHelper本质

在视图中选中Html变量,按F12键,可见Html是一个HtmlHelper类型的变量

选中ActionLink方法,按F12键,让我们看看ActionLink方法

可见ActionLink是HtmlHelper类型的扩展方法,并且有一系列重载方法。

总结来说,HtmlHelper提供的一系列方法本质就是HtmlHelper类型的一系列扩展方法,用于生成Html标签,有点类似WebForm的用户控件。

三、常见HtmlHelper方法

1.Html.ActionLink()和Html.RoutLink()

根据路由规则动态生成超链接

使用方法: @Html.ActionLink("测试", "Hello", "Test"), @Html.RouteLink("测试", new { Action = "Hello", Controller = "Test" })

生成的Html:<a href="/Test/Hello">测试</a>

2.Html.BeginForm

动态生成表单标签

使用方法:

@using (Html.BeginForm("Hello","Test",FormMethod.Post,new { id="form1"}))
    {

}

生成的Html:

<form action="/Test/Hello" id="form1" method="post"> <input name="userName">
  </form>

3. Html.Partial()和Html.RenderPartial()

引用部分视图

使用方法:@Html.Partial("_PartialTest")   @{Html.RenderPartial("_PartialTest");}

Partial方法用于将部分视图渲染成字符串,RenderPartial和Partial方法类似,但RenderPartial不是返回字符串,而是直接写入响应流。出于这个原因,必须把RenderPartial放到代码块中,而不能放在代码表达式中。

应该使用Partial还是RenderPartial?一般情况下,因为Partial相对于RenderPartial来说更方便(不必使用花括号将调用封装在代码块中),所以应该选择Partial,然而RenderPartial拥有更好的性能,

因为它是直接写入响应流的,但这种性能优势需要大量的使用(高的网站流或者在循环中重复调用)才能看的出来。

4.  Html.Action()和Html.RenderAction()

调用Action返回局部视图

public ActionResult PartialTest()//Action返回局部视图

{
     return PartialView("_PartialTest");
   }

使用方法:@Html.Action("PartialTest")    @{ Html.RenderAction("PartialTest");}

5.其他Html方法

Html.TextBox:@Html.TextBox("userName")     生成的Html:<input id="userName" name="userName" type="text" value="">

Html.Hidden:@Html.Hidden("id")     生成的Html:<input id="id" name="id" type="hidden" value="">

Html.Password:@Html.Password("password")    生成的Html:<input id="password" name="password" type="password">

Html.RadioButton:

@Html.RadioButton("color","red") @Html.RadioButton("color", "blue",true) @Html.RadioButton("color", "green")

     生成的Html:<input id="color" name="color" type="radio" value="red">  <input checked="checked" id="color" name="color" type="radio" value="blue">  <input id="color" name="color" type="radio" value="green">

  Html.CheckBox:@Html.CheckBox("IsChecked")   生成的Html:<input id="IsChecked" name="IsChecked" type="checkbox" value="true"> <input name="IsChecked" type="hidden" value="false">

  Html.DropDownList: 

    @{ var items = new List<SelectListItem>()   {

     new SelectListItem() { Text="001",Value="1"},
    new SelectListItem() { Text="002",Value="2"},
    new SelectListItem() { Text="003",Value="3"}
   };}

   @Html.DropDownList("list", items)

   生成的html:

<select id="list" name="list"><option value="1">001</option>
<option value="2">002</option>
<option value="3">003</option>
</select>

四、HtmlHelper的弱类型和强类型方法

1. 弱类型方法

形如: Html.xx("xx")  比如Html.Label(),Html.TextBox()等。

2.强类型方法

强类型方法直接通过lambda表达式,去视图的Model属性对象中查找对应的属性数据。

形如:Html.xxFor(m=>m.xx),例如@Html.TextBox(m=>m.UserName)

五、HtmlHelper扩展方法

扩展方法:

1.方法所在类必须是静态的

2.方法也必须是静态的

3.方法的第一个参数必须是要扩展的那个类型,比如要给int扩展一个方法,那么第一个参数就必须是int

4.第一个参数前面必须要有一个this

在MVC中扩展HtmlHelper:

1.在Models文件夹下新建ExtHtmlHelper类,代码如下:

namespace HtmlHelperDemo.Models
{
    public static class ExtHtmlHelper
    {
        public static MvcHtmlString MyHtml(this HtmlHelper helper,string message)
        {
            StringBuilder output = new StringBuilder();
            output.Append("<h2>");
            output.Append(message);
            output.Append("</h2>");
            return new MvcHtmlString(output.ToString());
        }
    }
}

MyHtml扩展方法生成一个<h2>message</h2>标签

2.在视图中使用,引入命名空间@using HtmlHelperDemo.Models

@Html.MyHtml("Hello World")

效果如图:

如果不想在每个视图中引用@using HtmlHelperDemo.Models命名空间,可以将ExtHtmlHelper的命名空间修改为System.Web.Mvc

时间: 2024-11-25 01:26:24

HtmlHelper总结的相关文章

C#进阶系列——一步一步封装自己的HtmlHelper组件:BootstrapHelper(二)

前言:上篇介绍了下封装BootstrapHelper的一些基础知识,这篇继续来完善下.参考HtmlHelper的方式,这篇博主先来封装下一些常用的表单组件.关于BootstrapHelper封装的意义何在,上篇评论里面已经讨论得太多,这里也不想过多纠结.总之一句话:凡事有得必有失,就看你怎么去取舍.有兴趣的可以看看,没兴趣的权当博主讲了个“笑话”吧. 本文原创地址:http://www.cnblogs.com/landeanfen/p/5746166.html BootstrapHelper系列

自定义HtmlHelper控件

在asp.net mvc 中每一个Html控件都返回了MvcHtmlString ,他继承了HtmlString.下面自定义一个关于显示男女性别的自定义Html控件,使在创建页面时,可以直接调用该自定义的Html控件.可以查看其他的Html控件返回的是HtmlHelper,所以自定义的时候也要返回相同的类型直接在Controls文件夹下建立要自定义的html控件代码如下: using System.Web.Mvc; using System.Text; namespace System.Web.

页面开发辅助类—HtmlHelper初步了解

1.1 有失必有得 在ASP.Net MVC中微软并没有提供类似服务器端控件那种开发方式,毕竟微软的MVC就是传统的请求处理响应的回归.所以抛弃之前的那种事件响应的模型,抛弃服务器端控件也理所当然. 但是,如果手写Html标签效率又比较低,可重用度比较低.这时,我们该怎样来提高效率呢?首先,经过上篇我们知道可以通过ViewData传递数据,于是我们可以写出以下的Html代码: 1 <input name="UserName" type="text" value

[转]Asp.Net MVC使用HtmlHelper渲染,并传递FormCollection参数的陷阱

http://www.cnblogs.com/errorif/archive/2012/02/13/2349902.html 在Asp.Net MVC 1.0编程中,我们经常遇见这样的场景,在新建一个对象时候,通过HtmlHelper的方式在View模型中渲染Html控件,当填写完相关内容后,通过Form把需要新建的内容Post回View对应Controller的Action(例如:Create),指定的Action可以通过接受FormCollection参数.值参数或者某个类的实例参数(比如:

使用Htmlhelper,创建文本框TextBox

下面通过HtmlHelper帮助类,创建文本框. 首先新建一个实体类,做为下面的例子: using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MVCRestartlearnning.Models { public class Student { /// <summary> /// 学号 /// </summary> public int Stude

一个分页的HtmlHelper

1 namespace System.Web.Mvc 2 { 3 public static class TianqyHtmlHelper 4 { 5 /// <summary> 6 /// 分页HtmlHelper 7 /// </summary> 8 public static HtmlString ShowPageNavigate(this HtmlHelper htmlHelper, int currentPage, int pageSize, int totalCount

Razor和HtmlHelper的使用意义

Razor和HtmlHelper的使用意义 写这篇文档的目的是为了给初学MVC的同伴们介绍在MVC的View中的两个新概念,能有利于我们更快,更好的开发项目.一个是视图引擎,一个是HtmlHlper.这两个知识都不是新的,知识概念新而已,都是在我们学过的ASPX和 Html上做了改进,是我们编程更加容易. 一.区别ASPX和Razor 在ASP.NET MVC模式中,我们的视图引擎选择有两种:ASPX(ASP.NET),Razor. 1.ASP.net. 如果选择ASPX,那么选择的引擎其实就是

MVC HtmlHelper

在ASP.Net MVC中微软并没有提供类似服务器端控件那种开发方式,微软的MVC就是传统的“请求--处理--响应”的回归. 微软为开发人员快速开发前台页面提供了丰富的HtmlHelper的辅助类,辅助我们快速开发前台页面,也提供了可扩展的接口,前台页面的标签可以做到高度可重 Url.Action  常用 修改路由规则,将 / 修改为 - 后,访问地址变为:http://localhost:11614/Home-Index <a href="/UserInfo/index">

自定义HtmlHelper方法

原文:http://www.cnblogs.com/wenjiang/archive/2013/03/30/2990854.html HtmlHelper方法是ASP.NET MVC中非常强大的特性,有了这个特性,我们就能更加随心所欲的定制自己的页面. 自定义自己的HtmlHelper方法通常有三种, 像是: 一.Razor语法 采用Razor的方式非常直观,像是这样: @model IEnumerable<MusicShop.Models.Album> @{ ViewBag.Title =

MVC 自定义HtmlHelper帮助类型之分页

方法一: 在项目中增加App_Code文件夹,新增一个MyHtmlper.cshtml视图文件 写入代码: @helper Pagger(int pageIndex, int pageCount) { <div> @for (int i = 1; i <= pageCount; i++) { if (i != pageIndex) { <span > <a href="/Home/Index/@(i)[email protected](pageCount)&q