Building HtmlHelper Extension Methods for ASP.NET MVC

转载 2011年01月20日 14:49:00
ASP.NET MVC is the latest buzz pattern in web development. ASP.NET MVC was recently released and I think it is a great way to develop web applications. If you are new to ASP.NET MVC, check ASP.NET MVC - Some Frequently Asked Questions and  Your First ASP.NET MVC Application. One of the benefits of MVC is you having total control over what and how your code is rendered in the browser. When you create the HTML for your page, a class that is very helpful is the HtmlHelper class. This class represents support for rendering HTML controls in a view. You can use the HtmlHelper class to render controls such as a TextBox, which renders as input type=”text”, to the browser like the following:
<%= Html.TextBox("Firstname") %>
In the first release of ASP.NET MVC, the HtmlHelper class does not cover a large area of HTML controls. This article will show you how to create your own extension method to complement the existing HtmlHelper class. Before going any further you’ll need to install ASP.NET MVC. You can download that here.
To begin with open Visual Studio 2008 and choose File > New > Project > ASP.NET MVC Web Application.
NewProject
 
By default Visual Studio creates several folders for you, namely Models, Views and Controllers. Start by creating a new folder in the root directory called Common. In that folder create a new class called Helpers and add the following code:
 
C#
 
public static class Helpers
{
       public static string Span(this HtmlHelper html, string text)
       {
            var builder = new TagBuilder("span");
            builder.GenerateId("firstName");
            builder.SetInnerText(text);
            return builder.ToString(TagRenderMode.Normal);
       }       
 }
 
VB.NET
 
Public Module Helpers
            <System.Runtime.CompilerServices.Extension> _
            Public Function Span(ByVal html As HtmlHelper, ByVal text As String) As String
                  Dim builder = New TagBuilder("span")
                  builder.GenerateId("firstName")
                  builder.SetInnerText(text)
                  Return builder.ToString(TagRenderMode.Normal)
            End Function
End Module
 
I’m using a feature in C# 3.0 called extension methods. Extension methods enable you to "add" methods to existing types without creating a new derived type, recompiling, or otherwise modifying the original type. Using this new feature allows you to write custom methods that will appear in Visual Studio’s intellisense when working in the HTML designer. The ASP.NET MVC framework includes a useful utility class named the TagBuilder class that you can use when building HTML helpers. The TagBuilder class, as the name of the class suggests, enables you to easily build HTML tags. The next step is to make this helper class available to all the Views in the project. You could add this directive to each view:
 
<%@ Import Namespace="MvcApplication1.Common" %>
 
But that would mean you would need to add this directive to every view that needs to use this helper class. That isn’t acceptable because of maintenance. What happens if you want to move it to another namespace? Allot of find and replaces! The better option is to add the namespace to the web.config file so it’s available to every view. Add the following code to the pages/namespaces element:
 
<add namespace="MvcApplication1.Common"/>
 
This helper class can now be used through the entire project. To demonstrate how to use this helper class you need to open the About.aspx in the Home view and add the following code:
 
<asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server">
    <h2>About</h2>
    <p>       
        <%= Html.Span("About page...") %>       
    </p>
</asp:Content>
 
In the code above there is the Span extension method created earlier. As you might expect it will render a <span> tag in the browser. Pretty neat huh?!
 

You can create helper methods that map to different HTML tags, so you can create them to display bold or even italic text. The choice is up to you. This is a nice feature of MVC that allows you to easily build custom HTML tags in your views. The entire source code of this article can be downloaded over here

.NET MVC 扩展 HtmlHelper 从无到有(一)

对于MVC的html扩展一直都有想法,今天来小小尝试一下。 首先对扩展一无所知的我科普了一下MVC扩展: 13个 ASP.NET MVC 的扩展 OK,现在对System.Web.Mvc.H...
  • feng005211
  • feng005211
  • 2014年05月10日 11:06
  • 6046

通过一个MVC HtmlHelper扩展实例,简单说明扩展步骤

扩展Submit   using System; using System.Collections.Generic; using System.Linq; using System.Web; us...
  • whaxrl
  • whaxrl
  • 2016年04月18日 16:17
  • 764

C# ASP.NET MVC HtmlHelper用法大全

因为是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因。 如有冒犯请联系本人,或删除,或标明出处。 因为好的文章,以前只想收藏,但连接有时候会失效,...
  • sat472291519
  • sat472291519
  • 2013年10月08日 16:46
  • 3048

ASP.NET MVC - HTML 帮助器(HtmlHelper 类)

http://msdn.microsoft.com/zh-cn/library/system.web.mvc.htmlhelper(v=vs.108).aspx
  • lvjin110
  • lvjin110
  • 2014年05月04日 12:24
  • 6467

ASP.NET MVC 使用总结(二)——扩展HtmlHelper实现动态生成title及meta

  前不久看到了“.NET 4的新特性:图表、SEO及可扩展的输出缓存”这篇新闻,才知道现在.NET4.0里面已经有SEO了。提到SEO,这让我想起去年做过的一个ASP.NET MVC项目中遇到的SE...
  • n_ithero
  • n_ithero
  • 2010年03月08日 20:33
  • 1580

ASP.NET MVC---自定义HtmlHelper方法

HtmlHelper方法是ASP.NET MVC中非常强大的特性,有了这个特性,我们就能更加随心所欲的定制自己的页面。        自定义自己的HtmlHelper方法通常有三种, 像是: ...
  • Hmillet
  • Hmillet
  • 2016年05月17日 11:08
  • 554

HtmlHelper的扩展分页方法

HtmlHelper的扩展: 注意点:扩展方法必须是静态方法,所在的类必须是静态类,所在的命名空间改成System.Web.MVC则能省略页面中必须添加命名空间的约束。 //主要就是输出分页的...
  • syaguang2006
  • syaguang2006
  • 2014年07月07日 23:05
  • 958

asp.net mvc htmlhelper 扩展方法

引用 System.Web.Mvc; 并把类的命名空间跟 System.Web.Mvc放在一起 namespace System.Web.Mvc{ public static class...
  • someon2
  • someon2
  • 2014年03月27日 10:55
  • 412

MVC学习系列-HtmlHelper分析以及实例演示

在讲具体的使用之前,先向大家讲述一下为何要使用HtmlHelper MVC设计模式中,控制器负责向View传递表单数据,再由view视图进行具体的显示。控制器只负责将数据传递给view,具体如何显示那...
  • ydm19891101
  • ydm19891101
  • 2015年02月02日 10:39
  • 988

MVC htmlhelper 扩展生成 dropdownlist

using System; using System.Collections.Generic; using System.Linq; using System.Linq.Expressions;...
  • chengmodelong
  • chengmodelong
  • 2014年12月16日 13:24
  • 553
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Building HtmlHelper Extension Methods for ASP.NET MVC
举报原因:
原因补充:

(最多只允许输入30个字)