Criando um Dropdown Cascading em ASP.NET MVC

Ao construir aplicações web, oferecer uma experiência de usuário suave e interativa é essencial. Um padrão comum de interface de usuário é o Dropdown Cascading—um menu suspenso que atualiza suas opções com base na seleção de outro dropdown. Este recurso é especialmente útil ao lidar com conjuntos de dados relacionados. Neste post do blog, exploraremos como implementar um Dropdown Cascading usando ASP.NET MVC e jQuery.

Compreendendo o Problema

Você pode se perguntar como criar eficientemente um Dropdown Cascading em uma aplicação ASP.NET MVC. Questões frequentemente surgem, como:

• Você deve criar sua solução com jQuery ou confiar no toolkit AJAX da Microsoft?
• É melhor criar um serviço web ou chamar uma ação do controlador para retornar os dados dependentes?

Historicamente, os desenvolvedores tiveram várias abordagens para implementar esse recurso. No entanto, com o jQuery agora integrado ao ASP.NET MVC, o método preferido favorece o uso de jQuery para uma experiência mais simplificada.

Solução Passo a Passo

Vamos dividir o processo em seções claras e gerenciáveis para orientar você na implementação de um Dropdown Cascading em sua aplicação ASP.NET MVC.

1. Configure Seu Projeto

Certifique-se de que você tenha um projeto ASP.NET MVC configurado com jQuery incluído. Você pode fazer isso facilmente com os modelos mais recentes do Visual Studio.

2. Crie Seus Modelos

Precisaremos de alguns modelos que representem os dados com os quais estamos trabalhando. Por exemplo, vamos assumir que estamos trabalhando com os modelos País e Cidade:

public class Pais {
    public int PaisId { get; set; }
    public string NomePais { get; set; }
}

public class Cidade {
    public int CidadeId { get; set; }
    public string NomeCidade { get; set; }
    public int PaisId { get; set; } // Chave estrangeira para o País
}

3. Ações do Controlador

A seguir, você precisará configurar seu controlador para lidar com as requisições. Crie ações que retornarão a lista de países e as cidades com base no país selecionado.

public class LocalizacaoController : Controller {
    public JsonResult ObterPaises() {
        var paises = // Busque seus países no banco de dados
        return Json(paises, JsonRequestBehavior.AllowGet);
    }
    
    public JsonResult ObterCidades(int paisId) {
        var cidades = // Busque suas cidades com base no paisId
        return Json(cidades, JsonRequestBehavior.AllowGet);
    }
}

4. Construindo as Views

Na sua view, você precisará adicionar dois dropdowns: um para o país e um para a cidade. Comece carregando os países quando a view for renderizada:

<select id="dropdownPais"></select>
<select id="dropdownCidade"></select>

5. Implementando jQuery para Comportamento Dinâmico

Agora, adicionaremos código jQuery para preencher o dropdown de cidades com base no país selecionado.

$(document).ready(function() {
    $.getJSON('/Localizacao/ObterPaises', function(data) {
        $.each(data, function(index, item) {
            $('#dropdownPais').append($('<option>', { 
                value: item.PaisId,
                text : item.NomePais 
            }));
        });
    });

    $('#dropdownPais').change(function() {
        var paisId = $(this).val();
        $.getJSON('/Localizacao/ObterCidades?paisId=' + paisId, function(data) {
            $('#dropdownCidade').empty(); // Limpar opções existentes
            $.each(data, function(index, item) {
                $('#dropdownCidade').append($('<option>', { 
                    value: item.CidadeId,
                    text : item.NomeCidade 
                }));
            });
        });
    });
});

Conclusão

Ao seguir estes passos, você terá um Dropdown Cascading totalmente funcional em sua aplicação ASP.NET MVC. Esta abordagem melhora a experiência do usuário ao atualizar dinamicamente as opções do dropdown dependente com base nas seleções do usuário, eliminando a necessidade de recarregamentos de página.

Para mais detalhes sobre recursos mais profundos, não deixe de conferir este post de blog, que oferece um contexto adicional sobre valores em cascata com formulários usando jQuery.

A implementação de um Dropdown Cascading não apenas torna sua aplicação mais amigável ao usuário, mas também demonstra o poder de combinar jQuery com ASP.NET MVC para uma interatividade rica.