Existem muitas Tag Helpers internos para tarefas comuns – como criação de formulários, links, carregamento de ativos, etc., e ainda outros disponíveis em repositórios GitHub públicos e como pacotes NuGet. Eles são criados no C# e são direcionados a elementos HTML de acordo com o nome do elemento, o nome do atributo ou a tag parent.

Hoje veremos como criar um ListBox usando a Tag Helper select com dados vinculados a uma fonte de dados.

A Tag Helper select é processada como um elemento de tag select e pode ser usado como alternativa ao Html.DropdownListFor e Html.ListBoxFor do MVC.

recursos usados:

• VS 2019
• ASP .NET Core 3.1

Criando o projeto no VS 2019 Community

Abra o VS 2019 Community e crie uma solução em branco via menu File-> New Project;

Selecione o template ASP .NET Core Web Application, e, Informe o nome Aspc_ListBox1

A seguir selecione .NET Core e ASP .NET Core 3.1 e marque o template Web Application e as configurações conforme figura abaixo:

Clicando no botão Create teremos o projeto criado e pronto para ser ajustado.

Iremos mostrar como exibir os dados no ListBox a partir de uma lista pronta e a partir dos dados de um banco de dados SQL Server e para isso vamos usar o EF Core para se comunicar com o banco de dados e, precisamos incluir uma referência no projeto para poder usar os recursos do EF Core.

No menu Tools-> Nuget Package Manager clique em Manage Nuget packages for Solution e selecione o pacote Microsoft.EntityFrameworkCore.SqlServer na versão 3.1.0 e clique em Install.

Ao instalar este pacote todas as dependências necessárias serão instaladas inclusive o Entity Framework Core.

Vamos precisar instalar também o pacote Microsoft.EntityFrameworkCore.Tools para habilitar os comandos usados no Migrations usando o mesmo processo descrito acima.

Definindo o modelo de domínio e o contexto

Vamos criar o nosso modelo de domínio que para o nosso exemplo será a classe Linguagens onde vamos definir uma lista de itens que iremos exibir no ListBox.

Na pasta Models do projeto crie a classe Linguagem e defina o código abaixo:

using Microsoft.AspNetCore.Mvc.Rendering;
using System.Collections.Generic;

namespace Aspc_ListBox1.Models
{
    public class Linguagem
    {
        public List<SelectListItem> LinguagensUsadas { get; } = new List<SelectListItem>
        {
            new SelectListItem { Value = "1", Text = "HTML" },
            new SelectListItem { Value = "2", Text = "CSS" },
            new SelectListItem { Value = "3", Text = "Bootstrap"  },
            new SelectListItem { Value = "4", Text = "JavaScript"  },
            new SelectListItem { Value = "5", Text = "JQuery"  },
            new SelectListItem { Value = "6", Text = "Angular"  },
            new SelectListItem { Value = "7", Text = "C#" },
            new SelectListItem { Value = "8", Text = "ASP.Net MVC" },
            new SelectListItem { Value = "9", Text = "ASP.Net Core"  },
            new SelectListItem { Value = "10", Text = "Entity Framework"  },
            new SelectListItem { Value = "11", Text = "Identity"  },
            new SelectListItem { Value = "12", Text = "LINQ"  },
            new SelectListItem { Value = "13", Text = "SQL Server"  },
        };
    }
}

Nesta classe temos a propriedade LinguagensUsadas que usa uma instância da classe SelectListItem que representa um item selecionado em uma instância da classe SelectList que representa a lista onde o usuário seleciona o item.

Agora vamos criar outra classe na pasta Models com o nome de Conhecimento que representa as linguagens de programação que um usuário conhece:

using System.ComponentModel.DataAnnotations;

namespace Aspc_ListBox1.Models
{
    public class Conhecimento
    {
        [Key]
        public int Id { get; set; }

        [Required]
        [StringLength(150)]
        [Display(Name = "Linguagens")]
        public string LinguagemProgramacao { get; set; }
    }
}

Nesta classe usamos os atributos Data Annotations para validação dos dados.

A seguir vamos criar a classe AppDbContext onde vamos definir o nosso contexto do EF Core que vai permitir acessar os dados do banco de dados mapeados para a entidade Funcionario.

Na pasta Models crie o arquivo AppDbContext.cs com o código abaixo:

