ASP.NET MVC & Chosen - Parte 1

Conforme prometido, hoje irei mostrar alguns exemplos práticos do uso do plugin Chosen. Neste post irei demonstrar o passo a passo de como utilizar este plugin no Visual Studio utilizando o template ASP.NET MVC. Apenas lembrando que este plugin pode ser utilizado normalmente com HTML e JavaScript/JQuery.

Primeiramente precisamos criar um projeto ASP.NET MVC no Visual Studio:

Feito isso, iremos acrescentar os arquivos CSS e JavaScript que compõe a API nas pastas Content e Scripts:

Criaremos uma Controller responsável por gerenciar as requisições de nossa página de exemplo: 

Nossa controller ficará assim:

using ChosenExample.Web.Models;
using System.Web.Mvc;

namespace ChosenExample.Web.Controllers
{
    public class ChosenExampleController : Controller
    {
        public ActionResult Index()
        {
            return View(new ListHelper());
        }
    }
}

A action Index utilizada na Controller acima, retorna uma View passando nosso objeto Model (ListHelper):

using System.Collections.Generic;

namespace ChosenExample.Web.Models
{
    public class ListHelper
    {
        public int CdAnimal { get; set; }
        public int CdProduto { get; set; }
        public List Animais { get; set; }
        public List Produtos { get; set; }

        public ListHelper()
        {
            FillAnimais();
            FillProdutos();
        }

        private void FillProdutos()
        {
            Produtos = new List();
            Produtos.Add(new Produto() { IdProduto = 1, DsProduto = "Computador" });
            Produtos.Add(new Produto() { IdProduto = 2, DsProduto = "TV" });
            Produtos.Add(new Produto() { IdProduto = 3, DsProduto = "Video Game" });
            Produtos.Add(new Produto() { IdProduto = 4, DsProduto = "DVD Player" });
            Produtos.Add(new Produto() { IdProduto = 5, DsProduto = "Smart Phone" });
            Produtos.Add(new Produto() { IdProduto = 6, DsProduto = "iPhone" });
            Produtos.Add(new Produto() { IdProduto = 7, DsProduto = "Laptop" });
            Produtos.Add(new Produto() { IdProduto = 8, DsProduto = "Janela" });
            Produtos.Add(new Produto() { IdProduto = 9, DsProduto = "Mesa" });
            Produtos.Add(new Produto() { IdProduto = 10, DsProduto = "Lâmpada" });
            Produtos.Add(new Produto() { IdProduto = 11, DsProduto = "Teclado" });
        }

        private void FillAnimais()
        {
            Animais = new List();
            Animais.Add(new Animal() { IdAnimal = 1, DsAnimal = "Cachorro" });
            Animais.Add(new Animal() { IdAnimal = 2, DsAnimal = "Gato" });
            Animais.Add(new Animal() { IdAnimal = 3, DsAnimal = "Pássaro" });
            Animais.Add(new Animal() { IdAnimal = 4, DsAnimal = "Sapo" });
            Animais.Add(new Animal() { IdAnimal = 5, DsAnimal = "Peixe" });
            Animais.Add(new Animal() { IdAnimal = 6, DsAnimal = "Lagarto" });
            Animais.Add(new Animal() { IdAnimal = 7, DsAnimal = "Urso" });
            Animais.Add(new Animal() { IdAnimal = 8, DsAnimal = "Cavalo" });
            Animais.Add(new Animal() { IdAnimal = 9, DsAnimal = "Girafa" });
            Animais.Add(new Animal() { IdAnimal = 10, DsAnimal = "Elefante" });
            Animais.Add(new Animal() { IdAnimal = 11, DsAnimal = "Leão" });
        }
    }
}

As classes abaixo serão utilizadas na tipagem das listas de nossa Model

    public class Produto
    {
        public int IdProduto { get; set; }
        public string DsProduto { get; set; }
    }

    public class Animal
    {
        public int IdAnimal { get; set; }
        public string DsAnimal { get; set; }
    }

Nossa Index (View) conterá dois dropdownlists a serem utilizados em nosso exemplo e um botão a ser utilizado no próximo post.

@model ChosenExample.Web.Models.ListHelper
@{
    ViewBag.Title = "Exemplos";
}



Exemplos Chosen
@Html.DropDownListFor(t => t.CdAnimal, new SelectList(Model.Animais, "IdAnimal", "DsAnimal"), "Selecione", new { multiple = "", @class = "chzn-select search-dropdown chosen-select", data_placeholder = "Selecione", style="width:400px" })
@Html.DropDownListFor(t => t.CdProduto, new SelectList(Model.Produtos, "IdProduto", "DsProduto"), "Selecione", new { @class = "chzn-select search-dropdown chosen-select", data_placeholder = "Selecione", style = "width:400px" })
<input type="submit" name="btnEnviar" value="Enviar" />

Antes de seguir em frente, existem alguns pontos interessantes a serem observados e entendidos:

1. O atributo multiple = "" indica que o controle será múltipla escolha, tornando possível a seleção de mais de um valor.
2. A classe search-dropdown habilita a busca no campo

Ao executar a aplicação, o resultado é o seguinte:

Para inicializar o plugin, basta inserir este trecho de código na página dentro da tag script:

$(document).ready(function(){
    $(".chosen-select").chosen()
});

E pronto! Bem diferente da aparência e comportamento padrão não?

Em uma próxima postagem irei abordar o tratamento e manipulação deste campo na Controller.