Escolha uma Página
(Last Updated On: 27/06/2018)

Listas DropDown em Cascata (Cascading) usando o Select Tag Helper no CORE MVC

por | ago 18, 2017 | Desenvolvimento de Aplicações, Dicas, Tag Helpers | 0 Comentários

Neste artigo damos continuidade ao artigo de listas dropdown usando o tag helper SELECT. Fazer listas dropdown em cascata exige o uso de Jquery e chamadas Ajax.  Este artigo mostra como fazer isso, desde o setup do sistema até as rotinas do core MVC integradas ao javascript. Não é muito elementar. Mas funciona. Aqui vai o caminho das pedras.

Fazendo o setup do seu sistema CORE MVC no arquivo Startup.cs

Há muitos artigos na Internet que falam em Cascading (dropdown em cascata, um dependente do outro) – mas a maioria mostra o milagre mas não mostra o santo. Ao fazer uma chamada AJAX para o servidor, por questões de segurança, os navegadores modernos não permitem. Principalmente se a camada está em domínio diferente do domínio da sua aplicação. No meu caso, eu não conseguia acesso HTTP para a leitura de dados mesmo dentro do meu próprio ambiente de desenvolvimento. Não conseguia nem no LOCALHOST, resumindo.

Estudando os erros, vi que precisava autorizar a aplicação CORE MVC a ler o que eu queria, criando uma política de acesso para capturar dados de uma página fora da página que você está. Dei o nome de “MinhaPolitica” a essa autorização.

Então, minha primeira recomendação é preparar os serviços do Startup.cs para lerem o domínio – ou os domínios – que você quiser. Na parte de Configuração dos Serviços (ConfigureServices) inclua:

Configurando o serviço globalmente

Depois disso é preciso configurar o serviço. :

Configurando Ações (Actions) dos Controladores (Controllers)

Se quiser garantir o acesso no seu próprio controlador (Control), coloque ANTES da ação do seu Controle (controller) o EnableCors :

Configurações Diferentes para ambiente de Desenvolvimento e Produção

Pronto. Temos certeza agora que as chamadas GET, em Ajax, vão chegar. Lendo o artigo em referência, você verá que pode definir diferentes políticas, uma para ambiente de desenvolvimento, outra par ambiente de produção e, ao invés de liberar geral como fiz aqui, fazer liberações para localhost, seu domínio ou outros domínios, tendo mais de uma política. Exemplo:

Princípio Básico dos Selects em Cascata

Selects em cascata funcionam do seguinte modo. Há um select MESTRE e um select ESCRAVO. Quando um item é selecionado no Select MESTRE, todos os itens do Select ESCRAVO são filtrados por uma variável (tipo ID) da opção selecionada. Itens sem essa ID são desprezados e somente são mostrados no Select ESCRAVO os itens que apresentam o mesmo valor da ID selecionada.

Ao fazermos uma seleção no MESTRE, essa escolha pode ser monitorada pelo comando Jquerychange()“:

A rotina em Jquery para recarregar o Select ESCRAVO

Quando o  Jquerychange()” percebe uma mudança no select MESTRE (no exemplo pelo select com id=”SelectConsultoria”, a sequência de ações é a seguinte:

  1. Limpa o select escravo, cuja Id é “SelectCompetencia” (no modelo de dados, cada Consultoria opera um conjunto de Competências), com a função jquery empty(). Não use remove(), que apaga o select inteiro e não s opções…;
  2. Acrescenta uma única linha com a função append(), tipo “Selecione uma Competência”;
  3. Força um refresh (algumas versões de navegador ficam mortinhas). Você faz o append() e a tela não muda. Esse aqui é um truque, forçando o DOM a atualizar o elemento com id “SelectCompetencia”. Usa uma função local chamada “redraw”;
  4. Monta a URL usando @Context.Request.Host do CORE MVC. Muita gente usa @Url, comigo não funcionou. A Url já passa o parâmetro que foi escolhido no Select Mestre. O pulo do gato, aqui, é que esse endereço tem o CONTROLADOR (controller)e a AÇÃO (Action) que tem de ser chamada para devolver, em formato Json, os dados filtrados. Sim, ela vai buscar no controller do CORE MVC ;
  5. Faz a chamada Ajax com ‘GET’, para buscar os dados.;
  6. Com o sucesso da conexão, coloca os dados em ‘data’ e manda processar numa função à parte chamada callbackFunction;
  7. A função callbackFunction popula o Select ESCRAVO novamente, O pulo do gato, aqui, é que ela no final remove uma linha que ficaria em branco.
  8. Essas rotinas ficam no miolo do @section Scripts { }, no final da sua página .CSHTML. Não esqueça de colocar <script> e </script>, ficando @section Scripts { <script> //todas as suas rotinas </script> }

A Ação (Action) no Controlador (Controller)

Montei uma ação específica para o “GET” do Ajax, via Jquery. Antes da ação, defini que para um GET, com [HttpGet]. E também assinalei a política local [EnableCors)”MinhaPolitica”)], já mencionada.

