MVC Masked Input

One can use jquery to mask the inputs.There are quiet a few good plugins available for this e.g. http://digitalbush.com/projects/masked-input-plugin/

Only drawback to this approach is we need to link jquery function for each input to be masked.
Alternate approach can be creating a data annotation for mask and use it on model/viwModel.

Step 1: Create a mask attribute

Common\CustomAttributes\MaskAttribute.cs

1. using System;
2. using System.Collections.Generic;
3. using System.Linq;
4. using System.Web;
5. using System.Web.Mvc;
6.  
7. namespace MvcLists.Common.CustomAttributes
8. {
9.     [AttributeUsage(AttributeTargets.Property, AllowMultiple = false)]
10.     public class MaskAttribute:Attribute,IMetadataAware
11.     {
12.         private string _mask = string.Empty;
13.         public MaskAttribute(string mask)
14.         {
15.             _mask = mask;
16.         }
17.  
18.         public string Mask
19.         {
20.             get { return _mask; }
21.         }
22.  
23.         private const string ScriptText = "<script type='text/javascript'>" +
24.                                            "$(document).ready(function () {{" +
25.                                            "$('#{0}').mask('{1}');}});</script>";
26.  
27.         public const string templateHint = "_maskedInput";
28.  
29.         private int _count;
30.  
31.         public string Id
32.         {
33.             get { return "maskedInput_" + _count; }
34.         }
35.  
36.         internal HttpContextBase Context
37.         {
38.             get { return new HttpContextWrapper(HttpContext.Current); }
39.         }
40.  
41.         public void OnMetadataCreated(ModelMetadata metadata)
42.         {
43.             var list = Context.Items["Scripts"] as IList<string> ?? new List<string>();
44.             _count = list.Count;
45.             metadata.TemplateHint = templateHint;
46.             metadata.AdditionalValues[templateHint] = Id;
47.             list.Add(string.Format(ScriptText, Id, Mask));
48.             Context.Items["Scripts"] = list;
49.         }
50.     }
51. }

Step 2:Create a partial view in EditorTemplates and add an extension method for ViewDataDictionary to get the attribute for the property

Views\Shared\EditorTemplates\_mask.cshtml

1. @using MvcLists.Common.CustomAttributes
2. @model System.String
3. @{ var maskedInput = ViewData.GetModelAttribute<MaskAttribute>();
4.    if (maskedInput != null)
5.    {
6.         <div class="editor-label">
7.             @Html.LabelForModel()
8.         </div>
9.         <div class="editor-field">
10.             @Html.TextBoxFor(m => m, new { id = ViewData.ModelMetadata.AdditionalValues[MaskAttribute.templateHint] })
11.         </div>
12.    }
13. }

Common\MvcExtensions\ViewDataExtensions.cs

1. using System;
2. using System.Collections.Generic;
3. using System.Linq;
4. using System.Web;
5. using System.Web.Mvc;
6.  
7. namespace MvcLists.Common.MvcExtensions
8. {
9.     public static class ViewDataExtensions
10.     {
11.         public static TAttribute GetModelAttribute<TAttribute>(this ViewDataDictionary viewData,bool inherit=false) where TAttribute:Attribute
12.         {
13.             if(viewData==null) throw new ArgumentException("ViewData");
14.             var containerType = viewData.ModelMetadata.ContainerType;
15.             return
16.                 ((TAttribute[])
17.                  containerType.GetProperty(viewData.ModelMetadata.PropertyName).GetCustomAttributes(typeof (TAttribute),
18.                                                                                                     inherit)).
19.                     FirstOrDefault();
20.                     
21.         }
22.     }
23. }

Common\HtmlHelpers\HtmlHelpers.cs

22. public static IHtmlString RenderScripts(this HtmlHelper htmlHelper)
23.         {
24.             var scripts = htmlHelper.ViewContext.HttpContext.Items["Scripts"] as IList<string>;
25.             if (scripts != null)
26.             {
27.                 var builder = new StringBuilder();
28.                 foreach (var script in scripts)
29.                 {
30.                     builder.AppendLine(script);
31.                 }
32.                 return new MvcHtmlString(builder.ToString());
33.             }
34.             return null;
35.         }

Step 3: Register this new extension in web.config of Views folder.

Web.config

10.  
11.   < system.web.webPages.razor >
12.     < host factoryType= "System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
13.     < pages pageBaseType= "System.Web.Mvc.WebViewPage" >
14.       < namespaces >
15.         < add namespace= "System.Web.Mvc" />
16.         < add namespace= "System.Web.Mvc.Ajax" />
17.         < add namespace= "System.Web.Mvc.Html" />
18.         < add namespace= "System.Web.Routing" />
19.         < add namespace= "MvcLists.Common.MvcExtensions" />
20.       </ namespaces >
21.     </ pages >
22.   </ system.web.webPages.razor >

Step 4: Use this attribute on Model/ViewModels property.

Models\Person.cs

9. public class Person
10.     {
11.         [Tooltip("Enter First Name")]
12.         public string FirstName { get; set; }
13.         [Tooltip("Enter Last Name")]
14.         public string LastName { get; set; }
15.         [Tooltip("Enter SSN")]
16.         [Mask("999-99-9999")]
17.         public string SSN { get; set; }
18.         [Tooltip("Enter Age")]
19.         [Mask("99")]
20.         public string Age { get; set; }
21.         [Mask("999-999-9999")]
22.         [Tooltip("Enter Phone")]
23.         public string Phone { get; set; }
24.         [Mask("99999-9999")]
25.         [Tooltip("Enter Zip Code")]
26.         public string ZipCode { get; set; }
27.         [Mask("9999-9999-9999-9999")]
28.         [Tooltip("Enter Credit Card")]
29.         public string CreaditCard { get; set; }
30.  
31.     }

Step 5: Render the UI.

Views\Person\Index.cshtml

12. @using (Html.BeginForm("Index","Person"))
13. {
14.     @Html.ValidationSummary(true)
15.     <fieldset>
16.         <legend>Person</legend>
17.         <div class="editor-label">
18.             @Html.LabelFor(model => model.FirstName)
19.         </div>
20.         <div class="editor-field">
21.             @Html.TextBoxFor(model => model.FirstName,new{title=@Html.TooltipFor(x=>x.FirstName)})
22.             @Html.ValidationMessageFor(model => model.FirstName)
23.         </div>
24.         <div class="editor-label">
25.             @Html.LabelFor(model => model.LastName)
26.         </div>
27.         <div class="editor-field">
28.             @Html.TextBoxFor(model => model.LastName,new{title=Html.TooltipFor(x=>x.LastName)})
29.             @Html.ValidationMessageFor(model => model.LastName)
30.         </div>
31.         @Html.EditorFor(x => x.SSN)
32.         @Html.EditorFor(x => x.Age)
33.         @Html.EditorFor(x => x.Phone)
34.         @Html.EditorFor(x => x.CreaditCard)
35.         @Html.EditorFor(x => x.ZipCode)
36.         <p>
37.             <input type="submit" value="Create" />
38.         </p>
39.     </fieldset>
40. }

Output: