Como colocar uma máscara de formatação em um textbox ao desenvolver uma aplicação usando ASP.NET MVC? Essa é uma das primeiras dúvidas de um iniciante nesse novo framework.

Resolvi então documentar um passo-a-passo da implementação da solução.

Cenário

O usuário deverá ser obrigado a seguir uma formatação padrão (dd/MM/yyyy) nos campos de data do sistema. O preenchimento do campo deve ser facilitado ao ponto do usuário digitar apenas os números de uma data e o sistema acrescentar as barras de separação automaticamente. Serão dezenas de campos com esse mesmo comportamento.

Solução

1) Criar um uma View como modelo de edição que será responsável por renderizar o HTML e Javascripts necessários para dar inteligência a esse campo.

Crie um arquivo chamado DateTime.cshtml dentro de ~/Views/Shared/EditorTemplates/ e o seu template irá automaticamente ser aplicado a todos os campos do tipo System.DateTime.

@model Nullable<datetime>

@if (Model.HasValue)
{
    @Html.TextBox(“”, string.Format(“{0:dd/MM/yyyy}”, Model.Value))
}
else
{
   @Html.TextBox(“”, string.Format(“{0:dd/MM/yyyy}”, DateTime.Now))
}

@{
    string id = ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(“”);
}

<script type="text/javascript">
    $(document).ready(function ()
    {
        $("#@id").mask("99/99/9999");
    });
</script>

2) Apenas como exemplo, criamos um modelo super simples:

public class Jogador
{
    public int Nome { get; set; }
    public DateTime DataNascimento { get; set; }
}

3) Acrescente um controlador e uma Action como essa:

public ActionResult Create()
{
    return View();
}

4) Usaremos a View gerada automaticamente pelo Visual Studio:

@model MvcMask.Models.Jogador

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Create</h2>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Jogador</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Nome)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Nome)
            @Html.ValidationMessageFor(model => model.Nome)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.DataNascimento)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.DataNascimento)
            @Html.ValidationMessageFor(model => model.DataNascimento)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

5) Baixe o arquivo Javascript http://cloud.github.com/downloads/digitalBush/jquery.maskedinput/jquery.maskedinput-1.3.js e coloque na pasta ~/Scripts/ e depois insira no seu arquivo _layout.cshtml a referência:

<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.maskedinput-1.3.js")" type="text/javascript"></script>
</head>

6) Ao final do nosso passo-a-passo teremos uma telinha como essa onde o usuário tem um campo formatado como data e com máscara.

image