ASP .NET Core - Dropdownlist com Banco de dados
Hoje vamos recordar como vincular um dropdownlist a um banco de dados na ASP .NET Core 5.0. |
Neste artigo vamos usar o mecanismo de visualização do razor e iremos vincular uma lista suspensa a um banco de dados SQL Server usando ADO.NET.
Talvez a abordagem mais usada seja usar o EF Core mas para variar vamos usar ADO .NET que é uma forma muito simples de vincular a lista suspensa.
Neste exemplo, vamos usar o banco de dados Northwind e exibir os dados dos funcionários e dos clientes a partir das tabelas Employees e Customers e exibir em um dropdownlist.
Nota: Baixe o Northwind aqui.
Podemos usar tanto o Visual Studio Code como o VS 2019 Community e neste exemplo vou usar este último na versão 16.8.0 no ambiente .NET Core SDK 5.0.
Vamos criar um projeto e ASP .NET Core MVC usando a versão 5.0:
Precisamos incluir no projeto o pacote System.Data.SqlClient pois vamos usar os recursos da ADO .NET e também precisamos incluir no arquivo appsettings.json a string de conexão do banco de dados Northwind:
{
"ConnectionStrings": {
"DefaultConnection": "Data Source=express;Initial Catalog=Northwind;Integrated Security=True"
},
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft": "Warning",
"Microsoft.Hosting.Lifetime": "Information"
}
},
"AllowedHosts": "*"
}
|
Definindo o modelo de domínio
Na pasta Models vamos criar as entidades que vão representar o nosso modelo de domínio. Vamos usar classes POCO totalmente anêmicas e sem lógica alguma pois iremos usá-los apenas como DTO.
Vamos criar as seguintes classes:
1- EmployeeList
public class EmployeeList
{
public int EmployeeID { get; set; }
public string FirstName { get; set; }
}
|
2- CustomerList
public class CustomerList
{
public string CustomerID { get; set; }
public string ContactName { get; set; }
}
|
3- DropdownList
using System.Collections.Generic;
namespace AspnDropdownDB.Models
{
public class DropdownList
{
public List<EmployeeList> Employees { get; set; }
public List<CustomerList> Customers { get; set; }
}
}
|
Creio que analisando o código das classes fica clara a nossa intenção de mapear as entidades com as propriedades para as respectivas tabelas e ter um DTO contendo a lista de funcionários e clientes que vamos exibir.
Criando e registrando serviço
Vamos criar um serviço para obter os dados do banco de dados Northwind e assim desacoplar a lógica de acessar os dados do nosso controlador HomeController.
Vamos criar uma pasta Services e a seguir criar a classe NorthwinService:
using AspnDropdownDB.Models;
using Microsoft.Extensions.Configuration;
using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.IO;
namespace AspnDropdownDB.Services
{
public class NorthwindService
{
public IConfigurationRoot GetConnection()
{
var builder = new ConfigurationBuilder()
.SetBasePath(Directory.GetCurrentDirectory())
.AddJsonFile("appSettings.json").Build();
return builder;
}
public List<CustomerList> GetCustomerList()
{
var connection = GetConnection().GetSection("ConnectionStrings")
.GetSection("DefaultConnection").Value;
SqlConnection con = new SqlConnection(connection);
SqlCommand cmd = new SqlCommand("Select CustomerID, ContactName From Customers", con);
con.Open();
SqlDataReader idr = cmd.ExecuteReader();
List<CustomerList> customers = new List<CustomerList>();
if (idr.HasRows)
{
while (idr.Read())
{
customers.Add(new CustomerList
{
CustomerID = Convert.ToString(idr["CustomerID"]),
ContactName = Convert.ToString(idr["ContactName"]),
});
}
}
con.Close();
return customers;
}
public List<EmployeeList> GetEmployeeList()
{
var connection = GetConnection().GetSection("ConnectionStrings")
.GetSection("DefaultConnection").Value;
SqlConnection con = new SqlConnection(connection);
SqlCommand cmd = new SqlCommand("Select EmployeeID,FirstName From Employees", con);
con.Open();
SqlDataReader idr = cmd.ExecuteReader();
List<EmployeeList> Employees = new List<EmployeeList>();
if (idr.HasRows)
{
while (idr.Read())
{
Employees.Add(new EmployeeList
{
EmployeeID = Convert.ToInt32(idr["EmployeeID"]),
FirstName = Convert.ToString(idr["FirstName"]),
});
}
}
con.Close();
return Employees;
}
}
}
|
Este monte de código faz o seguinte:
Vamos registrar o serviço no container DI nativo da ASP .NET Core no método ConfigureServices da classe Startup:
public void ConfigureServices(IServiceCollection services)
{
services.AddControllersWithViews();
services.AddScoped<NorthwindService>();
}
|
Definindo o controlador e a view
Vamos usar o controlador HomeController já criado na pasta Controllers e alterar o seu código conforme abaixo:
using AspnDropdownDB.Models;
using AspnDropdownDB.Services;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using System.Diagnostics;
namespace AspnDropdownDB.Controllers
{
public class HomeController : Controller
{
private readonly ILogger<HomeController> _logger;
private readonly NorthwindService _service;
public HomeController(ILogger<HomeController> logger, NorthwindService service)
{
_logger = logger;
_service = service;
}
public IActionResult Index()
{
DropdownList dropdownlist = new DropdownList
{
Customers = _service.GetCustomerList(),
Employees = _service.GetEmployeeList()
};
return View(dropdownlist);
}
public IActionResult Privacy()
{
return View();
}
[ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
public IActionResult Error()
{
return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
}
}
}
|
Injetamos o serviço no construtor e a partir da sua instância obtemos a lista de clientes e funcionários.
A seguir basta alterar o código da view Index.cshtml na pasta Views/Home:
@model AspnDropdownDB.Models.DropdownList
@{
ViewData["Title"] = "Home Page";
}
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>
Vinculando DropdownList com SQL Server
</title>
</head>
<body>
Cliente
<div class="col-md-3">
@Html.DropDownListFor(model => model.Customers, new SelectList(Model.Customers, "CustomerID", "ContactName")
, new { @class = "form-control" })
</div>
<br />
Funcionário
<div class="col-md-3">
@Html.DropDownListFor(model => model.Employees, new SelectList(Model.Employees, "EmployeeID", "FirstName")
, new { @class = "form-control" })
</div>
</body>
</html>
|
Aqui usamos o html helper @Html.DropDownListFor() passando a lista de clientes e funcionários e exibindo o nome.
Executando o projeto teremos:
Pegue o código do projeto aqui: AspnDropdownDB.zip (sem as referências)
"Porque do céu se manifesta a ira de Deus sobre toda a
impiedade e injustiça dos homens, que detêm a verdade em injustiça."
Romanos 1:18
Referências:
ASP .NET Core - Implementando a segurança com .
ASP.NET Core MVC - Criando um Dashboard ...
C# - Gerando QRCode - Macoratti
ASP .NET - Gerando QRCode com a API do Google
ASP .NET Core - Gerenciador de Despesas ...
ASP .NET Core - Acessando dados com Entity .
ASP.NET Core Web API - Tratamento de erros
ASP .NET Core MVC - Tratamento de exceções - II
ASP .NET Core - CRUD usando Blazor e Entity ..
ASP .NET Core Blazor - Macoratti.net
Blazor - Vale a pena usar o Blazor
ASP .NET Core 2 - MiniCurso Básico
ASP .NET Core - Implementando a segurança .
Curso ASP .NET Core - Macoratti.net
ASP .NET Core 3.1 - Conteinerizando uma ...