using Microsoft.EntityFrameworkCore;

namespace Aspc_ListBox1.Models
{
    public class AppDbContext : DbContext
    {
        public AppDbContext(DbContextOptions<AppDbContext> options)
            : base(options)
        {
        }
        public DbSet<Conhecimento> Conhecimentos { get; set; }
    }
}

Essa classe herda da classe DbContext e define a propriedade do tipo DbSet<Funcionario> que mapeia a entidade para a tabela do banco de dados.

Precisamos agora registrar o contexto como um serviço no arquivo Startup e definir a string de conexão do banco de dados que iremos usar no arquivo appsettings.json.

Abrindo o arquivo Startup inclua o código abaixo no método ConfigureServices:

     public void ConfigureServices(IServiceCollection services)
      {
            services.AddDbContext<AppDbContext>(opts =>
                opts.UseSqlServer(Configuration.GetConnectionString("sqlConnection")));

            services.AddControllersWithViews();
     }

Aqui definimos o provedor para usar o SQL Server e o nome da string de conexão como 'sqlconnection'.

No arquivo appsettings.json vamos incluir o código que define a string de conexão com uma instância do SQL Server local:

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "ConnectionStrings": {
    "sqlConnection": "Data Source=Macoratti;Initial Catalog=LinguagensDB;Integrated Security=True"
  },
  "AllowedHosts": "*"
}

Com isso, já temos tudo pronto e agora podemos aplicar o Migrations para gerar o banco de dados e a tabela.

Abrindo uma janela do Package Manager Console e digitar o comando para criar a migração: Add-Migration Inicial

Será criado o arquivo de script de migração na pasta Migrations :

Para aplicar o script basta digitar : Update-database

Ao final teremos o banco de dados LinguagensDB e a tabela Conhecimentos vazia. Vamos então incluir alguns dados nesta tabela para serem exibidos:

Exibindo os dados no ListBox

Vamos agora alterar o código do controlador HomeController criado na pasta Controllers para que possamos exibir os dados das linguagens.

No arquivo HomeController inclua o código conforme mostrado a seguir:

using Aspc_ListBox1.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using System.Linq;

namespace Aspc_ListBox1.Controllers
{
    public class HomeController : Controller
    {
        private readonly AppDbContext db;

        public HomeController(AppDbContext context)
        {
            db = context;
        }

        public IActionResult Index()
        {
            ViewData["Id"] = new SelectList(db.Conhecimentos, "Id", "LinguagemProgramacao");
            return View();
        }

        public IActionResult Conhecimentos()
        {
            var model = new Linguagem();
            model.LinguagensUsadas.ToList();
            return View(model);
        }
    }
}

Aqui incluímos uma instância da nossa classe de contexto AppDbContext usando a injeção de dependência nativa da ASP .NET Core.

Criamos dois métodos Action :

• Index - Exibe os dados no ListBox a partir da tabela Conhecimentos
• Conhecimentos - Exibe os dados no ListBox a partir da classe Linguagem;

Agora temos que ajustar a view Index.cshtml e a view Conhecimentos.cshtml na pasta Views/Home para isso clique com o botão direito sobre o método Conhecimentos e a seguir selecione Add View.

Abaixo temos o código ajustado da view Index.cshtml :

@model Aspc_ListBox1.Models.Conhecimento

@{
    ViewData["Title"] = "Home";
}

<h3>Linguagens usando um DataBase</h3>

<div class="form-group col-md-4">
    <select asp-for="Id" asp-items="ViewBag.Id" size="5" multiple class="form-control"></select>
    <span asp-validation-for="LinguagemProgramacao" class="text-danger"></span>
</div>

E a seguir temos o código criado para a view Conhecimentos.cshtml :

Se você quiser pode acessar os dados alterando o arquivo _Layout.cshtml na pasta /Views/Shared conforme abaixo:

Ao executar o projeto inicialmente o método Action Index irá exibir os dados da tabela Conhecimentos e ao clicar no link criado teremos os dados da classe Linguagem:

1- Index

2- Conhecimentos

Pegue o projeto sem as referências aqui : Aspc_ListBox1.zip

"Portanto, agora nenhuma condenação há para os que estão em Cristo Jesus, que não andam segundo a carne, mas segundo o Espírito."
Romanos 8:1