ASP .NET MVC 5 - DropdownList com seleção múltipla


  Neste artigo vou mostrar como usar o controle dropdownlist em aplicações ASP .NET MVC 5.
 

Chegou o curso Curso ASP .NET .MVC 5 Vídeo Aulas onde você vai aprender a criar aplicações web dinâmicas usando a 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 :

  1. Adicionar o atributo multiple ao Helper Html.DropDownList usando os parâmetros htmlAttributes;

  2. Usar o Helper Html.ListBox;

As opções podem ser passadas para o helper de diversas formas :

Vamos ver como implementar isso usando o ASP .NET MVC 5.

Recursos Usados

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;

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;

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;

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;

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 ume 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 (sem as referências)

Porque a palavra de Deus é viva e eficaz, e mais penetrante do que espada alguma de dois gumes, e penetra até à divisão da alma e do espírito, e das juntas e medulas, e é apta para discernir os pensamentos e intenções do coração.
Hebreus 4:12
 

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Quer aprender a criar aplicações Web Dinâmicas usando a ASP .NET MVC 5 ?

  Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

Referências:


José Carlos Macoratti