ASP.NET Web API - Criação de select (DropDownList) em cascata, usando Ajax, JQuery e JSON.

Essa semana estava criando um sistema e me deparei com um problema relacionado a select list (nome da tag HTML, mas conhecido como Drop Down List no mundo Windows) encadeados. O sistema teria vários desses select em cascata.

Como um bom programador, resolvi encapsular a lógica deste em algum lugar, para futuro reuso. Então surgiu a ideia de criar uma extensão do JQuery que já fizesse o trabalho duro. É necessário Visual Studio 2010/2012 com o template do ASP.NET MVC 4 Project instalados.

• Link do Git Hub para o jquery-cascadeselect Contribua!

Criando o projeto Web Api

No Visual Studio, para um novo projeto:

1. File->New Project-> Templates->Installed Templates->Visual C#->ASP.NET MVC 4 Web Application
2. Na janela selecione Web API.

Caso já tenha um projeto MVC:

1. Adicione referência para System.Web.Http.WebHost.
2. Adicione o arquivo App_Start\WebApiConfig.cs (use como exemplo o código do post).
3. Adicione using System.Web.Http in Global.asax.cs.
4. Chame WebApiConfig.Register(GlobalConfiguration.Configuration) na função Start Global.asax.cs, antes da rota MVC, por causa de sua precedência.

A ideia

O principal objetivo era diminuir a complexidade de criar o cascateamento e também performance, dado que o resultado é em JSON, diminuindo assim, o tráfego de dados. Principalmente porque eu o usaria para mobile.

O cascateamento de componentes é recursivo por natureza. Então resolvi usar os novos padrões HTML5 data-* (chamado de "data dash attribute"), que salva as informações para que o select saiba seu comportamento. A url de origem dos dados, os parâmetros a serem passados, paramName, quem dispararia o evento para ele ser preenchido, o parentSelectId e um texto padrão que este teria vazio ou não selecionado o defatulText.

Chamada do método

A Web API

Criei um objeto SelectOption  que remete ao que é esperado pelo jquery-cascadeselect (esse o nome da extensão que crie :D).  Então nossos métodos devem preencher e retornar esse objeto.

Model/SelectOption.cs

Padrão do JSON gerado

No exemplo eu vou usar Estado, Cidade e Região. Veja que retorno em cada método de API é uma lista de SelectOption. Preste atenção também nos parâmetros. Vamos usá-los mais tarde.

Controller/SearchController.cs

Na configuração do Web API, adicionei a action na rota, porque temos mais de um método GET dentro do mesmo controller, caso contrário  o Routing não irá resolver o endereço requisitado. Além disso, JSON foi colocado como padrão de retorno.

App_Start/WebApiConfig.cs

Uso

O uso é bem simples, basta chamar como se fosse um método do JQuery, dado que é uma extensão. No exemplo abaixo estou usando com ASP.NET Web API, mas não há restrições, o endereço passado só deve garantir que seja retornado JSON no formato correto .

Cascateamento entre Regiões, Estado e Cidades

Lembra-se dos parâmetros da nossa WebAPI? Por exemplo regiaoId, o nome deve ser idêntico para que o GET seja feito corretamente.

HTML exemplo

Resultado

Abaixo está o resultado, o jquery-cascadeselect cuida da parte chata de lógica automaticamente. Ao mudarmos as seleções os select são populados segundo a configuração feita. No exemplo clássico abaixo tenho Região, Estado, e Cidade:

Regiões é o pai de todos, então já vem populado

Mudando a seleção de Região o Estado é populado

Mudando a seleção de Estado vêem as Cidades

Contribua

Eu criei uma entrada no Git Hub para jquery-cascadeselect. Não sou nenhum "expert" em JavaScript, então o código pode estar um pouco "bagunçado" e sem padrão, mas está funcionando que é uma maravilha :D! Se você tem interesse em contribuir acesse. 

Espero que tenham gostado. O exemplo que usei para testar, igual ao das imagens acima, pode ser baixado aqui.