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:

MVC1.jpg

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.

MVC2.jpg

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:

MVC3.jpg

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:

MVC4.jpg

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:

MVC5.jpg

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:

MVC6.jpg

Hope this will help you someday some time.

The sample application is attached as a reference.

Stay Happy Stay Coding.

Up Next
    Ebook Download
    View all
    Learn
    View all