Post
Ask Question

Create Label Required HTML Helper With Required Symbol

In this article you will learn the followings things,
  • What is Html Helper in Asp.Net MVC and types?
  • Why do we need custom Html Helper?
  • How to create Custom Html Helper?
  • Step by Step Implementation

What is HTML Helper Asp.Net MVC and its types ?

 
HtmlHelper is a class inside namespace System.Web.Mvc. This class handles and is responsible to generate HTML tag in ViewEngine.
 
There are two types of HTML Helpers:
  • Non-Strongly Typed Html Helper (Basic Html Helper) 
  • Strongly Typed Html Helper 
Example
 
@Html.Label ---- Non-Strongly Typed Html Helper Example
@Html.LabelFor ---- Strongly Typed Html Helper Example
 

Why do we need custom Html Helper?

 
You can design your own html helper as per your requirement; those html helpers are  called Custom Html Helper.
 

How to create Custom Html Helper?

 
Custom creation of Html Helper is very simple. We have to create only class file with Static Class and Static Method.
 
Example
  1. public static class CustomerHelper  
  2. {  
  3.    public static IHtmlString LabelRequired(this HtmlHelper helper , string LabelText, string Symbol, string HtmlClass)  
  4. {  
  5.    }  
  6. }  
Create a new project called “AspNetMvc”
 
Create Label Required HTML Helper With Required Symbol 
 
In the below dialog box do the followings,
 
SR.
NO.
DESCRIPTION
1
Select MVC Template.
2
Confirm or Check MVC check box selected .
3
Click Change Authentication button select NO AUTHENTICATION value.
4
Click OK button to proceed ahead.
 
Create Label Required HTML Helper With Required Symbol 
 
Visual Studio will create the project as per the above selections.
 
Create Label Required HTML Helper With Required Symbol 
 
Default view of SOLUTION EXPLORER.
 
Create Label Required HTML Helper With Required Symbol 
 
Add new class called “CustomHelper”, and now right click on Project ADD-->CLASS
 
Create Label Required HTML Helper With Required Symbol
 
Create Label Required HTML Helper With Required Symbol
 
Create Label Required HTML Helper With Required Symbol 
 
While you try HtmlHelper in Parameter section it shows a  RED UNERLINE.
 This is because HTML HELPER is using the namespace System.Web.Mvc.
 
CustomHelper.cs Code
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6.   
  7. namespace AspNetMvc  
  8. {  
  9.     public static class CustomHelper  
  10.     {  
  11.         /// <summary>  
  12.         ///   
  13.         /// </summary>  
  14.         /// <param name="helper">Html Helper</param>  
  15.         /// <param name="DisplayText">Text To Display</param>  
  16.         /// <param name="Symbol">To Display Symbol like *</param>  
  17.         /// <param name="HtmlClass">Class name </param>  
  18.         /// <returns></returns>  
  19.         public static IHtmlString LabelRequired(this HtmlHelper helper, string DisplayText, string Symbol, string HtmlClass)  
  20.         {  
  21.             string LabelRequiredString = string.Empty;  
  22.   
  23.             //Tag To build  
  24.             TagBuilder tb = new TagBuilder("label");  
  25.   
  26.             //Assign Css Class  
  27.             tb.AddCssClass(HtmlClass);  
  28.   
  29.             //Add HTML   
  30.             tb.InnerHtml = DisplayText + "<span style='color:red;font-size:20px;'>" + Symbol + "</span>";  
  31.   
  32.             return new MvcHtmlString(tb.ToString());  
  33.         }  
  34.     }  
  35. }  
Now switch to Models folder, right click on Model folder and add new model called “MemberModel”
 
Create Label Required HTML Helper With Required Symbol
 
Create Label Required HTML Helper With Required Symbol
 
Create Label Required HTML Helper With Required Symbol 
 
MemberModel.cs code
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.ComponentModel.DataAnnotations;  
  4. using System.Linq;  
  5. using System.Web;  
  6.   
  7. namespace AspNetMvc.Models  
  8. {  
  9.     public class MemberModel  
  10.     {  
  11.         [Required(ErrorMessage ="Full name required")]  
  12.         public string FullName { get; set; }  
  13.   
  14.         public string Address { get; set; }  
  15.   
  16.         public string Phone { get; set; }  
  17.   
  18.         [Required(ErrorMessage = "Email required")]  
  19.         public string Email { get; set; }  
  20.   
  21.     }  
  22. }  
Now switch to Controllers folder, double click on HomeController and add new ActionResult called NewMember()
 
Create Label Required HTML Helper With Required Symbol
 
Create Label Required HTML Helper With Required Symbol 
 
