Usar o auxiliar do DropDownList com ASP.NET MVC
por Rick Anderson
Este tutorial ensinará os conceitos básicos de como trabalhar com o auxiliar DropDownList e o auxiliar ListBox em um aplicativo Web ASP.NET MVC. 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 das ferramentas do ASP.NET MVC 3
- SQL Server Compact 4.0(runtime + 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ê concluiu o tutorial Introdução ao MVC ASP.NET ou o tutorialASP.NET MVC Music Store ou está familiarizado com ASP.NET desenvolvimento 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á jQuery para adicionar uma caixa de diálogo inserir categoria que pode ser usada quando uma nova categoria (como gênero ou artista) é necessária. Abaixo está uma captura de tela do modo de exibiçã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 link a seguir, Baixar. 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 doDDL_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). Uma lista Seleção de Tipo de Filme é exibida, com Comédia o valor selecionado.
Clique com o botão direito do mouse no navegador e selecione exibir fonte. O HTML da página é exibido. O código a seguir mostra o HTML para o 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 pressione o botão Enviar . A 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 >, explicitamente ou implicitamente. Ou seja, você pode passar o IEnumerable<SelectListItem > explicitamente para o auxiliar DropDownList ou adicionar o IEnumerable<SelectListItem > ao ViewBag usando o mesmo nome para SelectListItem que a propriedade de modelo. Passar o SelectListItem implicitamente e explicitamente é abordado 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 Comedy
SelectListItem tem a propriedade Selected definida como true; isso fará com que a lista selecionada 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 de 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 usa como padrão a postagem dos 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 encontrar um SelectListItem >IEnumerable< no ViewBag.
- Ele é associado a dados ao elemento de formulário MovieType. Se o método submit for HTTP GET,
MovieType
será uma cadeia de caracteres de consulta. Se o método submit for HTTP POST,MovieType
será adicionado ao 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 CategoryChosen
método ao 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 SelectList html . A página HTML renderiza um elemento select semelhante à página de teste simples ASP.NET MVC. Clique com o botão direito do mouse na janela do navegador e selecione exibir 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 ASP.NET MVC e a exibição que testamos anteriormente.
Aprimorando 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 mais simples de estender. Quando você adiciona uma nova categoria, o valor de categoria correto é gerado. O evita copiar e colar erros 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çãoeMovieCategories
captura os quatro tipos de filme. O SetViewBagMovieType
método cria o IEnumerable<SelectListItem > a eMovieCategories
partir da 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 método de SelectCategory
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 cadeia de caracteres que representa a enumeração é exibida.
Postando valores de enumeração
Formulários HTML normalmente são 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 de enumeração e a cadeia de caracteres 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 pressione o botão Enviar. A exibição mostra o valor e o nome do tipo de filme.
Criando um elemento select de várias seções
O auxiliar html ListBox renderiza o elemento HTML <select>
com o multiple
atributo , o que permite que os usuários façam várias seleções. Navegue até o link Teste e, em seguida, selecione o link Selecionar País Multi . A interface do usuário renderizada permite que você selecione vários países. Na imagem abaixo, Canadá e China estão selecionados.
Examinando o código MultiSelectCountry
Examine o código a seguir do 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, em seguida, passa-a 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
ID
propriedade . - dataTextField: o nome da propriedade na lista IEnumerable que contém as informações a serem exibidas. No exemplo acima, a
name
propriedade . - 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 exibição MultiSelectCountry
.
@{
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 ListBox auxiliar HTML usado acima usa dois parâmetros, o nome da propriedade para modelar a associação 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 que você selecionou 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 dinâmica 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 a MultiSelectCountry
exibição é exibida, os países selecionados são selecionados na interface do usuário.
Tornando um elemento Select amigável com o plug-in jQuery escolhido pela colheita
O plug-in jQuery Escolhido pela Colheita pode ser adicionado a um elemento de seleção> HTML <para criar uma interface do usuário amigável. As imagens abaixo demonstram o plug-in jQuery Escolhido pela Colheita com MultiSelectCountry
exibição.
Nas duas imagens abaixo, Canadá está selecionado.
Na imagem acima, Canadá está selecionado e contém um x que você pode clicar para remover a seleção. A imagem abaixo mostra o Canadá, a China e o Japão selecionados.
Conectando o plug-in jQuery escolhido pela colheita
A seção a seguir é mais fácil de seguir se você tiver alguma experiência com o jQuery. Se você nunca usou o jQuery antes, talvez queira experimentar um dos tutoriais do jQuery a seguir.
- Como jQuery Funciona por John Resig
- Introdução com jQuery por Jörn Zaefferer
- Exemplos ao vivo de jQuery por Cody Lindley
O plug-in Escolhido está incluído nos projetos de exemplo 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 Escolhido pela Colheita em um projeto MVC ASP.NET, você deve:
- Baixe o plug-in Escolhido do github. Esta etapa foi feita para você.
- Adicione a pasta Escolhido ao projeto MVC do ASP.NET. Adicione os ativos do plug-in Escolhido que você baixou na etapa anterior à pasta Escolhido. Esta etapa foi feita para você.
- Conecte o plug-in escolhido ao auxiliar de HTML DropDownList ou ListBox .
Conectando o Plug-in Escolhido ao Modo de Exibição MultiSelectCountry.
Abra o arquivo Views\Home\MultiSelectCountry.cshtml e adicione um htmlAttributes
parâmetro ao Html.ListBox
. O parâmetro que você adicionará contém um nome de classe para a lista de seleção(@class = "chzn-select"
). O código concluído é 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 de caractere @ não tem nada a ver com o mecanismo de exibição razor. class
é um palavra-chave C#. As palavras-chave C# não podem ser usadas como identificadores, a menos que incluam @ como um prefixo. No exemplo acima, é um identificador válido, @class
mas a classe não é porque a classe é uma palavra-chave.
Adicione referências aos arquivos Chosen/chosen.jquery.js e Chosen/chosen.css . O Escolhido/chosen.jquery.js e implementa o funcionalmente do plug-in Escolhido. O arquivo Chosen/chosen.css fornece o estilo. Adicione essas referências à parte inferior do arquivo Views\Home\MultiSelectCountry.cshtml . O código a seguir mostra como referenciar o plug-in Escolhido.
<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 Escolhido 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 . Essa linha ativa o plug-in Escolhido.
<script > $(".chzn-select").chosen(); </script> @*Hookup Chosen Plugin*@
A linha a seguir é a sintaxe para chamar a função pronta jQuery, que seleciona o elemento DOM com o nome chzn-select
de classe .
$(".chzn-select")
O conjunto encapsulado retornado da chamada acima aplica o método escolhido (.chosen();
), que conecta o plug-in Escolhido.
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é o modo de exibição MultiSelectCountry
. 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 do ASP.NET MVC funciona com o auxiliar DropDownList .
Comentários
https://aka.ms/ContentUserFeedback.
Em breve: ao longo de 2024, vamos eliminar problemas do GitHub como o mecanismo de comentários para conteúdo e substituí-lo por um novo sistema de comentários. Para obter mais informações, consulte:Enviar e exibir comentários de