Custom Button With TagBuilder Using MVC Razor Engine

This article is primarily about the Custom Button with TagBuilder in MVC with Razor View Engine.

There are many ways to create your own helpers using Razor syntax. I am using one of them using the TagBuilder technique. The idea is to create a somewhat fancy button using TagBuilder since there is no direct extension method that exists so far and buttons are one of the very essential parts of Software Development.

There is also an article related to creating custom helpers: Extension Helpers Method in MVC Razor View Engine.

So let's start.

First we'll start with the syntax of extension methods. I have created a sample application with the structure as in the following:



Open the HtmlHelpers.cs file and you will find the following code snippet that is an extension method that takes a few parameters and creates a Fancy Button.



So far we have implemented an extension method using TagBuilder, now it is time to use it in our View page (.cshtml). I'll use it in the Verify.cshtml page. Here is the code snippet of that page:



As you can see we are using the "@Html.CustomButtom ()" helper method in the "Verify.cshtml" page that takes a few parameters to create a custom button (the parameters are defined in the preceding image). After passing the desired parameter values, we now run the application and see the effect.

Now let's run this and see the execution:



Notice that it took all parameters and created a HTML input type submit button and proceeded to this again, Press F5 and see the result.

Note: You can set your own set of properties to create a more desired control.

And here we have the custom button:



The Fancy Custom Button is in front and now to determine whether the click works as desired. So click on the button and see that it will redirect to the route path that we passed to the extension method.

Here is the final output:



Hope this will help you someday sometime.

The sample application is attached as a reference.

Stay Happy Stay Coding.