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:
- O atributo multiple = "" indica que o controle será múltipla escolha, tornando possível a seleção de mais de um valor.
- 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.
