Nota do autor

Caros colegas de TI,eu o autor deste blog,no momento estou em busca de novos horizontes,novas oportunidades enfim um novo emprego.

Se alguém souber de  alguma vaga  pra desenvolvedor .NET,favor me faça uma indicação.

Abraços

Anúncios

ASP.NET MVC com Validação Jquery e ValidationSummary

Importante:Se você estiver usando a versão ASP.NET MVC 2 (Release Candidate 2),ela não vem com arquivo MicrosoftMvcJqueryValidation.js que vem incluído já na versão ASP.NET MVC 2 (Beta).Esse arquivo é essencial para o que é demonstrado nesse post.Por isso se não tive-lo baixe o código fonte CodePlex ASP.NET do MVC,e inclua o arquivo MicrosoftMvcJqueryValidation.js no seu projeto MVC,na pasta Scripts.Quando fizer o download do código fonte zipado,o caminho onde encontrará o arquivo é:Src/MvcFutureFiles

Uma das grandes caracteristicas do ASP.NET MVC 2.0 é o suporte a validação no cliente.Esta validação no cliente é possível com as libraries ASP.NET AJAX(MicrosoftMvcValidation.js) e Jquery(MicrosoftMvcJqueryValidation.js).Ambos,ASP.NET Ajax e Jquery funcionam bem.

Quando você usa validação ASP.NET Ajax no ASP.NET MVC,o HTML Helper ValidationSummary ajuda você a mostrar os erros quando um formulario invalido é enviado,mas quando você usa  validação Jquery no ASP.NET MVC,o HTML Helper ValidationSummary não mostra os erros de validação quando um formulario inválido é submetido.Nesse post eu vou demonstrar como fazer com que seja possível mostrar erros de validação quando um fomulário inválido é submetido usando a validação com Jquery.

Descrição

Vamos criar uma aplicação de exemplo para mostrar isso.Primeiro de tudo crie uma aplicação MVC.Depois abra o HomeController.cs e entre com o seguinte código:

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

[HttpPost]
public ActionResult Index(Student s)
{
if(!ModelState.IsValid)
return View();
return Content(“Thank you for submitting your form”);
}

Depois vamos criar uma nova classe chamada Student.cs dentro do Model e entrar com o seguinte código:

public class Student
{
[Required]
public string Name { get; set; }

[Required, Range(0, 200)]
public int? Age{ get; set; }
}

Depois vamos adicionar uma View para a action Index e adicionar o seguinte código a esta view:

<%@ Page Language=”C#” MasterPageFile=”~/Views/Shared/Site.Master” Inherits=”System.Web.Mvc.ViewPage<V
alidationSummaryAndJqueryValidation.Models.Student>” %>

<asp:Content ID=”Content1″ ContentPlaceHolderID=”TitleContent” runat=”server”>
Home Page
</asp:Content>

<asp:Content ID=”Content2″ ContentPlaceHolderID=”MainContent” runat=”server”>
<% Html.EnableClientValidation();%>
<%using(Html.BeginForm()){ %>
<%: Html.ValidationSummary() %>
<table>
<tr>
<td>
Name:
</td>
<td>
<%: Html.TextBoxFor(a => a.Name)%>
</td>
<td>
<%: Html.ValidationMessageFor(a => a.Name)%>
</td>
</tr>
<tr>
<td>
Subject:
</td>
<td>
<%: Html.TextBoxFor(a => a.Age)%>
</td>
<td>
<%: Html.ValidationMessageFor(a => a.Age)%>
</td>
</tr>
<tr>
<td colspan=”3″ align=”center”>
<input type=”submit” />
</td>
</tr>
</table>
<%} %>
</asp:Content>

Agora vamos adicionar os scripts necessários para a validação na Master Page,Site.Master:

<script src=”<%=Url.Content(“~/Scripts/MicrosoftAjax.js”)%>” type=”text/javascript”></script>
<script src=”<%=Url.Content(“~/Scripts/MicrosoftMvcAjax.js”)%>” type=”text/javascript”></script>
<script src=”<%=Url.Content(“~/Scripts/MicrosoftMvcValidation.js”)%>” type=”text/javascript”></script>

Agora vamos rodar a aplicação e você verá a seguinte tela:

Isso mostra que o ValidationSummary funcionou como esperado usando ASP.NET Ajax Validation.Agora apenas substitua o script acima pelo script com arquivos do Jquery para validação na Master Page,Site.Master:

<script src=”<%=Url.Content(“~/Scripts/jquery-1.4.1.min.js”)%>”type=”text/javascript”></script>
<script src=”<%=Url.Content(“~/Scripts/jquery.validate.js”)%>” type=”text/javascript”></script>
<script src=”<%=Url.Content(“~/Scripts/MicrosoftMvcJQueryValidation.js”)%>” type=”text/javascript”></script>

Agora rode a aplicação e você verá a seguinte tela:

Isso demonstra que o ValidationSummary não mostra os erros de validação se você usar os arquivos de validação do Jquery.Para fazer com que mostre,abra o arquivo MicrosoftMvcJqueryValidation.js e substitua:

errorClass: “input-validation-error”,

por

invalidHandler: function (form, validator) {
var ul = $(“#validationSummary ul”);
if (ul.length > 0) {
$(“#validationSummary”).addClass(“validation-summary-errors”);
$(“#validationSummary”).removeClass(“validation-summary-valid”);
ul.html(“”);
for (var name in validator.errorList)
ul.append(“<li>” + validator.errorList[name].message + “</li>”)
}
},
errorClass: “input-validation-error”,

O código acima simplesmente mostra o ValidationSummary com os erros de validação quando o evento invalidHandler é disparado.O evento invalidHandler é disparado quando um formulário inválido é enviado.Agora salve o arquivo MicrosoftMvcJqueryValidation.cs e rode a aplicação novamente e você verá que agora o ValidationSummary está funcionando como o esperado.Se você precisar processar alguma coisa quando o formulário for válido,você pode manipula-lo no evento sumbitHandler da mesma forma.

Resumo

O Html Helper ValidationSumamry é usado para mostrar um resumo de todos os erros de validação do formulário.Mas o VlaidationSummary não mostra os erros quando você usa validação cliente com Jquery.Nesse post,eu demonstrei como mostrar erros de validação no ValidationSummary mesmo quando usando validação Jquery.Espero que goste deste artigo,e até a próxima!