Como montar um drop down em cascata utilizando ASP.NET MVC

Sempre que trabalhamos com telas, surge a necessidade de utilizar drop-downs para seleção condicional, onde a seleção do primeiro, influencia o segundo, como por exemplo marcas x modelos, categoria x subcategoria, e isto pode ser um problema se utilizarmos apenas HTML, precisamos fazer uma chamada Ajax para realizar a carga do segundo drop down.

Exemplo de Drop-down em cascata no ASP.NET MVC

Como fazer isso no MVC ?

Fiz um projeto básico para demonstrar o conceito numa aula, vou reproduzir aqui:

Foi criado um projeto MVC onde nos modelos criei a classe Marca e uma classe Modelo, onde a segunda depende da primeira, foi utilizada para o cenário de carros.

using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace MvcMarcaModelo.Models;

[Table("Marcas")]
public class MarcaModel
{
    [Key]
    public int Id { get; set; }
    [MaxLength(50)]
    public string Nome { get; set; }

    public ICollection<ModeloModel>? Modelos { get; set; }
}

A classe marca possui uma lista de modelos atrelados à ela, que será utilizada para criar o vínculo na hora de gerar o banco de dados.

using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace MvcMarcaModelo.Models;

[Table("Modelos")]
public class ModeloModel
{
    [Key]
    public int Id { get; set; }
    [MaxLength(50)]
    public string Nome { get; set; }

    [ForeignKey("Marca")]
    public int MarcaId { get; set; }
    public MarcaModel? Marca { get; set;}
}

Também foi criada uma classe para servir de base para a montagem da tela, levando apenas os códigos de marca e modelo:

using System.ComponentModel;

namespace MvcMarcaModelo.Models
{
    public class MarcaModeloViewModel
    {
        [DisplayName("Marca")]
        public int MarcaId { get; set; }
        [DisplayName("Modelo")]
        public int ModeloId { get; set; }
    }
}

Feito isso, agora como todo projeto MVC, vamos criar o banco de dados, popular estes dados para podermos ir ao objetivo do projeto que é criar o “drop down” em cascata.

Como o projeto é só para definição do modelo, vamos fazer isto na própria “Home”, na sua página “Index”, então começamos por editar a Controller, criando os conteúdos iniciais do drop-down, que serão inseridos numa ViewBag.

O ponto mais importante é que iremos criar um código Javascript para acionar um endpoint que trará os veículos de uma marca quando o Select de nome “MarcaId” for modificado, veja o código abaixo:

O que este código faz?

1. Quanto há um evento do tipo “change” para o “select” de “MarcaId” é obtido o valor do Select (linha 38) e armazenado na variável “marcaid”.

2. na linha 40 limpamos o conteúdo do select.

3. na linha 42, é acionado o comando “getJSON” que irá realizar uma chamada para um endpoint que criamos com o endereço: “Modelos/GetModelosPorMarca/id” onde o id, é substituído pelo código da marca da variável “marcaId” criada na linha 40.

4. Caso haja sucesso, é realizada a inclusão de um item zerado na linha 43, para que apareça o título “Selecione um modelo”.

5. Depois é realizado um loop nas linhas 44 a 46, inserindo linhas no select utilizando o comando “append” do javascript.

Assim será preenchido o drop-down !!

Mas e o endpoint ?

Na Controller de modelos, criamos um método que recebe um Id e devolve um Json.

Este método aciona o banco de dados do contexto do Entity Framework e com um comando “Where” seleciona os itens do mesmo id, depois aproveita e traz somente o que precisamos, que é o Id e Name com o comando “Select”.

E no retorno, transforma este resultado em Json

Então, ao acionar o endpoint (https://localhost:7038/Modelos/GetModelosPorMarca/36) com o código da marca, no Browser, podemos ver o resultado

Desta forma, temos pronto um drop-down em cascata !!

Gostou do artigo? clique no ícone👏e me siga para ver as próximas publicações !! Quer ver mais conteúdos, acesse minhas redes através do Linktree: https://linktree.com/nizzola