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:

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.

Imagem usando o auxiliar de lista suspensa

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.

Imagem da caixa de diálogo propriedades 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 .

Imagem do link de teste do aplicativo

Selecione o link Selecionar Categoria de Filme (Simples). Uma lista Seleção de Tipo de Filme é exibida, com Comédia o valor selecionado.

Imagem da lista de seleção de tipo de filme

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.

Imagem da URL no navegador

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 ComedySelectListItem 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.

Imagem da cadeia de caracteres de consulta com 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.

Imagem de valor e 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.

Imagem da lista suspensa de várias seleções

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

)
  1. items: um IEnumerable que contém os itens na lista. No exemplo acima, a lista de Países.
  2. dataValueField: o nome da propriedade na lista IEnumerable que contém o valor. No exemplo acima, a ID propriedade .
  3. dataTextField: o nome da propriedade na lista IEnumerable que contém as informações a serem exibidas. No exemplo acima, a name propriedade .
  4. 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.

Imagem do plug-in harvest chosen j Query

Nas duas imagens abaixo, Canadá está selecionado.

Imagem do Canadá selecionada

Imagem do Canadá selecionada com X para remover

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.

Imagem do Canadá China e Japão selecionada

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.

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:

  1. Baixe o plug-in Escolhido do github. Esta etapa foi feita para você.
  2. 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ê.
  3. 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-selectde 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 .