Uma das necessidades ao mudar de WebForms para MVC é em como compensar a “falta” da quantidade de componentes disponibilizados pelo WebForms. Quando falamos em componentes, muitas pessoas (inclusive eu) já pensam no famoso componente calendar.
A biblioteca JQuery UI
Para compensar a “falta” de componentes, temos em mão um biblioteca muito poderosa chamada JQuery UI que permite que criemos interfaces poderosas, pois, ela estende as funcionalidades da biblioteca JQuery fornecendo componentes muito bonitos e fáceis de usar.
É uma biblioteca open source, ou seja, temos acesso ao modo como os componentes são criados e podemos customizá-los conforme a nossa necessidade. Lembrando que o Visual Studio fornece suporte intellisense para JavaScript, o que nos ajuda nessa tarefa.
Criando a aplicação
Crie então uma aplicação ASP NET MVC 3 com o nome de Calendar e selecione o Empty Template. Esta aplicação será bem simples, exibirá um formulário contendo apenas o nome e a data de nascimento para o usuário efetuar o seu cadastro. A seleção da data de nascimento será feita pelo componente de calendário da JQuery UI.
Por padrão as bibliotecas Jquery e Jquery UI já vêm inclusas nos projetos MVC, dentro da pasta Scripts. Conforme abaixo:
Caso você queira obter a última versão da JQuery UI, podemos efetuar o download no site: http://jqueryui.com/download.
Vamos então criar a nossa classe pessoa, que deverá ser criada dentro da pasta Model do nosso projeto, conforme abaixo:
namespace Calendar.Models
{
public class Pessoa
{
[Required(ErrorMessage = "O campo nome é obrigatório")]
public string Nome { get; set; }
[Required(ErrorMessage = "O campo data de nascimento é obrigatório")]
[Display(Name = "Data de Nascimento")]
public DateTime DataDeNascimento { get; set; }
}
}
Observe que estou usando Data Annotation para efetuar a validação dos dados.
Após isso, adicione um controller ao nosso projeto chamado CadastroController e selecione o template Empty controller, conforme abaixo:
Após o controller ser criado vamos criar os nossos Action Methods. Então, adicione o código abaixo:
namespace Calendar.Controllers
{
public class CadastroController : Controller
{
public ViewResult Cadastrar()
{
return View();
}
[HttpPost]
public ActionResult Cadastrar(Pessoa pessoa)
{
if (ModelState.IsValid)
{
// Persiste a pessoa no banco ....
return RedirectToAction("CadastroEfetuado", pessoa);
}
return View();
}
public string CadastroEfetuado(Pessoa pessoa)
{
return string.Format("Obrigado por se cadastrar {0}, lembraremos do seu aniverário no dia {1}",
pessoa.Nome, string.Format("{0:dd/MM}", pessoa.DataDeNascimento));
}
}
}
O código acima é bem simples, o método Cadastrar será chamado e a View que exibirá o formulário para o usuário. Após os dados serem preenchidos, o formulário será enviado para o servidor via POST, se tudo estiver preenchido corretamente, efetuamos então a chamada para o método CadastroEfetuado que apenas formata uma string para o usuário. Caso os dados preenchidos não estejam corretos, os erros serão exibidos para o usuário na tela de cadastro.
Após isso, precisamos criar a nossa View, então, clique com o botão direito sobre o método Cadastrar e clique em Add View e selecione a opção para criar uma View tipada. No campo Model class selecione a nossa classe pessoa. Conforme abaixo:
Com a view criada, adicione o código abaixo:
@model Calendar.Models.Pessoa
@{
ViewBag.Title = "Cadastrar";
}
<h2>Cadastro de Pessoas</h2>
<script>
$(function () {
$("#DataDeNascimento").datepicker();
});
</script>
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<div class="demo-description">
@Html.EditorForModel()
</div>
<p>
<input type="submit" value="Cadastrar"/>
</p>
}
Preste atenção nas tags script no código acima, ela será responsável por acionar o componente Datepicker do JQuery quando o usuário clicar no campo de texto. Além disso, definimos um validation summary para exibir os erros de validação para o usuário.
Datepicker? Sim, o nome do componente de calendário do JQuery UI é Datepicker.
Assim, ao executar a aplicação e acessar o endereço http://localhost:porta/cadastro/cadastrar o formulário abaixo será exibido:
Mas, ao clicar no campo Data de Nascimento nada acontece!
Adicionando as referências
Nada aconteceu porque precisamos adicionar a referência para a biblioteca JQuery UI. Abra o arquivo _Layout.cshtml que está dentro da pasta Shared. É dentro deste arquivo que as nossas views são renderizadas, permitindo criar um layout uniforme para o nosso site.
Adicione a referência para a biblioteca JQuery UI e também a referência para o aquivo css que cuidará do estilo do nosso Datepicker:
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" rel="stylesheet"></link>
Após isso, execute a aplicação, acesse a Url mostada anteriormente e clique no campo Data de Nascimento.
O calendário é exibido e ao selecionar uma data o campo texto recebe a data selecionada. Caso você não goste do estilo do Datepicker, pode customizá-lo no site do Jquery UI e baixar a folha de estilo gerada, substituindo o arquivo css existente.
Bug!
Ao clicar no botão para submeter o formulário, um erro é exibido na tela:
Se você reparar, a data selecionada esta no formato mm/dd/yyyy e é isto que está gerando o erro, pois, o MVC tentará efetuar a conversão deste valor para DateTime e o erro acima será gerado.
Para corrigir o erro acima , basta modificar o formato da data do Datepicker. Então, substitua o script da view criado anteriormente para a versão abaixo:
<script>
$(function () {
$("#DataDeNascimento").datepicker({ dateFormat: 'dd/mm/yy' });
});
</script>
Isso irá definir o formato da data. Para maiores detalhes em como customizar o Datepicker sugiro a leitura deste link: http://docs.jquery.com/UI/Datepicker/Localization
Sendo assim, execute a aplicação novamente e preencha os campos do formulário. Repare que agora o formato da data está correto:
Efetue o submit do formulário e a mensagem formatada pelo método CadastroEfetuado será exibida na tela. É importante ressaltar que a propriedade DataDeNascimento recebeu a data já convertida (DateTime) que foi selecionada no Datepicker, isto graças ao framework MVC.
Por hoje é só pessoal!
Comments