Blog

Você está aqui: Home » ASP.NET MVC » Campos de data com máscara em ASP.NET MVC 3

27 out 2011

Campos de data com máscara em ASP.NET MVC 3

Postado por | ASP.NET MVC,Desenvolvimento,Destaque
4

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


Sobre Ivan Paulovich

Ivan Paulovich escreveu 165 posts nesse blog.

@ivanpaulovich é um Desenvolvedor Sharepoint com experiência internacional no Brasil e na Dinamarca. É MVP ASP.NET e possui mais de 7 anos de experiência com .NET Framework. Possui as certificações MCPD, MCTS, MCSD, MCAD, MCDBA e MCP. Mantem projetos open-source no Codeplex e já fez inúmeras palestras inclusive para o Tech-Ed Brasil. Completamente apaixonado pela platforma .NET, gosta do desenvolvimento de aplicações distribuídas e desenvolvimento Web especialmente com ASP.NET MVC.

Comment

  • Normando
    19 de novembro de 2011 at 13:18

    Boa dica, agora me diz, na minha tabela o campo hora aparece 00:00:00, tem a solução pronta ai?

  • Rene
    30 de maio de 2012 at 10:28

    amigo, posso estar fazendo confusao mas no jquery voce utilizou “#@id” mas, os campos dos formularios estao com uma classe “editor-field” , assim, o jquery ficaria – > “.editor-field” ? Não entendi esta parte

  • Sidney
    5 de julho de 2012 at 16:30

    Rapaz, funcionou beleza, valeu! Obrigado.

    Rene, se fizer exatamente o passo-a-passo do Ivan dá certo. Acho que você não colocou o arquivo na pasta de template como ele disse no início, tem que usar “#@id” mesmo, a própria engine vai resolver a referência.

  • João Marcelo
    7 de setembro de 2012 at 17:56

    eu não tenho essa pasta editor templates no meu projeto, essa pasta é uma pasta comum ou tem alguma biblioteca específica para datetime, pois o modelo está dando erro de referência.

Deixe um comentário

%d bloggers like this: