Click here to Skip to main content
15,438,095 members
Articles / Web Development / HTML
Posted 24 Aug 2013


21 bookmarked

Input Masking in MVC 4 using Data Annotation

Rate me:
Please Sign up or sign in to vote.
4.86/5 (14 votes)
24 Aug 2013CPOL1 min read
Input masking in model using data annotation


If we want to present dates, phone numbers, etc., you would like them to enter the data in a certain format. You can use easily jquery to mask the input, but the only drawback to this approach is that we need to add those functions for each input to be masked.

In MVC 3/ MVC 4, we can easily achieve this by creating custom data annotation and use it on model.


When I am searching on the Internet, I found nothing which provided Input Masking using data annotation. Only this post provided me with some idea. So, I am working on this and solved the problem.

I am using Masked Input Plugin to mask my input.

Using the Code

First of all, we need to create our own Custom Attribute class.

public class InputMaskAttribute : Attribute, IMetadataAware

   private string _mask = string.Empty;

  public InputMaskAttribute(string mask)
          _mask = mask;

      public string Mask
          get { return _mask; }

      private const string ScriptText = "<script type='text/javascript'>" +
                                        "$(document).ready(function () {{" +

      public const string templateHint = "_mask";

      private int _count;

      public string Id
          get { return "maskedInput_" + _count; }

      internal HttpContextBase Context
          get { return new HttpContextWrapper(HttpContext.Current); }

      public void OnMetadataCreated(ModelMetadata metadata)
          var list = Context.Items["Scripts"]
          as IList<string> ?? new List<string>();
          _count = list.Count;
          metadata.TemplateHint = templateHint;
          metadata.AdditionalValues[templateHint] = Id;
          list.Add(string.Format(ScriptText, Id, Mask));
          Context.Items["Scripts"] = list;

Here is the screenshot:

Now, we have to create an extension of View Data.

  public static TAttribute GetModelAttribute<TAttribute>
(this ViewDataDictionary viewData, bool inherit = false) where TAttribute : Attribute
            if (viewData == null) throw new ArgumentException("ViewData");
            var containerType = viewData.ModelMetadata.ContainerType;


and to call the JavaScript, we will implement a method extension called RenderScripts.

public static IHtmlString RenderScripts(this HtmlHelper htmlHelper)
           var scripts = htmlHelper.ViewContext.HttpContext.Items["Scripts"] as IList<string>;
           if (scripts != null)
               var builder = new StringBuilder();
               foreach (var script in scripts)
               return new MvcHtmlString(builder.ToString());
           return null;

Now, we have successfully created a custom attribute. Now, create a Model/ViewModel class and use the newly created attribute.

 public class TestModel
    [Display(Name = "Date")]
    public DateTime Date { get; set; }

    [Display(Name = "Phone")]
    [InputMask("(999) 999-9999")]
    public string Phone { get; set; }

    [Display(Name = "Phone + Ext")]
    [InputMask("(999) 999-9999? x99999")]
    public string Phone_Ext { get; set; }

    [Display(Name = "TaxID")]
    public string TaxID { get; set; }

    [Display(Name = "SSN")]
    public string SSN { get; set; }

    [Display(Name = "ProductKey")]
    public string ProductKey { get; set; }

    [Display(Name = "IP")]
    public string IP { get; set; }

Create a strongly typed view:

<legend>Input Masking</legend>
       <li>@Html.EditorFor(m=> m.Date)
          <li>@Html.EditorFor(m=> m.Phone)
       <li>@Html.EditorFor(m=> m.Phone_Ext)
       <li>@Html.EditorFor(m=> m.TaxID)
       <li>@Html.EditorFor(m=> m.SSN)
       <li>@Html.EditorFor(m=> m.ProductKey)
       <li>@Html.EditorFor(m=> m.IP)

In ~/Views/Shared/EditorTemplates, add this:

 @model String

@{ var maskedInput = ViewData.GetModelAttribute<InputMaskAttribute>();
   if (maskedInput != null)
        <div class="editor-label">
        <div class="editor-field">
            @Html.TextBoxFor(m => m, new 
            { id = ViewData.ModelMetadata.AdditionalValues[InputMaskAttribute.templateHint] })

You are almost done. Just do one thing, add reference of Masked Input Plugin.

@section Scripts
       <script src="~/Scripts/InputMask.js"></script>


Here is the output:


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

Written By
Software Developer Maxmobility Pvt. Ltd.
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

GeneralMy vote of 4 Pin
Heriberto Lugo27-Oct-20 17:03
MemberHeriberto Lugo27-Oct-20 17:03 
Questionall images are missing Pin
Mou_kol14-May-18 22:25
MemberMou_kol14-May-18 22:25 
QuestionNeed some more explanation Pin
Member 84589397-Jul-15 5:19
MemberMember 84589397-Jul-15 5:19 
Questioni cant find the download link in browse code Pin
nymhar7-Jul-15 1:56
Membernymhar7-Jul-15 1:56 
QuestionWhere do the classes all go? Pin
DevYze5-Jul-15 23:26
MemberDevYze5-Jul-15 23:26 
AnswerRe: Where do the classes all go? Pin
Ankit Sarkar6-Jul-15 16:55
MemberAnkit Sarkar6-Jul-15 16:55 
GeneralRe: Where do the classes all go? Pin
DevYze7-Jul-15 1:40
MemberDevYze7-Jul-15 1:40 
QuestionCan't make this work (MVC 3) Pin
Member 844665017-Jun-14 22:50
MemberMember 844665017-Jun-14 22:50 
AnswerRe: Can't make this work (MVC 3) Pin
Ankit Sarkar25-Jul-14 20:35
MemberAnkit Sarkar25-Jul-14 20:35 
Questiongood Pin
Member 105104506-Mar-14 18:47
MemberMember 105104506-Mar-14 18:47 
QuestionMade a change to use MVC5 and not using the mask Pin
g.david.carter25-Feb-14 10:06
Memberg.david.carter25-Feb-14 10:06 
AnswerRe: Made a change to use MVC5 and not using the mask Pin
djarvis817-Sep-14 10:10
Memberdjarvis817-Sep-14 10:10 
AnswerRe: Made a change to use MVC5 and not using the mask Pin
jdog332111-Nov-15 12:19
Memberjdog332111-Nov-15 12:19 
QuestionPublish on Internet Domain Pin
Member 1040022514-Nov-13 6:26
MemberMember 1040022514-Nov-13 6:26 
QuestionQuestion Pin
Member 1040022513-Nov-13 14:22
MemberMember 1040022513-Nov-13 14:22 
AnswerRe: Question Pin
Ankit Sarkar13-Nov-13 15:18
MemberAnkit Sarkar13-Nov-13 15:18 
AnswerRe: Question Pin
Member 1040022515-Nov-13 8:18
MemberMember 1040022515-Nov-13 8:18 
QuestionWhere can I download . Pin
Member 39187109-Oct-13 2:55
MemberMember 39187109-Oct-13 2:55 
AnswerRe: Where can I download . Pin
Ankit Sarkar9-Oct-13 16:12
MemberAnkit Sarkar9-Oct-13 16:12 
GeneralMy vote of 5 Pin
dgDavidGreene26-Aug-13 11:42
MemberdgDavidGreene26-Aug-13 11:42 
GeneralMy vote of 5 Pin
Anurag Gandhi25-Aug-13 3:18
professionalAnurag Gandhi25-Aug-13 3:18 
GeneralMy vote of 5 Pin
Hasibul Haque24-Aug-13 20:00
professionalHasibul Haque24-Aug-13 20:00 

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.