Click here to Skip to main content
15,891,316 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 
Hard coding the height and width defaults is a dumb idea. Those value will almost never be the right ones.

A better solution would be to set the defaults to, say, -1 in the method signature, then in the code, if one or the other is still set to -1 (i.e., no explicit value was given), then load the file into memory on the server, and determine the file actual height & width.
Truth,
James

AnswerRe: Height / Width defaults Pin
ednrg6-Sep-13 9:30
ednrg6-Sep-13 9:30 
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.