Custom Button with TagBuilder technique using MVC Razor Engine

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

There are lots of ways to create your own helpers using Razor syntax. I am using one of them using TagBuilder technique. The idea to create bit fancy button this with help of TagBuilder as there is no direct extension method exists so far and button is one of the very essential part of Software Development.

There is also an article relates to create custom helpers:

So let’s start.

First we’ll start with Extension method syntax. I have created a sample application having structure like down below:

Open HtmlHelpers.cs file and you will find the given below code snippet, which is an extension method which takes few parameters and does its operation to create Fancy Button.

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

As you can see we are using @Html.CustomButtom () Helper method on Verify.cshtml page, which takes few parameters to create custom button (parameters are defined in above image).After passing the desired param values now we 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 proceed to this again Press Ff5 and see the result.

Note: You can set your own set of properties to create more Desired Control.

And here we are with Custom Button:

Fancy Custom Button is in front and now time to check that weather click works as desire or not. So click on the button and see that it will redirect to the Route path which we have passed into Extension method.

Here is the Final output:

Hope this will help you someday some time J

Sample application is attached as a reference.

Stay Happy Stay Coding

Categories: MVC