Usar o auxiliar do DropDownList com ASP.NET MVC
por Rick Anderson
Este tutorial ensinará as noções básicas de como trabalhar com o auxiliar DropDownList e o auxiliar ListBox em um aplicativo Web MVC ASP.NET. Você pode usar o Microsoft Visual Web Developer 2010 Express Service Pack 1, que é uma versão gratuita do Microsoft Visual Studio para seguir o tutorial. Antes de começar, verifique se você instalou os pré-requisitos listados abaixo. Você pode instalar todos eles clicando no seguinte link: Web Platform Installer. Como alternativa, você pode instalar individualmente os pré-requisitos usando os seguintes links:
- Pré-requisitos do Visual Studio Web Developer Express SP1
- Atualização de ferramentas do ASP.NET MVC 3
- SQL Server Compact 4.0 (tempo de execução + suporte a ferramentas)
Se você estiver usando o Visual Studio 2010 em vez do Visual Web Developer 2010, instale os pré-requisitos clicando no seguinte link: Pré-requisitos do Visual Studio 2010. Este tutorial pressupõe que você tenha concluído o tutorial Introdução ao ASP.NET MVC ou otutorial ASP.NET MVC Music Store ou esteja familiarizado com ASP.NET desenvolvimento do MVC. Este tutorial começa com um projeto modificado do tutorial ASP.NET MVC Music Store .
Um projeto do Visual Web Developer com o código-fonte C# do tutorial concluído está disponível para acompanhar este tópico. Download.
O que você vai construir
Você criará métodos de ação e exibições que usam o auxiliar DropDownList para selecionar uma categoria. Você também usará o jQuery para adicionar uma caixa de diálogo de inserção de categoria que pode ser usada quando uma nova categoria (como gênero ou artista) for necessária. Abaixo está uma captura de tela da visualização Criar mostrando links para adicionar um novo gênero e adicionar um novo artista.
Qualificações que você aprenderá
Eis o que você vai aprender:
- Como usar o auxiliar DropDownList para selecionar dados de categoria.
- Como adicionar uma caixa de diálogo jQuery para adicionar novas categorias.
Introdução
Comece baixando o projeto inicial com o seguinte link, Download. No Windows Explorer, clique com o botão direito do mouse no arquivo DDL_Starter.zip e selecione propriedades. Na caixa de diálogo Propriedades do DDL_Starter.zip, selecione Desbloquear.
Clique com o botão direito do mouse no arquivo DDL_Starter.zip e selecione Extrair tudo para descompactar o arquivo. Abra o arquivo StartMusicStore.sln com o Visual Web Developer 2010 Express ("Visual Web Developer" ou "VWD" para abreviar) ou Visual Studio 2010.
Pressione CTRL+F5 para executar o aplicativo e clique no link Testar .
Selecione o link Selecionar categoria de filme (simples). É apresentada uma lista de Seleção de Tipo de Filme, sendo o valor selecionado Comédia.
Clique com o botão direito do mouse no navegador e selecione exibir código-fonte. O HTML da página é exibido. O código abaixo mostra o HTML do elemento select.
<form action="/Home/CategoryChosen" method="get">
<fieldset>Movie Type <select id="MovieType" name="MovieType">
<option value=""></option>
<option value="0">Action</option>
<option value="1">Drama</option>
<option selected="selected" value="2">Comedy</option>
<option value="3">Science Fiction</option>
</select>
<p><input type="submit" value="Submit" /> </p>
</fieldset>
</form>
Você pode ver que cada item na lista de seleção tem um valor (0 para Ação, 1 para Drama, 2 para Comédia e 3 para Ficção Científica) e um nome de exibição (Ação, Drama, Comédia e Ficção Científica). O código acima é HTML padrão para uma lista de seleção.
Altere a lista de seleção para Drama e clique no botão Enviar . O URL no navegador é http://localhost:2468/Home/CategoryChosen?MovieType=1 e a página exibe Você selecionou: 1.
Abra o arquivo Controllers\HomeController.cs e examine o SelectCategory método.
public ActionResult SelectCategory() {
List<SelectListItem> items = new List<SelectListItem>();
items.Add(new SelectListItem { Text = "Action", Value = "0"});
items.Add(new SelectListItem { Text = "Drama", Value = "1" });
items.Add(new SelectListItem { Text = "Comedy", Value = "2", Selected = true });
items.Add(new SelectListItem { Text = "Science Fiction", Value = "3" });
ViewBag.MovieType = items;
return View();
}
O auxiliar DropDownList usado para criar uma lista de seleção HTML requer um IEnumerable<SelectListItem >, explícita ou implicitamente. Ou seja, você pode passar o IEnumerable<SelectListItem > explicitamente para o auxiliar DropDownList ou pode adicionar o IEnumerable<SelectListItem >ao ViewBag usando o mesmo nome para o SelectListItem que a propriedade do modelo. A passagem do SelectListItem implícita e explicitamente é abordada na próxima parte do tutorial. O código acima mostra a maneira mais simples possível de criar um IEnumerable<SelectListItem > e preenchê-lo com texto e valores. Observe que SelectListItem Comedytem a propriedade Selected definida como true; isso fará com que a lista de seleção renderizada mostre Comedy como o item selecionado na lista.
O IEnumerable<SelectListItem > criado acima é adicionado ao ViewBag com o nome MovieType. É assim que passamos o IEnumerable<SelectListItem > implicitamente para o auxiliar DropDownList mostrado abaixo.
Abra o arquivo Views\Home\SelectCategory.cshtml e examine a marcação.
@{
ViewBag.Title = "Category Select";
Layout = "~/Views/Shared/_Simple_Layout.cshtml";
}
@using (Html.BeginForm("CategoryChosen", "Home", FormMethod.Get)) {
<fieldset>
Movie Type
@Html.DropDownList("MovieType")
<p>
<input type="submit" value="Submit" />
</p>
</fieldset>
}
Na terceira linha, definimos o layout como Views/Shared/_Simple_Layout.cshtml, que é uma versão simplificada do arquivo de layout padrão. Fazemos isso para manter a exibição e o HTML renderizado simples.
Neste exemplo, não estamos alterando o estado do aplicativo, portanto, enviaremos os dados usando um HTTP GET, não HTTP POST. Consulte a seção W3C Lista de verificação rápida para escolher HTTP GET ou POST. Como não estamos alterando o aplicativo e postando o formulário, usamos a sobrecarga Html.BeginForm que nos permite especificar o método de ação, o controlador e o método do formulário (HTTP POST ou HTTP GET). Normalmente, as exibições contêm a sobrecarga Html.BeginForm que não usa parâmetros. A versão sem parâmetro padrão é postar os dados do formulário na versão POST do mesmo método de ação e controlador.
A linha a seguir
@Html.DropDownList("MovieType")
passa um argumento de cadeia de caracteres para o auxiliar DropDownList . Essa cadeia de caracteres, "MovieType" em nosso exemplo, faz duas coisas:
- Ele fornece a chave para o auxiliar DropDownList localizar um IEnumerable<SelectListItem > no ViewBag.
- Ele é associado a dados ao elemento de formulário MovieType. Se o método submit for HTTP GET,
MovieTypeserá uma string de consulta. Se o método submit for HTTP POST,MovieTypeserá adicionado no corpo da mensagem. A imagem a seguir mostra a cadeia de caracteres de consulta com o valor de 1.
O código a seguir mostra o método para o CategoryChosen qual o formulário foi enviado.
public ViewResult CategoryChosen(string MovieType) {
ViewBag.messageString = MovieType;
return View("Information");
}
Navegue de volta para a página de teste e selecione o link HTML SelectList . A página HTML renderiza um elemento select semelhante à página de teste MVC ASP.NET simples. Clique com o botão direito do mouse na janela do navegador e selecione exibir código-fonte. A marcação HTML para a lista de seleção é essencialmente idêntica. Teste a página HTML, ela funciona como o método de ação MVC ASP.NET e a visualização que testamos anteriormente.
Melhorando a lista de seleção de filmes com enumerações
Se as categorias em seu aplicativo forem fixas e não forem alteradas, você poderá aproveitar as enumerações para tornar seu código mais robusto e simples de estender. Quando você adiciona uma nova categoria, o valor correto da categoria é gerado. O evita erros de copiar e colar quando você adiciona uma nova categoria, mas esquece de atualizar o valor da categoria.
Abra o arquivo Controllers\HomeController.cs e examine o seguinte código:
public enum eMovieCategories { Action, Drama, Comedy, Science_Fiction };
private void SetViewBagMovieType(eMovieCategories selectedMovie) {
IEnumerable<eMovieCategories> values =
Enum.GetValues(typeof(eMovieCategories))
.Cast<eMovieCategories>();
IEnumerable<SelectListItem> items =
from value in values
select new SelectListItem
{
Text = value.ToString(),
Value = value.ToString(),
Selected = value == selectedMovie,
};
ViewBag.MovieType = items;
}
public ActionResult SelectCategoryEnum() {
SetViewBagMovieType(eMovieCategories.Drama);
return View("SelectCategory");
}
A enumeração eMovieCategories captura os quatro tipos de filme. O SetViewBagMovieType método cria o IEnumerable<SelectListItem > daeMovieCategories enumeração e define a Selected propriedade do selectedMovie parâmetro. O SelectCategoryEnum método de ação usa a mesma exibição que o SelectCategory método de ação.
Navegue até a página Teste e clique no Select Movie Category (Enum) link. Desta vez, em vez de um valor (número) ser exibido, uma string representando a enumeração é exibida.
Lançamento de valores de enumeração
Os formulários HTML são normalmente usados para postar dados no servidor. O código a seguir mostra as HTTP GET versões e HTTP POST do SelectCategoryEnumPost método.
public ActionResult SelectCategoryEnumPost() {
SetViewBagMovieType(eMovieCategories.Comedy);
return View();
}
[HttpPost]
public ActionResult SelectCategoryEnumPost(eMovieCategories MovieType) {
ViewBag.messageString = MovieType.ToString() +
" val = " + (int)MovieType;
return View("Information");
}
Ao passar uma eMovieCategories enumeração para o POST método, podemos extrair o valor da enumeração e a string de enumeração. Execute o exemplo e navegue até a página Teste. Clique no Select Movie Category(Enum Post) link. Selecione um tipo de filme e clique no botão enviar. O visor mostra o valor e o nome do tipo de filme.
Criar um elemento de seleção de várias seções
O auxiliar HTML ListBox renderiza o elemento HTML <select> com o atributo, o multiple que permite que os usuários façam várias seleções. Navegue até o link Teste e selecione o link Seleção múltipla de país . A interface do usuário renderizada permite que você selecione vários países. Na imagem abaixo, Canadá e China são selecionados.
Examinando o código MultiSelectCountry
Examine o código a seguir no arquivo Controllers\HomeController.cs .
private MultiSelectList GetCountries(string[] selectedValues) {
List<Country> Countries = new List<Country>()
{
new Country() { ID = 1, Name= "United States" },
new Country() { ID = 2, Name= "Canada" },
new Country() { ID = 3, Name= "UK" },
new Country() { ID = 4, Name= "China" },
new Country() { ID = 5, Name= "Japan" }
};
return new MultiSelectList(Countries, "ID", "Name", selectedValues);
}
public ActionResult MultiSelectCountry() {
ViewBag.Countrieslist = GetCountries(null);
return View();
}
O GetCountries método cria uma lista de países e a passa para o MultiSelectList construtor. A MultiSelectList sobrecarga do construtor usada no GetCountries método acima usa quatro parâmetros:
public MultiSelectList(
IEnumerable items,
string dataValueField,
string dataTextField,
IEnumerable selectedValues
)
- items: um IEnumerable que contém os itens na lista. No exemplo acima, a lista de Países.
- dataValueField: o nome da propriedade na lista IEnumerable que contém o valor. No exemplo acima, a
IDpropriedade. - dataTextField: o nome da propriedade na lista IEnumerable que contém as informações a serem exibidas. No exemplo acima, a
namepropriedade. - selectedValues: a lista de valores selecionados.
No exemplo acima, o MultiSelectCountry método passa um null valor para os países selecionados, portanto, nenhum país é selecionado quando a interface do usuário é exibida. O código a seguir mostra a marcação Razor usada para renderizar a MultiSelectCountry exibição.
@{
ViewBag.Title = "MultiSelect Country";
Layout = "~/Views/Shared/_Simple_Layout.cshtml";
}
@if (ViewBag.YouSelected != null) {
<div> You Selected: @ViewBag.YouSelected</div>
}
@using (Html.BeginForm()) {
<fieldset>
<legend>Multi-Select Demo</legend>
<div class="editor-field">
@Html.ListBox("Countries", ViewBag.Countrieslist as MultiSelectList
)
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}
O método auxiliar HTML ListBox usado acima usa dois parâmetros, o nome da propriedade para associação de modelo e o MultiSelectList que contém as opções e os valores de seleção. O ViewBag.YouSelected código acima é usado para exibir os valores dos países selecionados ao enviar o formulário. Examine a sobrecarga HTTP POST do MultiSelectCountry método.
[HttpPost]
public ActionResult MultiSelectCountry(FormCollection form) {
ViewBag.YouSelected = form["Countries"];
string selectedValues = form["Countries"];
ViewBag.Countrieslist = GetCountries(selectedValues.Split(','));
return View();
}
A ViewBag.YouSelected propriedade dynamic contém os países selecionados, obtidos para a Countries entrada na coleção de formulários. Nesta versão, o método GetCountries recebe uma lista dos países selecionados, portanto, quando o MultiSelectCountry modo de exibição é exibido, os países selecionados são selecionados na interface do usuário.
Tornando um elemento Select amigável com o plug-in jQuery Harvest Chosen
O plug-in jQuery Harvest Chosen pode ser adicionado a um elemento de seleção> HTML <para criar uma interface de usuário amigável. As imagens abaixo demonstram o plugin jQuery Harvest Chosen com MultiSelectCountry visualização.
Nas duas imagens abaixo, o Canadá está selecionado.
Na imagem acima, o Canadá está selecionado e contém um x no qual você pode clicar para remover a seleção. A imagem abaixo mostra Canadá, China e Japão selecionados.
Conectando o plug-in jQuery Harvest Chosen
A seção a seguir é mais fácil de seguir se você tiver alguma experiência com jQuery. Se você nunca usou o jQuery antes, talvez queira experimentar um dos seguintes tutoriais do jQuery.
- Como funciona o jQuery por John Resig
- Introdução ao jQuery por Jörn Zaefferer
- Exemplos ao vivo de jQuery por Cody Lindley
O plug-in Chosen está incluído nos projetos de amostra iniciais e concluídos que acompanham este tutorial. Para este tutorial, você só precisará usar o jQuery para conectá-lo à interface do usuário. Para usar o plug-in jQuery Harvest Chosen em um projeto MVC ASP.NET, você deve:
- Baixe o plugin Chosen do github. Esta etapa foi feita para você.
- Adicione a pasta Chosen ao seu projeto MVC ASP.NET. Adicione os ativos do plug-in Chosen que você baixou na etapa anterior à pasta Chosen. Esta etapa foi feita para você.
- Conecte o plug-in escolhido ao auxiliar HTML DropDownList ou ListBox .
Conectando o plug-in escolhido à visualização MultiSelectCountry.
Abra o arquivo Views\Home\MultiSelectCountry.cshtml e adicione um htmlAttributes parâmetro ao Html.ListBoxarquivo . O parâmetro que você adicionará contém um nome de classe para o select list(@class = "chzn-select"). O código completo é mostrado abaixo:
<div class="editor-field">
@Html.ListBox("Countries", ViewBag.Countrieslist as MultiSelectList
, new
{
@class = "chzn-select",
data_placeholder = "Choose Countries..."
}
)
</div>
No código acima, estamos adicionando o atributo HTML e o valor class = "chzn-select"do atributo . A classe anterior do caractere @ não tem nada a ver com o mecanismo de exibição Razor. class é uma palavra-chave C#. Palavras-chave C# não podem ser usadas como identificadores, a menos que incluam @ como prefixo. No exemplo acima, é um identificador válido, @class mas class não é porque class é uma palavra-chave.
Adicione referências aos arquivos Escolhido/chosen.jquery.js e Escolhido/chosen.css . O Chosen/chosen.jquery.js e implementa a funcionalidade do plugin Chosen. O arquivo Escolhido/chosen.css fornece o estilo. Adicione essas referências à parte inferior do arquivo Views\Home\MultiSelectCountry.cshtml . O código a seguir mostra como fazer referência ao plug-in Chosen.
<script src="@Url.Content("~/Chosen/chosen.jquery.js")" type="text/javascript"></script><script src="@Url.Content("~/Chosen/chosen.jquery.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Chosen/chosen.css")" rel="stylesheet" type="text/css" />
Ative o plug-in Chosen usando o nome da classe usado no código Html.ListBox . No exemplo acima, o nome da classe é chzn-select. Adicione a linha a seguir à parte inferior do arquivo de exibição Views\Home\MultiSelectCountry.cshtml . Esta linha ativa o plugin Chosen.
<script > $(".chzn-select").chosen(); </script> @*Hookup Chosen Plugin*@
A linha a seguir é a sintaxe para chamar a função jQuery ready, que seleciona o elemento DOM com o nome chzn-selectda classe .
$(".chzn-select")
O conjunto encapsulado retornado da chamada acima aplica o método escolhido (.chosen();), que conecta o plug-in Chosen.
O código a seguir mostra o arquivo de exibição Views\Home\MultiSelectCountry.cshtml concluído.
@{
ViewBag.Title = "MultiSelect Country";
Layout = "~/Views/Shared/_Simple_Layout.cshtml";
}
@if (ViewBag.YouSelected != null) {
<div> You Selected: @ViewBag.YouSelected</div>
}
@using (Html.BeginForm()) {
<fieldset>
<legend>Multi-Select Demo</legend>
<div class="editor-field">
@Html.ListBox("Countries", ViewBag.Countrieslist as MultiSelectList
, new
{
@class = "chzn-select"
}
)
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}
<script src="@Url.Content("~/Chosen/chosen.jquery.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Chosen/chosen.css")" rel="stylesheet" type="text/css" />
<script > $(".chzn-select").chosen(); </script> @*Hookup Chosen Plugin*@
Execute o aplicativo e navegue até a MultiSelectCountry exibição. Tente adicionar e excluir países. O download de exemplo fornecido também contém um método e uma MultiCountryVM exibição que implementa a funcionalidade MultiSelectCountry usando um modelo de exibição em vez de um ViewBag.
Na próxima seção, você verá como o mecanismo de scaffolding ASP.NET MVC funciona com o auxiliar DropDownList .