Click here to Skip to main content
Click here to Skip to main content

Tagged as

Go to top

Input Masking in MVC 4 using Data Annotation

, 24 Aug 2013
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>
    <ol>
        <li>@Html.EditorFor(m=> m.Date)
        </li>
           <li>@Html.EditorFor(m=> m.Phone)
        </li>
        <li>@Html.EditorFor(m=> m.Phone_Ext)
        </li>
        <li>@Html.EditorFor(m=> m.TaxID)
        </li>
        <li>@Html.EditorFor(m=> m.SSN)
        </li>
        <li>@Html.EditorFor(m=> m.ProductKey)
        </li>
        <li>@Html.EditorFor(m=> m.IP)
        </li>
    </ol> 

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

 @model String

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

Comments and Discussions

 
QuestionCan't make this work (MVC 3) PinmemberMember 844665017-Jun-14 22:50 
AnswerRe: Can't make this work (MVC 3) PinmemberAnkit Sarkar25-Jul-14 20:35 
Questiongood PinmemberMember 105104506-Mar-14 18:47 
QuestionMade a change to use MVC5 and not using the mask Pinmemberg.david.carter25-Feb-14 10:06 
QuestionPublish on Internet Domain PinmemberMember 1040022514-Nov-13 6:26 
QuestionQuestion PinmemberMember 1040022513-Nov-13 14:22 
AnswerRe: Question PinmemberAnkit Sarkar13-Nov-13 15:18 
AnswerRe: Question PinmemberMember 1040022515-Nov-13 8:18 
QuestionWhere can I download . PinmemberMember 39187109-Oct-13 2:55 
AnswerRe: Where can I download . PinmemberAnkit Sarkar9-Oct-13 16:12 
GeneralMy vote of 5 PinmemberdgDavidGreene26-Aug-13 11:42 
GeneralMy vote of 5 PinmemberAnurag Gandhi25-Aug-13 3:18 
GeneralMy vote of 5 PinprofessionalHasibul 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 | Mobile
Web02 | 2.8.140916.1 | Last Updated 24 Aug 2013
Article Copyright 2013 by Ankit Sarkar
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid