Em outro post [veja aqui] mostre como é simples criar formulários com Ajax Helper, neste post vou mostrar como você pode utilizar o ModelState e os Validations Helper em um formulário criado com Ajax Helper.

Entendendo o ModelState

Primeiro precisamos entender como funciona o ModelState.A classe Controller possui uma propriedade chamada ModelState do tipo ModelStateDictionary, o método UpdateModel atualiza as propriedades de um modelo com os valores dos inputs submetidos ao servidor e caso um erro ocorra durante esse processo esse erro é adicionado no ModelState.

Você pode preenche a propriedade ModelState manualmente se quiser adicionando o nome da propriedade com erro é uma mensagem amigável para o usuário, por exemplo.

public ActionResult Salvar(Cliente cliente)
{
    if (ModelState.IsValid)
    {
        if (String.IsNullOrEmpty(cliente.Nome))
            this.ModelState.AddModelError("Nome", "Informe o nome.");
    }

    //Restante da rotina....
}

Importante: no trecho de código acima eu faço as validações do meu modelo direto no Controller a titulo de exemplo em uma aplicação real essas validações estaria em outro lugar lembre-se que o Controller deve controlar a interações do usuário com o seu modelo, somente isso e mais nada.

Validation Helper

Existe dois Validations Helper dentro do framework do ASP.NET MVC ValidationMessage e ValidationSummary os dois utilizam o ModelState.Veja esse exemplo de código.

Imagem 1 - Trecho de código com Validation.

O ValidationSummary exibe um resumo com todos os erros contidos no ModelState, ele utiliza <ul><li /></ul> para listar todos os erros e você pode passar uma mensagem para o usuário que será exibida dentro de um <span>...<span/> antes da lista de erros , veja um exemplo na imagem abaixo:

Imagem 2 - Resultado do ValidationSummary.

O ValidationMessage é utilizado para exibir um erro referente a uma propriedade do seu modelo, quando adicionamos um erro para a propriedade “Nome” no ModelState o ValidationMessage exibe a mensagem de erro passada como parâmetro ou recupera a mensagem do ModelState, no exemplo da Imagem 2 um “*” é exibido no lugar da mensagem de erro contida no ModelState.

Criando um exemplo

Após essa breve explicação podemos criar um formulário com o Ajax Helper e utilizar os Validations Helper para mostrar os erros do modelo contidos no ModelState.

Para utilizar o ModelState em solicitações Ajax devemos criar uma PartialView com todos os inputs de um modelo é retorna essa PartialView caso o modelo não seja valido, vamos iniciar o exemplo com a construção da PartialView, veja ó código abaixo.

Imagem 3 - Código da Partial View.

Note que os Validations Helpers estão na PartialView do mesmo jeito que você faria em uma View, agora vamos montar uma View com Ajax Helper que vai renderizar essa Partial,para esse exemplo utilizei a View "Index" do Controller "Home", veja o código completo abaixo.

Imagem 4 - Código da View Index do Controller Home.

A View "Index" adiciona os dois arquivos JavaScript da biblioteca da Microsoft para Ajax e para montar o formulário utilizo o Helper Ajax, nesse [link] você encontra um post explicando todas as propriedades da classe AjaxOptions, nesse exemplo utilizei apenas duas propriedades UpdateTargetId e InsertMode, no UpdateTargetId defini o elemento que vai receber o resultado do servidor para solicitação Ajax,e no InsertMode defini que um novo resultado deve sempre sobrepor o resultado antigo. Importante notar que a PartialView é renderizada dentro da "divPartial" que é a div recebe o resultado da solicitação Ajax.

Vamos definir um Model bem simples para esse exemplo, adicione uma classe na pasta Models chamada Cliente e veja o código completo abaixo.

public class Cliente
{
    public string Nome { get; set; }
    public string Telefone { get; set; }
    public string Endereco { get; set; }
}

Para finalizar vamos atualizar o Controller Home, veja o código completo abaixo.

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Salvar(Cliente cliente)
    {
        if (ModelState.IsValid)
        {
            if (String.IsNullOrEmpty(cliente.Nome))
                this.ModelState.AddModelError("Nome", "Informe o nome.");

            if (String.IsNullOrEmpty(cliente.Endereco))
                this.ModelState.AddModelError("Endereco", "Informe o endereço.");

            if (String.IsNullOrEmpty(cliente.Telefone))
                this.ModelState.AddModelError("Telefone", "Informe o telefone.");
        }

        //resto da sua rotina

        return this.PartialView("ClientePartial");
    }

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

Veja o resulto esperado na imagem abaixo.

Imagem 5 - Resultado esperado.

Conclusão

Sem sofrimento criamos um formulário com Ajax Helper e Validations Helper, você poderia trabalhar de outra forma, por exemplo, poderia receber um objeto serializado com todos os erros e exibir os erros para o usuário mais tudo isso seria feito por você sem o auxilio dos Helpers, eu acho isso muito ruim prefiro fazer as coisa sem sofrimento!

Como de costume segue o código fonte em C# ou VB.NET.

Daniel Fonseca Castro