ASP .NET Core - Criando listas Dropdown com a tag Helper Select

Neste artigo veremos como usar a tag helper select para exibir informações em listas suspensas.

Criar listas suspensas na ASP .NET Core MVC não é uma tarefa complexa, mas como houve muita alteração na forma como isso pode ser feito as informações podem ficar um tanto confusas para quem quer ver apenas um simples lista suspensa funcionado.

Neste artigo vamos mostrar como criar e usar listas suspensas usando a tag helper Select na ASP .NET Core MVC.

'Bora' pra prática...

Recursos Usados:

Criando o projeto ASP .NET Core MVC

Abra o VS 2017 Community e clique em New Project;

Selecione o template ASP .NET Core Web Application e informe o nome AspnCore_Select e clique em OK;

Escolha o template Web Application (Model-View-Controller) para criar uma aplicação ASP .NET Core MVC.

Crie uma pasta Models no projeto (Project->New Folder) e a seguir inclua a classe Estado nesta pasta com o seguinte código:

    public class Estado
    {
        public string EstadoSigla { get; set; }
    }

Agora altere o código da View Index.cshtml conforme abaixo:

@model Estado
<h1>Usando a tag Helper Select</h1>
<hr />
<h2>Apenas definindo select asp-for</h2>
<select asp-for="EstadoSigla"></select>
<br />
<h2>Estados definidos usando 'option value'</h2>
<select asp-for="EstadoSigla">
    <option value="MG">Minas Gerais</option>
    <option value="RS">Rio Grande do Sul</option>
    <option value="PR">Paraná</option>
    <option value="SP">São Paulo</option>
    <option value="RJ">Rio de Janeiro</option>
    <option value="--">Outros Estados</option>
</select>

 

No primeiro código estamos definindo o model Estado e usando a tag helper asp-for para indicar que propriedade EstadoSigla esta vinculada com o elemento select de forma gerar a lista suspensa.

Esta abordagem apenas gera uma lista suspensa vazia.

No segundo código estamos definindo as opções usando option value de forma manual o que pode até ser feito se você tiver poucas opções.

Agora podemos ver a lista suspensa com as opções exibidas.

Nesse caso, as opções definidas na marcação serão incluídas no HTML gerado. A opção selecionada será determinada automaticamente com base no valor da propriedade do modelo.

Por exemplo, se a propriedade EstadoSigla estiver definida como 'SP' no modelo, o seguinte HTML será gerado:

<select id="EstadoSigla" name="EstadoSigla">
    <option value="MG">Minas Gerais</option>
    <option value="RS">Rio Grande do Sul</option>
    <option value="PR">Paraná</option>
    <option selected="selected" value="SP">São Paulo</option>
    <option value="RJ">Rio de Janeiro</option>
    <option value="--">Outros Estados</option>
</select>

Carregando uma lista de opções de uma fonte de dados

Podemos carregar uma lista de opções de forma dinâmica de uma fonte de dados como um banco de dados, arquivo XML, arquivo JSON, etc.

Para fazer isso podemos usar o atributo asp-items definindo-o para um IEnumerable.

Para não complicar muito eu vou criar um serviço parar fornecer uma lista de estados com siglas e nomes.

Altere o código da classe Estado incluindo a propriedade EstadoNome :

    public class Estado
    {
        public string EstadoNome { get; set; }
        public string EstadoSigla { get; set; }
    }

Agora crie uma pasta Services no projeto e a seguir inclua uma classe chamada EstadosService com o seguinte código:

using AspnCore_Select.Models;
using System.Collections.Generic;
namespace AspnCore_Select.Services
{
    public class EstadosService
    {
        public static List<Estado> GetEstados()
        {
            var listaEstados = new List<Estado>()
            {
                new Estado(){ EstadoSigla="AL", EstadoNome="Alagoas"},
                new Estado(){ EstadoSigla="BA", EstadoNome="Bahia"},
                new Estado(){ EstadoSigla="CE", EstadoNome="Ceará"},
                new Estado(){ EstadoSigla="DF", EstadoNome="Distrito Federal"},
                new Estado(){ EstadoSigla="ES", EstadoNome="Espirito Santo"},
                new Estado(){ EstadoSigla="GO", EstadoNome="Goiás"},
                new Estado(){ EstadoSigla="MG", EstadoNome="Minas Gerais"},
                new Estado(){ EstadoSigla="PR", EstadoNome="Paraná"},
                new Estado(){ EstadoSigla="RS", EstadoNome="Rio Grande do Sul"},
                new Estado(){ EstadoSigla="SP", EstadoNome="São Paulo"},
                new Estado(){ EstadoSigla="TO", EstadoNome="Tocantins"}
            };
            return listaEstados;
        }
    }
}

Agora no controlador HomeController vamos definir uma lista de estados em uma ViewBag (ou ViewData) para exibir na view Index.

Inclua o código abaixo no controlador HomeController:

using AspnCore_Select.Models;
using AspnCore_Select.Services;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using System.Diagnostics;
using System.Linq;
namespace AspnCore_Select.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.Estados = EstadosService.GetEstados().Select(c => new SelectListItem()
                                                   { Text= c.EstadoNome, Value=c.EstadoSigla}).ToList();
            return View();
        }
        ...
}

Agora altere o código da view Index.cshtml conforme a seguir:

@model Estado
<h1>Usando a tag Helper Select</h1>
<hr />
<br />
<h3>Apenas definindo select asp-for</h3>
<select asp-for="EstadoSigla"></select>
<br />
<h3>Estados definidos usando 'option value'</h3>
<select asp-for="EstadoSigla">
    <option value="MG">Minas Gerais</option>
    <option value="RS">Rio Grande do Sul</option>
    <option value="PR">Paraná</option>
    <option value="SP">São Paulo</option>
    <option value="RJ">Rio de Janeiro</option>
    <option value="--">Outros Estados</option>
</select>
<br />
<h3>Obtendo a lista de uma fonte de dados usando asp-items</h3>
<select asp-for="EstadoSigla"
        asp-items="@ViewBag.Estados"></select>

 

Executando o projeto teremos o seguinte resultado:

Pegue o projeto completo aqui: AspnCore_Select.zip

(disse Jesus) "Eu sou o pão vivo que desceu do céu; se alguém comer deste pão, viverá para sempre; e o pão que eu der é a minha carne, que eu darei pela vida do mundo. "
 João 6:51

Referências:

José Carlos Macoratti