> For the complete documentation index, see [llms.txt](https://huy312100.gitbook.io/software-development/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://huy312100.gitbook.io/software-development/.net-technology/.net-mvc/html-helpers/extension-method-for-html-helpers.md).

# 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**

```csharp
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:**

   ```csharp
   @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:

   ```xml
   <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:

   ```csharp
   @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**

```csharp
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

```csharp
@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.