ASP.NETMVCVIEWCreatingCustomHTMLHelpersPart2

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.Index"%>
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

"http://www.w3.org/1999/xhtml ">
"Head1" runat="server">
     


      

          <% using (Html.BeginForm())
          { %>

               for="firstName">First Name:
               

               <%= Html.TextBox("firstName")%>
               


               for="lastName">Last Name:
               


               <%= Html.TextBox("lastName")%>
               


               "submit" value="Register" />    
          <% } %>
     1     

　　The Html.BeginForm() Helper method is used to create the opening and closing HTML tags. Notice that the Html.BeginForm() method is called within a using statement. The using statement ensures that the tag gets closed at the end of the using block.

　　If you prefer, instead of creating a using block, you can call the Html.EndForm()     Helper method to close the tag. Use whichever approach to creating an opening and closing tag that seems most intuitive to you.
　　The Html.TextBox() Helper methods are used in Listing 1 to render HTML tags. If you select view source in your browser then you see the HTML source in Listing 2. Notice that the source contains standard HTML tags.

　　IMPORTANT: notice that the Html.TextBox()-HTML  Helper is rendered with <%= %> tags instead of <% %> tags. If you don't include the equal sign, then nothing gets rendered to the browser.

　　The ASP.NET MVC framework contains a small set of helpers. Most likely, you will     need to extend the MVC framework with custom HTML Helpers. In the remainder of this     tutorial, you learn two methods of creating custom HTML Helpers.

　　Listing 2 – Index.aspx Source

<%@ Page Language="C#" AutoEventWireup="false" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Index" %>
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml">


     


     

          "http://localhost:33102/" method="post">
               for="firstName">First Name:

               

               "firstName" name="firstName" type="text" value="" />
               


               for="lastName">Last Name:
               

               "lastName" name="lastName" type="text" value="" />
               



               "btnRegister" name="btnRegister" type="submit" value="Register" />
          
     

　　Creating HTML Helpers with Static Methods

　　The easiest way to create a new HTML Helper is to create a static method that returns     a string. Imagine, for example, that you decide to create a new HTML Helper that     renders an HTML tag. You can use the class in Listing     2 to render a .

　　Listing 2 – Helpers\LabelHelper.cs

using System;
namespace MvcApplication1.Helpers
{
          public class LabelHelper

          {
               public static string Label(string target, string text)
               {
                    return String.Format("{1}", target, text);
               }
          }
}

　　There is nothing special about the class in Listing 2. The Label() method simply returns a string.

　　The modified Index view in Listing 3 uses the LabelHelper to render HTML tags. Notice that the view includes an<%@ imports         %> directive that imports the Application1.Helpers namespace.

　　Listing 2 – Views\Home\Index2.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index2.aspx.cs" Inherits="MvcApplication1.Views.Home.Index2"%>
<%@ Import Namespace="MvcApplication1.Helpers" %>
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml" >
"Head1" runat="server">

     


     

          <% using (Html.BeginForm())
          { %>
               <%= LabelHelper.Label("firstName", "First Name:") %>
               


               <%= Html.TextBox("firstName")%>
               


               <%= LabelHelper.Label("lastName", "Last Name:") %>
               

               <%= Html.TextBox("lastName")%>
               


               "submit" value="Register" />
          <% } %>

     

　　Creating HTML Helpers with Extension Methods

　　If you want to create HTML Helpers that work just like the standard HTML Helpers included in the ASP.NET MVC framework then you need to create extension methods.  Extension methods enable you to add new methods to an existing class. When creating an HTML Helper method, you add new methods to the HtmlHelper class represented by a view's Html property.

　　The class in Listing 3 adds an extension method to the HtmlHelper class named Label(). There are a couple of things that you should notice about this class. First, notice that the class is a static class. You must define an extension method with a static class.

　　Second, notice that the first parameter of the Label() method is preceded     by the keyword this. The first parameter of an extension method indicates     the class that the extension method extends.

Listing 3 – Helpers\LabelExtensions.cs

using System;
using System.Web.Mvc;

namespace MvcApplication1.Helpers
{
     public static class LabelExtensions
     {
          public static string Label(this HtmlHelper helper, string target, string text)
          {
               return String.Format("{1}", target, text);

          }
     }
}

　　After you create an extension method, and build your application successfully, the     extension method appears in Visual Studio Intellisense like all of the other methods of a class (see Figure 2). The only difference is that extension methods appear     with a special symbol next to them (an icon of a downward arrow).

　　The modified Index view in Listing 4 uses the Html.Label() extension method to render     all of its tags.

　　Listing 4 – Views\Home\Index3.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index3.aspx.cs" Inherits="MvcApplication1.Views.Home.Index3" %>

<%@ Import Namespace="MvcApplication1.Helpers" %>
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml" >
"Head1" runat="server">
     


     


          <% using (Html.BeginForm())
          { %>
               <%= Html.Label("firstName", "First Name:") %>    
               

               <%= Html.TextBox("firstName")%>
               


               <%= Html.Label("lastName", "Last Name:") %>    
               

               <%= Html.TextBox("lastName")%>

               


               "submit" value="Register" />
          <% } %>
     

　Summary

　　In this tutorial, you learned two methods of creating custom HTML Helpers. First,     you learned how to create a custom Label() HTML Helper by creating     a static method that returns a string. Next, you learned how to create a custom     Label() HTML Helper method by creating an extension method on the HtmlHelper class.

　　In this tutorial, I focused on building an extremely simple HTML Helper method.     Realize that an HTML Helper can be as complicated as you want. You can build HTML     Helpers that render rich content such as tree views, menus, or tables of database     data.