Extension method for HTML Helpers

You can write your own HTML helper by creating an extension method for the HtmlHelper class. This approach allows you to encapsulate reusable HTML generation logic in a method that can be easily invoked within your Razor views.

Here's a step-by-step guide to creating a custom HTML helper:

Step 1: Create the Extension Method

First, you need to define a static class to hold your extension methods. Then, within this class, you define static methods that extend the HtmlHelper class.

For example, let's create a custom HTML helper to generate a Bootstrap-styled button.

Custom HTML Helper Example

using System.Web.Mvc;

namespace YourNamespace.Helpers
{
    public static class CustomHtmlHelpers
    {
        public static MvcHtmlString BootstrapButton(this HtmlHelper htmlHelper, string text, string type = "primary")
        {
            string buttonHtml = $"<button class='btn btn-{type}'>{text}</button>";
            return new MvcHtmlString(buttonHtml);
        }
    }
}

Step 2: Use the Custom Helper in a Razor View

To use your custom HTML helper in a Razor view, you first need to ensure that the namespace containing your helper method is included in the view. You can do this by adding the @using directive at the top of your view or by configuring it in the Web.config file for your views.

Using the Helper in a Razor View

1. Directly in the view:

   @using YourNamespace.Helpers
   
   @Html.BootstrapButton("Click Me")

2. Configuring in Web.config:

   Add the namespace to the web.config file located in the Views folder:

   <system.web.webPages.razor>
       <pages pageBaseType="System.Web.Mvc.WebViewPage">
           <namespaces>
               <add namespace="YourNamespace.Helpers" />
               <!-- Other namespaces -->
           </namespaces>
       </pages>
   </system.web.webPages.razor>

   Now you can use the custom helper without adding the @using directive in each view:

   @Html.BootstrapButton("Click Me")

Step 3: Handling Additional Parameters

You can enhance your helper by adding more parameters to handle various HTML attributes or other custom logic.

Enhanced Custom Helper with HTML Attributes

using System.Collections.Generic;
using System.Web.Mvc;
using System.Web.Routing;

namespace YourNamespace.Helpers
{
    public static class CustomHtmlHelpers
    {
        public static MvcHtmlString BootstrapButton(this HtmlHelper htmlHelper, string text, string type = "primary", object htmlAttributes = null)
        {
            var tagBuilder = new TagBuilder("button");
            tagBuilder.MergeAttribute("type", "button");
            tagBuilder.AddCssClass($"btn btn-{type}");
            tagBuilder.SetInnerText(text);

            if (htmlAttributes != null)
            {
                var attributes = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
                tagBuilder.MergeAttributes(new RouteValueDictionary(attributes));
            }

            return new MvcHtmlString(tagBuilder.ToString());
        }
    }
}

Using the Enhanced Helper

@Html.BootstrapButton("Click Me", "success", new { id = "myButton", @class = "extra-class" })

This approach ensures your custom HTML helper is flexible and can handle various use cases by accepting additional parameters and HTML attributes.