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

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 do datepicker da interface do usuário do jQuery em um aplicativo Web ASP.NET MVC.

Adicionando um modelo para editar datas

Nesta seção, você criará um modelo para editar datas que serão aplicadas quando ASP.NET MVC exibir a interface do usuário para editar propriedades de modelo marcadas com a enumeração Date do atributo DataType . O modelo renderizará apenas a data; o tempo não será exibido. No modelo, você usará o calendário pop-up datepicker da interface do usuário do jQuery para fornecer uma maneira de editar datas.

Para começar, abra o arquivo Movie.cs e adicione o atributo DataType com a enumeração Date à ReleaseDate propriedade , conforme mostrado no seguinte código:

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

Esse código faz com que o ReleaseDate campo seja exibido sem a hora em modelos de exibição e modelos de edição. Se o aplicativo contiver um modelo date.cshtml na pasta Views\Shared\EditorTemplates ou na pasta Views\Movies\EditorTemplates , esse modelo será usado para renderizar qualquer DateTime propriedade durante a edição. Caso contrário, o sistema de modelagem ASP.NET interno exibirá a propriedade como uma data.

Pressione CTRL+F5 para executar o aplicativo. Selecione um link de edição para verificar se o campo de entrada da data de lançamento está mostrando apenas a data.

Em Gerenciador de Soluções, expanda a pasta Exibições, expanda a pasta Compartilhado e clique com o botão direito do mouse na pasta Views\Shared\EditorTemplates.

Clique em Adicionar e em Exibir. A caixa de diálogo Adicionar Exibição é exibida.

Na caixa Nome do modo de exibição, digite "Data".

Selecione a caixa Criar como uma exibição parcial marcar. Verifique se as caixas Usar um layout ou master e Criar uma exibição fortemente tipada marcar não estão selecionadas.

Clique em Adicionar. O modelo Views\Shared\EditorTemplates\Date.cshtml é criado.

Adicione o código a seguir ao modelo Views\Shared\EditorTemplates\Date.cshtml .

@model DateTime
Using Date Template
@Html.TextBox("", String.Format("{0:d}", Model.ToShortDateString()),
  new { @class = "datefield", type = "date"  })

A primeira linha declara o modelo como um DateTime tipo. Embora você não precise declarar o tipo de modelo em modelos de edição e exibição, é uma prática recomendada para que você obtenha a verificação em tempo de compilação do modelo que está sendo passado para o modo de exibição. (Outro benefício é que você obtém o IntelliSense para o modelo na exibição no Visual Studio.) Se o tipo de modelo não for declarado, ASP.NET MVC o considerará um tipo dinâmico e não haverá verificação de tipo em tempo de compilação. Se você declarar o modelo como um DateTime tipo, ele se tornará fortemente tipado.

A segunda linha é apenas a marcação HTML literal que exibe "Usando modelo de data" antes de um campo de data. Você usará essa linha temporariamente para verificar se esse modelo de data está sendo usado.

