Nesse exemplo vou demostrar como trabalhar com DropDownList e AJAX, para o AJAX vou utilizar o JQuery. Vamos ao exemplo.

Definindo o modelo

Vamos começar pelo modelo da aplicação nesse exemplo vou utilizar o bom e velho Northwind e vou trabalhar com apenas duas tabelas Categories e Products, vou utilizar EF mais se você preferir pode utilizar L2Q,NHibernate,ADO.NET, etc…

Imagem 1 - Modelo da aplicação.

O diagrama acima mostra como ficou o modelo, no EF não alterei nenhuma configuração simplesmente next,next,finish.

Definindo a View,Partial View e JavaScript

Para simplificar o exemplo vou aproveitar a View “Index” do Controller “Home”, veja o código completo da View “Index” abaixo.

Imagem 2 - View Home.

Na View acima utilizo o Helper Html.DropDownList , para criar o “DropDownList” (acho estranho esse nome o correto seria chamar de “Select”, que é o nome do elemento HTML, mais acredito que isso seja herança do Web Form),os dados para popular o “DropDownList” estão no ViewData e são acessados pela chave “SelectList”, a div “partial” receberá o conteúdo da partial que vamos criar.

Note que a View “Home” possui dois arquivos JavaScript a framework JQuery “jquery-1.3.2.min.js” é o arquivo “Categoria.js” que esta definido no código abaixo.

$(document).ready(function() {
    //Assina o evento onchange do DropDownList
    $("#CategoryID").change(CategoryID_Change);
});

function CategoryID_Change() {
    //Envia o item selecionado para Action "Produto" do Controller Home
    $.post("Home/Produto", { CategoryID: $("#CategoryID").val() }, CategoryID_Callback, "Json");
}

function CategoryID_Callback(partial) {
    //Limpa o conteúdo da div
    $("#partial").empty();
    
    if (partial) {
        //adiciona o novo conteúdo
        $("#partial").append(partial);
    }
}

Dentro da função “ready” o evento “onchange” do DropDownList "CategoryID" foi assinado é toda vez que o usuário selecionar um novo item a função “CategoryID_Change” será executada, dentro da função “CategoryID_Change” uma chamada AJAX via post é criada e o alvo dessa chamada é a Action “Produto” do Controller “Home”, note que na configuração da chamada AJAX eu defini um callback que nesse exemplo será a função “CategoryID_Callback” essa função simplesmente limpa o conteúdo da div “partial” e adiciona o conteúdo recebido como parâmetro, esse conteúdo será uma partial com uma table com todos os produtos da categoria selecionada, para criar essa partial clique com o direito na pasta “Shared”, selecione "Add">>"New Item" e selecione o template "MVC View User Control", altere o nome para “PartialProduto.ascx”, veja o código completo abaixo.

Imagem 3 - Código da Partial View Produto.

A partial acima contém apenas o código necessário para criação de uma table com 4 colunas, ela é tipada e para renderizar essa partial é necessário um IEnumerable de Products.

Controller Home

Veja o código atualizado do Controller “Home“ abaixo.

public class HomeController : Controller
{
    northwndEntities context = new northwndEntities();

    public ActionResult Index()
    {
        ViewData["SelectList"] = new SelectList(context.Categories, "CategoryID", "CategoryName");
        return View();
    }

    public ActionResult Produto(Categories categories)
    {
        if (ModelState.IsValid)
            return PartialView("PartialProduto",
                context.Products.Where(x => x.Categories.CategoryID == categories.CategoryID));
        else
            return new EmptyResult();
    }

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

Na Action “Index” crio um objeto SelectList com todas as categorias e adiciono esse objeto no ViewData, a Action Produto recebe o CategoryID e retorna a Partial View “PartialProduto” com todos os produtos da categoria selecionada.

Agora podemos executar o exemplo, o resultado esperado pode ser visto na imagem abaixo.

Imagem 4 - Resultado.

Conclusão

Confesso que sinto a falta de um Helper para criar esse tipo de código, mais o exemplo acima da uma idéia de como você pode criar o seu próprio Helper para resolver esse problema, segue o código fonte em VB.NET e C#.

Daniel Fonseca Castro