Custom HTML Helpers can help seperation of code and html and avoid repetion.

What is a HTML Helper ?

It is just a method that will return a string which can contain any content you wan from a simple string to a table of data.

Why are HTML Helpers useful ?

method that returns a string. The string can represent any type of content that you want. For example, you can use HTML Helpers to render standard HTML tags like HTML <input> and <img> tags. In ASP.NET we have many standard HTML Helpers

• Html.ActionLink()
• Html.BeginForm()
• Html.CheckBox()
• Html.DropDownList()
• Html.EndForm()
• Html.Hidden()
• Html.ListBox()
• Html.Password()
• Html.RadioButton()
• Html.TextArea()
• Html.TextBox()

 

 

Let us think of a situation.

In a  web page we need to list the features of a product.

If the feature is present then show a Tick

If the feature is missing then show a Cross

As shown below.

 

 

 

 

This is achieved by using two different CSS classes which will render the Tick or the Cross

When I use my CSS class “plain” it will render a Cross

When I use the class “checked” it shows a Tick.

 

 

Now in razor view you would typically use the

@Html.DisplayFor(model => model.Alarm)   which would render a standard check box ( if true then the checkbox will be ticked and if false the checkbox will be empty) But we want a better display hence we want to make use of our CSS classes.

In order to show the customised CSS we will have to write some logic in the Razor view which is not preferred at all as we would like to keep the logic out from the views and secondly it will need a lot of code as for each item we will have to use some kind of If loop as shown below.

 

Not recommended

@if (Model.AirConditioning == true)
{
<li class=”ticked”>@Html.LabelFor(model => model.AirConditioning)</li> }
else
{
<li class=”plain”>@Html.LabelFor(model => model.AirConditioning)</li> }

 

 

Better Alternative is to write a Custom HTMLHelper

Let us write a Custom HTML Helper for it.

 

Create a Class

I created a folder called HTMLHelpers in my project and then created a class called myHTMLHelpers.cs as shown below

The content of the class is as below

 

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace myapplication.Helpers
{
    public static class myHTMLHelpers
    {


    
          public static IHtmlString TickOrCross(bool content)
            {
                string htmlString = "";
              
         
                if(content==true)
                    {
                        htmlString = String.Format("checked");  // if content is true then we want the CSS class checked

                    }
                    else
                    {

                        htmlString = String.Format("plain"); // if content is falsethen we want the CSS class plain
                    }

                return new HtmlString(htmlString);

            }
          }
    }

How te make use of this HTML Helper ?

Go to your Razor View

 

at the top of the page add the namespace under which we created our helper class

@using myapplication.Helpers

 

 

at the right place in your razor view I have  made use of our custom html helper.

We pass the model value to it and it will set the class name accordingly to display a Tick or a Cross

                                    <ul class=”span2″>
<li class=”@myHTMLHelpers.TickOrCross(Model.AirConditioning)“>Air Conditioning</li>
<li class=”@myHTMLHelpers.TickOrCross(Model.Alarm)“>Alarm</li>

</ul>

The other way would have been to put the logic into the view using the if block in our code,. which is not a good practice.

@if (Model.AirConditioning == true)
{
<li class=”ticked”>Air Conditioning</li> }
else
{
<li class=”plain”>Air Conditioning</li>
}