Default Code is generated using Scaffolding,
  1. @model AspNetMvc.Models.MemberModel  
  2. @{  
  3.     ViewBag.Title = "NewMember";  
  4. }  
  5. <h2>NewMember</h2>  
  6. @using (Html.BeginForm())   
  7. {  
  8.     @Html.AntiForgeryToken()  
  9.       
  10.     <div class="form-horizontal">  
  11.         <h4>MemberModel</h4>  
  12.         <hr />  
  13.         @Html.ValidationSummary(true, "", new { @class = "text-danger" })  
  14.         <div class="form-group">  
  15.             @Html.LabelFor(model => model.FullName, htmlAttributes: new { @class = "control-label col-md-2" })  
  16.             <div class="col-md-10">  
  17.                 @Html.EditorFor(model => model.FullName, new { htmlAttributes = new { @class = "form-control" } })  
  18.                 @Html.ValidationMessageFor(model => model.FullName, "", new { @class = "text-danger" })  
  19.             </div>  
  20.         </div>  
  21.   
  22.         <div class="form-group">  
  23.             @Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "control-label col-md-2" })  
  24.             <div class="col-md-10">  
  25.                 @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } })  
  26.                 @Html.ValidationMessageFor(model => model.Address, "", new { @class = "text-danger" })  
  27.             </div>  
  28.         </div>  
  29.   
  30.         <div class="form-group">  
  31.             @Html.LabelFor(model => model.Phone, htmlAttributes: new { @class = "control-label col-md-2" })  
  32.             <div class="col-md-10">  
  33.                 @Html.EditorFor(model => model.Phone, new { htmlAttributes = new { @class = "form-control" } })  
  34.                 @Html.ValidationMessageFor(model => model.Phone, "", new { @class = "text-danger" })  
  35.             </div>  
  36.         </div>  
  37.   
  38.         <div class="form-group">  
  39.             @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })  
  40.             <div class="col-md-10">  
  41.                 @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })  
  42.                 @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })  
  43.             </div>  
  44.         </div>  
  45.   
  46.         <div class="form-group">  
  47.             <div class="col-md-offset-2 col-md-10">  
  48.                 <input type="submit" value="Create" class="btn btn-default" />  
  49.             </div>  
  50.         </div>  
  51.     </div>  
  52. }  
  53.   
  54. <div>  
  55.     @Html.ActionLink("Back to List", "Index")  
  56. </div>  
  57.   
  58. @section Scripts {  
  59.     @Scripts.Render("~/bundles/jqueryval")  
  60. }  
After using Customer Helper,
  1. @Html.LabelRequired  
Example
  1. @Html.LabelRequired("Full Name", "*", "control-label col-md-2")  
NewMember.cshtml code
  1. @model AspNetMvc.Models.MemberModel  
  2. @{  
  3.     ViewBag.Title = "NewMember";  
  4. }  
  5.   
  6. <h2>NewMember</h2>  
  7.   
  8. @using AspNetMvc  
  9.   
  10. @using (Html.BeginForm())   
  11. {  
  12.     @Html.AntiForgeryToken()  
  13.       
  14.     <div class="form-horizontal">  
  15.         <h4>MemberModel</h4>  
  16.         <hr />  
  17.         @Html.ValidationSummary(true, "", new { @class = "text-danger" })  
  18.         <div class="form-group">  
  19.             @Html.LabelRequired("Full Name", "*", "control-label col-md-2")  
  20.             <div class="col-md-10">  
  21.                   
  22.                 @Html.EditorFor(model => model.FullName, new { htmlAttributes = new { @class = "form-control" } })  
  23.                 @Html.ValidationMessageFor(model => model.FullName, "", new { @class = "text-danger" })  
  24.             </div>  
  25.         </div>  
  26.   
  27.         <div class="form-group">  
  28.             @Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "control-label col-md-2" })  
  29.             <div class="col-md-10">  
  30.                 @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } })  
  31.                 @Html.ValidationMessageFor(model => model.Address, "", new { @class = "text-danger" })  
  32.             </div>  
  33.         </div>  
  34.   
  35.         <div class="form-group">  
  36.             @Html.LabelFor(model => model.Phone, htmlAttributes: new { @class = "control-label col-md-2" })  
  37.             <div class="col-md-10">  
  38.                 @Html.EditorFor(model => model.Phone, new { htmlAttributes = new { @class = "form-control" } })  
  39.                 @Html.ValidationMessageFor(model => model.Phone, "", new { @class = "text-danger" })  
  40.             </div>  
  41.         </div>  
  42.   
  43.         <div class="form-group">  
  44.             @Html.LabelRequired("Email", "*", "control-label col-md-2")  
  45.             <div class="col-md-10">  
  46.                 @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })  
  47.                 @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })  
  48.             </div>  
  49.         </div>  
  50.   
  51.         <div class="form-group">  
  52.             <div class="col-md-offset-2 col-md-10">  
  53.                 <input type="submit" value="Create" class="btn btn-default" />  
  54.             </div>  
  55.         </div>  
  56.     </div>  
  57. }  
  58.   
  59. <div>  
  60.     @Html.ActionLink("Back to List", "Index")  
  61. </div>  
  62.   
  63. @section Scripts {  
  64.     @Scripts.Render("~/bundles/jqueryval")  
  65. }  
OUTPUT
 
Create Label Required HTML Helper With Required Symbol 
 
Happy Coding.


Similar Articles