mvc, razor with editor view

http://forums.asp.net/post/4647234.aspx

I got above url reference to create date picker and it works very well. I would like to extend the same style with phone number masking(xxx)xxx-xxxx, and  ssn masking (xxx-xx-xxxx),

and hope some experts can share with me how to do it.

Thanks for your helps
solution1368Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Ioannis ParaskevopoulosConnect With a Mentor Commented:
I think you should just allow the user to add a number in these fields when in edit mode. The in display mode you format them as you like.

If you do want to mask the edit (there is no point since you are going to store it as a number) the you can use some js library for this. This google search may help:
https://www.google.gr/search?q=js+masked+input

Giannis
0
 
Ioannis ParaskevopoulosCommented:
Hi,

Take for instance the following model:

    public class User
    {
        public DateTime DateOfBirth { get; set; }
        [UIHint("Phone")]
        public int Phone { get; set; }
        [UIHint("SSN")]
        public int SSN { get; set; }
        //public String Phone { get; set; }
    }

Open in new window


Notice the 'UIHint'. This will tell the engine which template to apply.

And the following Index view:

@using MvcApplication2.Models
@model User
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>
    Index</h2>

<div class="editor-field">
    @Html.DisplayFor(model => model.DateOfBirth)
</div>
<div class="editor-field">
    @Html.DisplayFor(model => model.Phone)
</div>
<div class="editor-field">
    @Html.DisplayFor(model => model.SSN)
</div>

Open in new window


In the Home controller you have the following Action:
        public ActionResult Index()
        {
            Models.User user = new Models.User() 
            { 
                DateOfBirth = DateTime.Parse("16/09/2013"), 
                Phone = 1234567890, 
                SSN = 321654987 
            };
            return View(user);
        }

Open in new window


In your Shared folder add a new folder DisplayTemplates. You may even want to add one for editors, called EditorTemplates.

In the DisplayTemplates folder, add a new view called Phone. This will be the template for your Phone fields. Make sure you make this a partial (check the partial view checkbox).

In this file add the following code:
@model System.Int32
@Html.Label("", (Model != null ? Model.ToString("(###)###-####") : string.Empty))

Open in new window


Similarly add another view in the same folder, called SSN and paste the following code:
@model System.Int32
@Html.Label("", (Model != null ? Model.ToString("(###-##-####)") : string.Empty))

Open in new window


Now you should be ready to go.

Again, keep in mind that, since you don't want the same format for all integers in your views, you have to decorate your properties with the according UIHint.

Good luck,
Giannis
0
 
Ioannis ParaskevopoulosCommented:
By the way, thanks you very much for the article. I am new in MVC too and hadn't noticed that i can actually do this. Now i am much better.... :-)
0
 
solution1368Author Commented:
if I just added to EditorTemplates. Will that work?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.