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.
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:
public static class Helpers
       public static string Span(this HtmlHelper html, string text)
            var builder = new TagBuilder("span");
            return builder.ToString(TagRenderMode.Normal);
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")
                  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">
        <%= Html.Span("About page...") %>       
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


ASP.NET MVC HtmlHelper

  • 2011年12月03日 14:42
  • 6KB
  • 下载

ASP.NET MVC HtmlHelper类的方法总结

ASP.NET MVC HtmlHelper类的方法总结 (1)ActionLink  生成一个特定的控制器行为连接                         具体说明: ... MVC--Htmlhelper

(一)引言 HtmlHelper用来在视图中呈现 HTML 控件。 我们在开发前台和后台交互的时候,绑定数据会很让人头疼,现在我们用MVC帮我们写好了的Htmlhelper来帮我们绑定数据。 用一...

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

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

[ASP.NET MVC]通过对HtmlHelper扩展简化“列表控件”的绑定

在众多表单元素中,有一类元素用于绑定一组预定义列表。传统的ASP.NET Web Form中,它对应着一组重要的控件类型,即ListControl,我们经常用到DropDownList, ListBo... mvc 3.0详细笔记__16__自定义的 HtmlHelper类方法

.NET MVC 扩展方法也是一种静态方法,也能像实例方法一样被调用。 .NET MVC 3中扩展方法特点: (1)扩展类的名称以Extensions结尾; (2)扩展类的类型...

ASP.NET MVC HtmlHelper用法大全

HTML扩展类的所有方法都有2个参数:以textbox为例子public static string TextBox( this HtmlHelper htmlHelper, string name,...

ASP.NET MVC HtmlHelper如何扩展

ASP.NET MVC 中HtmlHelper方法为我们提供很多html标签,只需在页面调用就行了,但是微软并没有把所有的html标签都对应有了扩展方法,需要我们自定义HtmlHelper,来满足我们...
  • hoiven
  • hoiven
  • 2016年05月10日 13:35
  • 216 mvc中构建htmlHelper的checkboxlist

您举报文章:Building HtmlHelper Extension Methods for ASP.NET MVC