Compartilhar via

Usando o calendário pop-up datepicker de interface do usuário html5 e jQuery com ASP.NET MVC – Parte 1

  • Artigo

por Rick Anderson

Este tutorial ensinará os conceitos básicos de como trabalhar com modelos de editor, modelos de exibição e o calendário pop-up jQuery UI datepicker em um aplicativo Web ASP.NET MVC.

Este tutorial ensinará os conceitos básicos de como trabalhar com modelos de editor, modelos de exibição e o calendário pop-up jQuery UI datepicker em um aplicativo Web ASP.NET MVC. Para este tutorial, você pode usar o Microsoft Visual Web Developer 2010 Express Service Pack 1 ("Desenvolvedor do Visual Web"), que é uma versão gratuita do Microsoft Visual Studio ou pode usar o Visual Studio 2010 SP1 se já tiver isso.

Antes de começar, verifique se você instalou os pré-requisitos listados abaixo. Você pode instalar todos eles clicando no seguinte link: Web Platform Installer. Como alternativa, você pode instalar individualmente o software necessário usando os seguintes links:

Se você estiver usando o Visual Studio 2010 em vez do Visual Web Developer, instale os pré-requisitos clicando no seguinte link: pré-requisitos do Visual Studio 2010.

Este tutorial pressupõe que você concluiu o tutorial Introdução com o MVC 3 ou que está familiarizado com ASP.NET desenvolvimento de MVC. Este tutorial começa com o projeto concluído do tutorial Introdução com o MVC 3.

O que você vai construir

Você adicionará modelos (especificamente, modelos de edição e exibição) ao aplicativo de listagem de filmes simples que foi criado no tutorial Introdução com MVC 3. Você também adicionará um calendário pop-up jQuery UI datepicker para simplificar o processo de inserção de datas. A captura de tela a seguir mostra o aplicativo modificado com o calendário pop-up do datepicker da interface do usuário jQuery exibido.

Captura de tela da janela JQuery do filme mostrando o modo de exibição Editar com um campo Título e um campo Data de Lançamento com um calendário pop-up do datepicker da interface do usuário jQuery.

Qualificações que você aprenderá

Eis o que você vai aprender:

  • Como usar atributos do namespace DataAnnotations para controlar o formato dos dados quando eles são exibidos e quando estão no modo de edição.
  • Como criar modelos (editar e exibir modelos) para controlar a formatação de dados.
  • Como adicionar o datepicker da interface do usuário jQuery como uma maneira de inserir campos de data.

Introdução

Se você ainda não tiver o aplicativo de listagem de filmes do projeto inicial, baixe-o:

  • Download.
  • No Windows Explorer, clique com o botão direito do mouse no arquivo MvcMovie.zip e selecione Propriedades.
  • Na caixa de diálogo Propriedades doMvcMovie.zip , selecione Desbloquear. (Desbloquear impede um aviso de segurança que ocorre quando você tenta usar um arquivo .zip que você baixou da Web).

Captura de tela mostrando a caixa Propriedades do zip do ponto de filme Mvc com a seção Segurança e o botão Desbloquear realçados com um retângulo vermelho.

Clique com o botão direito do mouse no arquivoMvcMovie.zipe selecione Extrair Tudo para descompactar o arquivo. No Visual Web Developer ou no Visual Studio 2010, abra o arquivo MvcMovieCS_TU.sln .

Em Gerenciador de Soluções, clique duas vezes em Views\Shared\_Layout.cshtml para abri-lo. Altere o H1 cabeçalho de MVC Movie App para Movie jQuery. Pressione CTRL+F5 para executar o aplicativo e clique na guia Página Inicial , que leva você ao Index método do controlador de filme. Para experimentar o aplicativo, selecione o link Editar e o link Detalhes de um dos filmes. Observe que, nas exibições Índice, Edição e Detalhes, a data de lançamento e o preço são bem formatados:

Captura de tela da janela Filme jQuery mostrando a exibição Detalhes com os valores definidos para o filme selecionado listado.

A formatação para a data e o preço é o resultado do uso do atributo DisplayFormat nas propriedades da Movie classe .

Abra o arquivo Movie.cs e comente o DisplayFormat atributo nas ReleaseDate propriedades e Price . A classe resultante Movie tem esta aparência:

public class Movie {
    public int ID { get; set; }

    [Required(ErrorMessage = "Title is required")]
    public string Title { get; set; }

    //  [DisplayFormat(DataFormatString = "{0:d}")]
    public DateTime ReleaseDate { get; set; }

    [Required(ErrorMessage = "Genre must be specified")]
    public string Genre { get; set; }

    [Range(1, 100, ErrorMessage = "Price must be between $1 and $100")]
    //[DisplayFormat(DataFormatString = "{0:c}")]
    public decimal Price { get; set; }

    [StringLength(5)]
    public string Rating { get; set; }
}

Pressione CTRL+F5 novamente para executar o aplicativo e selecione a guia Página Inicial para exibir a lista de filmes. Desta vez, a data de lançamento mostra a data e a hora e o campo de preço não mostra mais o símbolo de moeda. Sua alteração na Movie classe desfez a boa formatação que você viu anteriormente, mas você corrigirá isso em um momento.

Captura de tela da janela Filme jQuery mostrando a exibição Detalhes com os valores definidos do filme mostrados após as edições feitas no arquivo dot cs do Filme.

Usando o atributo DataAnnotations DataType para especificar o tipo de dados

Substitua o atributo comentado DisplayFormat para a ReleaseDate propriedade pelo atributo DataType usando a Date enumeração . Substitua o DisplayFormat atributo da Price propriedade pelo atributo DataType novamente, desta vez usando a Currency enumeração . É assim que o código concluído se parece:

public class Movie {
    public int ID { get; set; }

    [Required(ErrorMessage = "Title is required")]
    public string Title { get; set; }

    [DataType(DataType.Date)]
    public DateTime ReleaseDate { get; set; }

    [Required(ErrorMessage = "Genre must be specified")]
    public string Genre { get; set; }

    [Range(1, 100, ErrorMessage = "Price must be between $1 and $100")]
    [DataType(DataType.Currency)]
    public decimal Price { get; set; }

    [StringLength(5)]
    public string Rating { get; set; }
}

Executar o aplicativo. Agora, a data de lançamento e as propriedades de preço são formatadas corretamente (ou seja, usando formatos de data e moeda apropriados). O atributo DataType fornece metadados de tipo para os modelos internos ASP.NET MVC para que os campos sejam renderizados no formato correto. Usar o DataType atributo é preferível ao uso do DisplayFormat atributo originalmente no código, pois o DataType atributo torna o modelo mais limpo e flexível para fins como internacionalização.

Na próxima seção, você verá como criar modelos personalizados para exibir campos de data.

Próximo