Creating Custom HTML Helpers MVC

Before, moving forward recall the concept of Extension Method. Extension methods enable you to "add" methods to existing types without creating a new derived type, recompiling, or otherwise modifying the original type. Extension methods are a special kind of static method, but they are called as if they were instance methods on the extended type. For client code written in C# and Visual Basic, there is no apparent difference between calling an extension method and the methods that are actually defined in a type.

Extension methods are defined as static methods but are called by using instance method syntax. Their first parameter specifies which type the method operates on, and the parameter is preceded by the “this” modifier. Extension methods are only in scope when you explicitly import the namespace into your source code with a using directive.

For more information about Extension Methods visit my article  http://akshatsharma80.blogspot.com/2010/11/extension-methods.html

Now, let’s come to the point “Custom HTML Helpers”, The ASP.NET MVC framework ships with a limited number of HTML helpers. Fortunately, creating new HTML helpers is an easy process. You create a new HTML helper by creating an extension method on the HtmlHelper class. For example,

using System;

using System.Web.Mvc;

namespace Helpers

{

    public static class SubmitButtonHelper

    {

        /// <summary>

        /// Renders an HTML form submit button

        /// </summary>

        public static string SubmitButton(this HtmlHelper helper, string buttonText)

        {

            return String.Format("<input type=\"submit\" value=\"{0}\" />",

            buttonText);

        }

    }

}

Contains a new Html.SubmitButton() helper that renders an HTML form submit button. Above listing contains an extension method named SubmitButton(). The SubmitButton() helper simply returns a string that represents an HTML <input type=”submit” /> tag. Because the SubmitButton() method extends the HtmlHelper class, this method appears as a method of the HtmlHelper class in Intellisense.

The view in Listing below uses the new Html.SubmitButton() helper to render the submit button for a form. Make sure that you import the namespace associated with your helper,

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcApplication1.Models.Customer>" %>

<%@ Import Namespace="Helpers" %>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

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

    <fieldset>

        <legend>Fields</legend>

        <p>

            <label for="FirstName">

                FirstName:</label>

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

        </p>

        <p>

            <label for="LastName">

                LastName:</label>

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

        </p>

        <p>

            <%= Html.SubmitButton("Create Customer") %>

        </p>

    </fieldset>

    <% } %>

</asp:Content>