A próxima linha é um auxiliar Html.TextBox que renderiza um input campo que é uma caixa de texto. O terceiro parâmetro para o auxiliar usa um tipo anônimo para definir a classe da caixa datefield de texto como e o tipo como date. (Como class é um reservado em C#, você precisa usar o @ caractere para escapar do class atributo no analisador C#.)

O date tipo é um tipo de entrada HTML5 que permite que navegadores com reconhecimento html5 renderizem um controle de calendário HTML5. Posteriormente, você adicionará algum JavaScript para conectar o datepicker jQuery ao Html.TextBox elemento usando a datefield classe .

Pressione CTRL+F5 para executar o aplicativo. Você pode verificar se a ReleaseDate propriedade no modo de exibição de edição está usando o modelo de edição porque o modelo exibe "Usando modelo de data" logo antes da caixa de entrada de ReleaseDate texto, conforme mostrado nesta imagem:

No navegador, exiba a origem da página. (Por exemplo, clique com o botão direito do mouse na página e selecione Exibir fonte.) O exemplo a seguir mostra algumas das marcações da página, ilustrando os class atributos e type no HTML renderizado.

<input class="datefield" data-val="true" data-val-required="Date is required" 
      id="ReleaseDate" name="ReleaseDate" type="date" value="1/11/1989" />

Retorne ao modelo Views\Shared\EditorTemplates\Date.cshtml e remova a marcação "Usando modelo de data". Agora, o modelo concluído tem esta aparência:

@model DateTime
@Html.TextBox("", String.Format("{0:d}", Model.ToShortDateString()),
  new { @class = "datefield", type = "date" })

Adicionando um calendário pop-up datepicker da interface do usuário do jQuery usando o NuGet

Nesta seção, você adicionará o calendário pop-up do datepicker da interface do usuário do jQuery ao modelo de edição de data. A biblioteca de interface do usuário do jQuery fornece suporte para animação, efeitos avançados e widgets personalizáveis. Ele é criado com base na biblioteca JavaScript jQuery. O calendário pop-up datepicker torna fácil e natural inserir datas usando um calendário em vez de inserir uma cadeia de caracteres. O calendário pop-up também limita os usuários a datas legais — a entrada de texto comum para uma data permite que você insira algo como 2/33/1999 ( 33 de fevereiro de 1999), mas o calendário pop-up do datepicker da interface do usuário jQuery não permitirá isso.

Primeiro, você precisa instalar as bibliotecas de interface do usuário do jQuery. Para fazer isso, você usará o NuGet, que é um gerenciador de pacotes incluído nas versões SP1 do Visual Studio 2010 e do Visual Web Developer.

No Visual Web Developer, no menu Ferramentas , selecione Gerenciador de Pacotes NuGet e, em seguida, selecione Gerenciar Pacotes NuGet.

Observação: se o menu Ferramentas não exibir o comando Gerenciador de Pacotes NuGet , você precisará instalar o NuGet seguindo as instruções na página Instalando o NuGet do site do NuGet.

Se você estiver usando o Visual Studio em vez do Visual Web Developer, no menu Ferramentas , selecione Gerenciador de Pacotes NuGet e, em seguida, selecione Adicionar Referência de Pacote de Biblioteca.

Na caixa de diálogo MVCMovie – Gerenciar Pacotes NuGet , clique na guia Online à esquerda e insira "jQuery.UI" na caixa de pesquisa. Selecione j Query UI Widgets:Datepicker e, em seguida, selecione o botão Instalar.

O NuGet adiciona essas versões de depuração e versões minificadas do jQuery UI Core e do seletor de data da interface do usuário do jQuery ao seu projeto:

• jquery.ui.core.js
• jquery.ui.core.min.js
• jquery.ui.datepicker.js
• jquery.ui.datepicker.min.js

Observação: as versões de depuração (os arquivos sem a extensão .min.js ) são úteis para depuração, mas em um site de produção, você incluiria apenas as versões minificadas.

Para realmente usar o seletor de data jQuery, você precisa criar um script jQuery que conectará o widget de calendário ao modelo de edição. Em Gerenciador de Soluções, clique com o botão direito do mouse na pasta Scripts e selecione Adicionar, Novo Item e Arquivo JScript. Nomeie o arquivo DatePickerReady.js.

Adicione o seguinte código ao arquivo DatePickerReady.js :

$(function () {
    $(".datefield").datepicker(); 
});

Se você não estiver familiarizado com jQuery, aqui está uma breve explicação do que isso faz: a primeira linha é a função "jQuery ready", que é chamada quando todos os elementos DOM em uma página são carregados. A segunda linha seleciona todos os elementos DOM que têm o nome datefieldda classe e invoca a datepicker função para cada um deles. (Lembre-se de que você adicionou a datefield classe ao modelo Views\Shared\EditorTemplates\Date.cshtml anteriormente no tutorial.)

Em seguida, abra o arquivo Views\Shared\_Layout.cshtml . Você precisa adicionar referências aos seguintes arquivos, que são todos necessários para que você possa usar o seletor de data:

• Conteúdo/temas/base/jquery.ui.core.css
• Conteúdo/temas/base/jquery.ui.datepicker.css
• Conteúdo/temas/base/jquery.ui.theme.css
• jquery.ui.core.min.js
• jquery.ui.datepicker.min.js
• DatePickerReady.js

O exemplo a seguir mostra o código real que você deve adicionar na parte inferior do head elemento no arquivo Views\Shared\_Layout.cshtml .

<link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" 
        rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" 
        rel="stylesheet"  type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" 
        rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/DatePickerReady.js")" 
        type="text/javascript"></script>

A seção completa head é mostrada aqui:

<head>
    <meta charset="utf-8" />
    <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/modernizr-1.7.min.js")" 
        type="text/javascript"></script>

    <link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" 
        rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" 
        rel="stylesheet"  type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" 
        rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/DatePickerReady.js")" 
        type="text/javascript"></script>
</head>

O método auxiliar de conteúdo de URL converte o caminho do recurso em um caminho absoluto. Você deve usar para referenciar @URL.Content corretamente esses recursos quando o aplicativo estiver em execução no IIS.

Pressione CTRL+F5 para executar o aplicativo. Selecione um link de edição e coloque o ponto de inserção no campo ReleaseDate . O calendário pop-up da interface do usuário do jQuery é exibido.

Como a maioria dos controles jQuery, o datepicker permite personalizá-lo extensivamente. Para obter informações, consulte Personalização visual: criando um tema de interface do usuário do jQuery no site da interface do usuário do jQuery .

Suporte ao controle de entrada de data HTML5

À medida que mais navegadores dão suporte a HTML5, você desejará usar a entrada HTML5 nativa, como o date elemento de entrada, e não usar o calendário da interface do usuário do jQuery. Você pode adicionar lógica ao seu aplicativo para usar automaticamente controles HTML5 se o navegador der suporte a eles. Para fazer isso, substitua o conteúdo do arquivo DatePickerReady.js pelo seguinte:

if (!Modernizr.inputtypes.date) {
    $(function () {
        $(".datefield").datepicker();
    });
}

A primeira linha desse script usa Modernizr para verificar se há suporte para a entrada de data HTML5. Se não houver suporte, o seletor de data da interface do usuário do jQuery será conectado. (Modernizr é uma biblioteca JavaScript de software livre que detecta a disponibilidade de implementações nativas de HTML5 e CSS3. O Modernizr está incluído em qualquer novo ASP.NET projetos MVC que você criar.)

Depois de fazer essa alteração, você pode testá-la usando um navegador que dá suporte a HTML5, como Opera 11. Execute o aplicativo usando um navegador compatível com HTML5 e edite uma entrada de filme. O controle de data HTML5 é usado em vez do calendário pop-up da interface do usuário jQuery:

Como novas versões de navegadores estão implementando HTML5 incrementalmente, uma boa abordagem por enquanto é adicionar código ao seu site que acomoda uma ampla variedade de suporte a HTML5. Por exemplo, um script deDatePickerReady.js mais robusto é mostrado abaixo que permite que seu site dê suporte a navegadores que dão suporte apenas parcialmente ao controle de data HTML5.

if (!Modernizr.inputtypes.date) {
    $(function () {
        $("input[type='date']")
                    .datepicker()
                    .get(0)
                    .setAttribute("type", "text");
    })
}

Esse script seleciona elementos HTML5 input do tipo date que não dão suporte total ao controle de data HTML5. Para esses elementos, ele conecta o calendário pop-up da interface do usuário jQuery e, em seguida, altera o type atributo de date para text. Ao alterar o atributo de date para , o type suporte parcial à textdata HTML5 é eliminado. Um script deDatePickerReady.js ainda mais robusto pode ser encontrado no JSFIDDLE.

Adicionando datas anuláveis aos modelos

Se você usar um dos modelos de data existentes e passar uma data nula, receberá um erro em tempo de execução. Para tornar os modelos de data mais robustos, você os alterará para lidar com valores nulos. Para dar suporte a datas anuláveis, altere o código em Views\Shared\DisplayTemplates\DateTime.cshtml para o seguinte:

@model Nullable<DateTime>
@(Model != null ? string.Format("{0:d}", Model) : string.Empty)

O código retorna uma cadeia de caracteres vazia quando o modelo é nulo.

Altere o código no arquivo Views\Shared\EditorTemplates\Date.cshtml para o seguinte:

@model Nullable<DateTime>

 @{
    DateTime dt = DateTime.Now;
    if (Model != null)
    {
       dt  = (System.DateTime) Model;
   
    }
    @Html.TextBox("", String.Format("{0:d}", dt.ToShortDateString()), new { @class = "datefield", type = "date"  })
}

Quando esse código é executado, se o modelo não for nulo, o valor do DateTime modelo será usado. Se o modelo for nulo, a data atual será usada.

Encapsulamento

Este tutorial abordou os conceitos básicos de ASP.NET auxiliares modelos e mostra como usar o calendário pop-up jQuery UI datepicker em um aplicativo MVC ASP.NET. Para obter mais informações, experimente estes recursos:

• Para obter informações sobre a interface do usuário do jQuery, consulte jQuery UI.
• Para obter informações sobre como localizar o controle datepicker, consulte UI/Datepicker/Localization.
• Para obter mais informações sobre os modelos de MVC ASP.NET, consulte a série de blogs de Brad Wilson sobre modelos de MVC 2 ASP.NET. Embora a série tenha sido escrita para ASP.NET MVC 2, o material ainda se aplica à versão atual do ASP.NET MVC.

Anterior