Aqui é montada uma lista simples. Filtrada pela Id do Select mestre, passado via URL como parâmetro. Observe que todos os itens da lista são acrescentados com Selected = false, pois  o Select ESCRAVO ainda não tem nada selecionado (e foi o próprio Javascript que criou o primeiro elemento com “Selecione uma Competência” .

Se isso não tivesse sido feito lá, poderíamos fazer aqui logo depois de definir a nova lista, fazendo um Lista.Add de um único elemento ANTES de entrar no loop foreach.

Observe que o retorno é em formato Json. É isso. Tem muita coisa antiga e errada na internet. Não precisa acrescentar parâmetro nenhum. Funciona que é uma chupeta.

 

 

A View com os selects usando o Select Tag Helper

A view que foi montada tem 3 blocos:

  • Bloco 1: os selects MESTRE e ESCRAVO;
  • Bloco 2: uma seção informativa do resultado da seleção acima se o botão de filtrar é pressionado;
  • Bloco 3: um grid com o resultado da seleção.

DICA:

Habilitando Tag Helpers de forma genérica

Para que tag helpers funcionem em qualquer arquivo de visualização, a opção é habilitar no arquivo auxiliar de visualização que é sempre lido (o _ViewImports.cshtml) .

Assim, no arquivo  _ViewImports.cshtml, inclua:

Isso pode ser feito com outros tag helpers que você vier a construir (além dos padrões Microsoft já existentes no Visual Studio).

Bloco 1 – Selects Mestre e Escravo

cascading selects

O primeiro select é o MESTRE e o segundo é o ESCRAVO. O funcionamento com javascrpt já vimos. Ocorre que quando entramos na página, esses selects devem ser previamente populados.

Papa popular usamos ViewBags, seguindo a sintaxe basica do HTML TAG HELPER para selects:  os dados são carregados dinamicamente a partir de uma base de dados e no select são colocadas no tag asp-items, formato asp-items(“ViewBag.MeusDados)”. Par carregar as ViewBagas é preciso colocar  neles uma lista IEnumerable. A View, nesse ponto, é um simples formulário com dois selects com suas respectivas ViewBags.

Note que o form (formulário) é submetido para Index2, no controlador. Index captura a entrada (GET), Index2 captura o formulário quando é submetido (via POST).

Bloco 2 – Botão de Filtrar

O botão Filtra Perguntas, no código acima, é um simples botão de submit, que vai obedecer o encaminhamento para Index2, definida no topo do formulário (<form asp-action=”Index2″>).

O botão Limpa Escolhas é um link simples (<a>…</a>), não passa nenhum parâmetro. A ideia é essa, simplesmente recarregar a página sem nenhuma filtragem, mostrando as 10 últimas perguntas cadastradas sem qualquer filtragem.

cascading dropdown

Quando o botão Filtra Perguntas é clicado, na verdade ele passa para Index2 os dois Ids. Nenhum deles pode estar selecionado, somente um dos dois (ou um ou outro) ou os 2: temos 4 opções possíveis. A ação Index2 simplesmente pega as Ids do POST e “devolve a bola” para a ação Index, que alem de repopular os selects, também muda a mensagem sobre a filtragem e os contadores de Totais (de Consultorias, de Competências e de Perguntas). Além disso, filtra os dados da Grid que vai ser apresentada abaixo desse bloco, no bloco 3. Todas as informações são passadas via ViewBags que são instanciadas na Ação (action) Index do controlador.

O botão Cria Nova Pergunta leva para um formulário de inserção, já com os dois parâmetros escolhidos. Quando uma nova pergunta é gravada, o form (formulário) e perguntas cham novamente a página Index, mas já passando para ela os dois IDs que recebeu (de forma que se pode cadastrar várias perguntas de uma Consultoria, para uma mesma Competência, sem ter de ficar novamente fazendo Selects!!!).

Bloco 3 – Grid com  Listagem das últimas perguntas registrado (máximo de 10)

Aqui a coisa pegou, porque o formulário (form) uma um modelo simples (não é uma lista!) e o grid precisa de uma lista… Os arquivos de Views  não permitem, de modo direto, que você defina dois ou mais modelos no topo (cabeçalho). É um modelo somente e ponto. Ir por esse caminho implica em gerar um terceiro modelo que contenha, dentro dele, os modelos que você quer usar na View. Mas pesquisando aqui e ali, acabei descobrindo uma outra forma de fazer isso, que será mostrada mais adiante.

cascading - formulário resultante do dropdown cascading

O modelo das Perguntas é muito simples:

 

O modelo acima é definido no topo do arquivo da View:

@model Coaching.Models.PerguntasBancoGeral
@{
ViewData[“Title”] = “Banco de Perguntas – Coaching Adm”;
}

Só que, a Grid, me interessava listar o Nome da Consultoria e o Nome da Competência, que estão em outras tabelas. Montei um modelo FAKE, contendo também os nomes, para poder popular esse modelo “Lista” (IENUMERABLE) através da ação Index do controlador (controller).

E, dentro da View, na hora de LISTAR todas as perguntas, no comando foreach, chamei esse modelo fake com os nomes:
foreach (var item in ViewBag.Lista as IEnumerable<Coaching.Models.PerguntasBancoGeralComNome>)

Veja a seguir o modelo FAKE e o bloco de código HTML da VIew do bloco 3 (grid).

Populando as opções do Select através do Banco de Dados

Para fazer isso criei dois métodos PRIVADOS dentro do controlador (controller). Um para popular a ViewBag de Consultorias, outro para popular a ViewBag de Competências.

Note que o VIewBag é instanciado dentro do método PRIVADO. Outra coisa: atribui o valor zero (0) para o “Selecione uma Consultoria”, pois isso facilita muito saber se a pessoa não fez nenhuma opção no select. É melhor que trabalhar com ”nulls”.

Se houver um item selecionado, vem um valor diferente de zero, que é passado por TipoSelecionado. A linha, em dados, cuja Id “bater” com o valor de TipoSelecionado será marcada como verdadeira (Selected = true).  Assim, quando a ViewBag entregar essa lista para o Select, o mesmo estar´posicionado nesta opção. DO contrário fica na primeira opção (0), “Selecione uma Consultoria”.

Populando as Competências

O princípio desse método é exatamente igual ao do anterior. A diferença é que ele utiliza 2 parâmetros que podem ter 4 comninações possíveis:

  • os 2 não são passados (são zero), nenhum dos dois foi selecionado: mostra todas as opções existentes (todas as competências);
  • somente o Id da Competência foi passado: mostra exatamente essa competência;
  • somente o id da Consultoria foi passado: mostra todas as competências ligadas a essa consultoria
  • os 2 são passados (diferente de zero): mostra exatamente a competência específica (igual caso 2)

O resultado dessa lista é armazenado na ViewBag de Competências dentro do método privado.

A Ação (Action) Index do Controlador

Esta ação é o “coração” desta pequena aplicação. Quando se entra na pagina Index.cshtml, a ação Index é solicitada no controlador (controller) e ela executa 3 papéis importantes:

  • chama os dois métodos populadores, passando a eles os parâmetros escolhidos na View;
  • carrega uma lista para a grid do modelo fake, com as devidas filtragens dos parâmetros e a coloca também numa VIeBag;
  • calcula e define todas as demais ViewBags que serão mostradas no arquivo de visualização (View), considerando as 4 possíveis alternativas de passagem dos 2 parâmetros.

O código é mostrado a seguir.

Obrigado pela sua leitura. Continue visitando este blog e compartilhe artigos em sua rede de relacionamento. Por favor, se quiser, registre sugestões e comentários ao final da página.

Você quer ter uma franquia de hospedagem com tudo para marketing digital e faturamento recorrente?

franquia builderall business