Neste artigo vou mostrar como usar o controle dropdownlist em aplicações ASP .NET MVC 5.
O Helper Html.DropDownList é renderizado no navegador como um elemento HTML <select>. Ele é geralmente usado para fornecer ao usuário um meio de selecionar uma de um número de opções. Você também pode permitir que o usuário selecione mais de uma opção quando não deseja usar checkboxes.
Existem duas formas de habilitar a seleção múltipla:
- Adicionar o atributo multiple ao Helper Html.DropDownList usando os parâmetros htmlAttributes
- Usar o Helper Html.ListBox
As opções podem ser passadas para o helper de diversas formas:
- Como um Enumerable<SelectListItem>
- Como um objeto SelectList
- Como um objeto MultiSelectList
Vamos ver como implementar isso usando o ASP .NET MVC 5.
Recursos Usados: Visual Studio 2013 Express for web.
Criando o projeto no VS 2013
Abra o Visual Studio 2013 Express for web e crie um novo projeto ASP .NET MVC usando a linguagem C#. Informe o nome Mvc_DropDownList_Multiplo e use o template Empty; não utilize autenticação, marque a opção MVC e clique em OK.
Vamos incluir um Entity Data Model (EDM) definindo o nosso modelo de domínio na pasta Models. Clique com o botão direito do mouse sobre a pasta Models e, a seguir, em Add New Item. Depois selecione a guia Data e a seguir ADO .NET Entity Data Model e informe o nome NorthwindModel e clique em Add.
Selecione a opção EF Designer from database e clique em Next>. Selecione a conexão com o banco de dados Northwind.mdf e clique em Next>.
Selecione a tabela Categories e marque as opções conforme mostra a figura abaixo:
Ao final, teremos a nossa entidade Category mapeada para a tabela Categories do banco de dados Northwin.mdf e o contexto com nosso modelo de domínio gerado na pasta Models:
Agora clique com o botão direito sobre a pasta Controllers e, a seguir, em Add Controller. Depois selecione o Scaffold – MVC5 Controller Empty – e informe o nome HomeController.
A seguir, defina o código abaixo sobrescrevendo o método Action Index:
using System.Linq;
using System.Web.Mvc;
using Mvc_DropDownList_Multiplo.Models;
namespace Mvc_DropDownList_Multiplo.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
using (var db = new NorthwindEntities())
{
var categorias = db.Categories.Select(c => new
{
CategoryID = c.CategoryID,
CategoryName = c.CategoryName
}).ToList();
ViewBag.Categorias = new MultiSelectList(categorias, "CategoryID", "CategoryName");
return View();
}
}
}
}
O código retorna uma lista de categorias armazenando o resultado no ViewBag.Categorias.
Clique com o botão direito do mouse no interior do método Action Index e, a seguir, em Add View. Depois informe o template Empty e selecione o Model Category e o Data Context conforme abaixo:
A seguir, inclua o código abaixo na view Tipada:
@model Mvc_DropDownList_Multiplo.Models.Category
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<h2>Macoratti .net - DropDownList com seleção múltipla </h2>
<hr />
<div>
DropDownList - multiple
<br />
@Html.DropDownList("CategoryId", (MultiSelectList)ViewBag.Categorias, new { multiple = "multiple" })
<br />
ListBox
<br />
@Html.ListBox("CategoryId", (MultiSelectList)ViewBag.Categorias)
</div>
</body>
</html>
Executando o projeto teremos o resultado abaixo:
Se você espiar o código fonte da página, irá notar que a renderização é a mesma para os dois componentes:
Podemos alterar a quantidade de itens exibidos (o padrão é 4) usando definindo um valor para o atributo size no helper da view Index:
@Html.ListBox("CategoryId", (MultiSelectList)ViewBag.Categorias, new { size = 8 } )
Agora obtemos:
Tudo bem. Mas como a seleção múltipla do usuário é processada em um post? Quando um controle com seleção múltipla é postado para o servidor, a coleção dos valores selecionados são processados por uma lista separada por vírgulas; O Model Binding entra em ação e vê essa coleção como um array.
Se os valores selecionados podem ser representados por inteiros, você pode usar um array de inteiros para representar os valores postados.
Como exemplo, vamos alterar o código da view Index incluindo um formulário através do helper Html.BeginForm para postar a seleção para a Action Selecao:
@model Mvc_DropDownList_Multiplo.Models.Category
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<h2>Macoratti .net - DropDownList com seleção múltipla </h2>
<hr />
<div>
@using (Html.BeginForm("Selecao", "Home", FormMethod.Post, new { id = "TheForm" }))
{
<text>DropDownList - multiple</text>
<br />
@Html.DropDownList("CategoryId", (MultiSelectList)ViewBag.Categorias, new { multiple = "multiple" })
<br />
<text>ListBox</text>
<br />
@Html.ListBox("CategoryId", (MultiSelectList)ViewBag.Categorias, new { size = 8 })
<input type="submit" value="Enviar" />
}
</div>
</body>
</html>
E vamos criar a Action Selecao no controlador HomeController:
[HttpPost]
public ActionResult Selecao(int[] categoryId)
{
return View();
}
Executando o projeto e fazendo mais de uma seleção ao postar, teremos o seguinte resultado:
Para concluir, se você desejar exibir a lista com alguns itens pré-selecionados, basta alterar o código da Action Index conforme mostra a linha azul em destaque no código abaixo:
public ActionResult Index()
{
using (var db = new NorthwindEntities())
{
var categorias = db.Categories.Select(c => new
{
CategoryID = c.CategoryID,
CategoryName = c.CategoryName
}).ToList();
//ViewBag.Categorias = new MultiSelectList(categorias, "CategoryID", "CategoryName");
ViewBag.Categorias = new MultiSelectList(categorias, "CategoryID", "CategoryName", new[] { 1, 3, 7 });
return View();
}
}
Agora, ao executar, teremos os itens 1, 3 e 7 pré selecionados na caixa de listagem:
Pegue o projeto completo aqui: Mvc_DropDownList_Multiplo.zip
De 0 a 10, o quanto você recomendaria este artigo para um amigo?