Click here to Skip to main content
15,885,216 members
Articles / Operating Systems / Windows
Technical Blog

ASP.NET MVC Custom HTML Helpers (C#)

Rate me:
Please Sign up or sign in to vote.
5.00/5 (1 vote)
6 Sep 2013CPOL 23.3K   3   6
Create custom HTML Helpers to make it easier to generate view content.

Create custom HTML Helpers to make it easier to generate view content. You can create custom helpers in three ways:

  1. with Static Methods
  2. with Extension Methods
  3. with @helper in the razor view

1. Static Methods:

CustomHelper.cs:
C#
using System;
using System.Web.Mvc;

namespace HelperApplication.Helpers
{
     public static class CustomHelpers
     {
          public static string ImageTag(string src, string alt = "Image", int width = 50, int height = 50)
          {
               return String.Format("<img src='{0}' alt=’{1}’ width=’{2}’ height=’{3}’/>", src, alt, width, height);
          }
     }
}
  • src- image source (path)
  • alt- alternative text if image could not be loaded, and it is assigned a default value "Image". When no values is passed to this parameter it will take the default value "Image".
  • width and height- width and height of the image these parameters are also assigned a default value 50

Using the ImageTag HTML helper method..

Index.cshtml:
XML
@using HelperApplication.Helpers.CustomHelper
<div>
     <span>ImageTag with default values for alt, width, height</span>
     @ImageTag("imagePath")
</div>
<div>
     <span>ImageTag with width=100 and height=100</span>
          @ImageTag("imagePath","Image With alt",100,100)
</div>

2. Extension Methods

3. @helper

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
India India
Yet to be written

Comments and Discussions

 
QuestionHeight / Width defaults Pin
James Curran6-Sep-13 6:08
James Curran6-Sep-13 6:08 
AnswerRe: Height / Width defaults Pin
ednrg6-Sep-13 9:30
ednrg6-Sep-13 9:30 
I agree that the hard coded defaults should not be there. As you stated, they should default to a negative number, and the code should take into account if the dimensions are listed. If not, just leave the attributes out, since it will show at its full size. Of course, you can modify it by placing a MAXSIZE for the image, then possibly reading the image size and resizing it to fit within the max image size.
GeneralRe: Height / Width defaults Pin
James Curran6-Sep-13 10:18
James Curran6-Sep-13 10:18 
GeneralRe: Height / Width defaults Pin
Murali Gowda9-Sep-13 23:29
professionalMurali Gowda9-Sep-13 23:29 
GeneralRe: Height / Width defaults Pin
ednrg10-Sep-13 3:01
ednrg10-Sep-13 3:01 
GeneralRe: Height / Width defaults Pin
Murali Gowda10-Sep-13 3:19
professionalMurali Gowda10-Sep-13 3:19 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.