Click here to Skip to main content
11,642,216 members (66,676 online)
Click here to Skip to main content

Input Masking in MVC 4 using Data Annotation

, 24 Aug 2013 CPOL 43.8K 6 16
Rate this:
Please Sign up or sign in to vote.
Input masking in model using data annotation

Introduction

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.

Background

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 () {{" +
                                          "$('#{0}').mask('{1}');}});</script>";

        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;
            return
                ((TAttribute[])
                 containerType.GetProperty(viewData.ModelMetadata.PropertyName).
                 GetCustomAttributes(typeof(TAttribute),
                 inherit)).
                    FirstOrDefault();

        } 

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)
                {
                    builder.AppendLine(script);
                }
                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")]
        [InputMask("99/99/9999")]
        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")]
        [InputMask("99-9999999")]
        public string TaxID { get; set; }

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

        [Display(Name = "ProductKey")]
        [InputMask("a*-999-a999")]
        public string ProductKey { get; set; }

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

Create a strongly typed view:

 <legend>Input Masking</legend>

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

 @model String

@{ var maskedInput = ViewData.GetModelAttribute<InputMaskAttribute>();
   if (maskedInput != null)
   {
        <div class="editor-label">
            @Html.LabelForModel()
        </div>

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

 @section Scripts
    {
        <script src="~/Scripts/InputMask.js"></script>
        @Html.RenderScripts()
    } 

Conclusion

Here is the output:

License

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

Share

About the Author

Ankit Sarkar
Software Developer Maxmobility Pvt. Ltd.
India India
No Biography provided

You may also be interested in...

Comments and Discussions

 
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 
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
memberAnurag 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    Rant Rant    Admin Admin   

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150731.1 | Last Updated 24 Aug 2013
Article Copyright 2013 by Ankit Sarkar
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid