Adicionar uma nova categoria ao DropDownList usando o jQuery UI

por Rick Anderson

A tag HTML Select é ideal para apresentar uma lista de dados de categoria fixa, mas muitas vezes você precisa adicionar uma nova categoria. Suponha que queremos adicionar o gênero "Ópera" às categorias em nosso banco de dados? Nesta seção, usaremos a interface do usuário do jQuery para adicionar uma caixa de diálogo que podemos usar para adicionar uma nova categoria. A imagem abaixo mostra como a interface do usuário será apresentada no navegador.

Quando um usuário seleciona o link Adicionar Novo Gênero , uma caixa de diálogo pop-up solicita ao usuário um novo nome de gênero (e, opcionalmente, uma descrição). A imagem abaixo mostra a caixa de diálogo pop-up Adicionar gênero .

Quando um novo nome de gênero é inserido e o botão Salvar é pressionado, acontece o seguinte:

1. Uma chamada AJAX posta os dados no método Create do Genre Controller, que salva o novo gênero no banco de dados e retorna as novas informações de gênero (nome e ID do gênero) como JSON.

2. O JavaScript adiciona os novos dados de gênero à lista de seleção.

3. O JavaScript torna o novo gênero o item selecionado.

   Na imagem abaixo, o Opera foi adicionado ao banco de dados e selecionado na lista suspensa Gênero .

Abra o arquivo Views\StoreManager\Create.cshtml e substitua a marcação de gênero pelo seguinte código:

<div class="editor-field ui-widget">

     @Html.Partial("_ChooseGenre")

</div>

A _ChooseGenre visualização parcial conterá toda a lógica para conectar o JavaScript e o jQuery usados para implementar o recurso adicionar novo gênero. Depois de concluir o código, será simples fazer o mesmo com a interface do artista.

No Gerenciador de Soluções, clique com o botão direito do mouse na pasta Views\StoreManager e selecione Adicionar e, em seguida , Exibir. Na entrada Nome da vista, insira _ChooseGenre e selecione Adicionar. Substitua a marcação no arquivo Views\StoreManager\_ChooseGenre.cshtml pelo seguinte:

@model MvcMusicStore.Models.Album

<div class="editor-label">

    @Html.LabelFor(model => model.GenreId, "Genre" )

</div>

@Html.DropDownList("GenreId", ViewBag.Genres as SelectList, String.Empty)

<a class="button" href="@Url.Content("~/Genre/Create")" 

    id="genreAddLink">Add New Genre</a>

@Html.ValidationMessageFor(model => model.GenreId)

<div id="genreDialog" class="hidden">

</div>

<script src="@Url.Content( "~/Scripts/ui/jquery.ui.combobox.js" )"></script>

<script src="@Url.Content("~/Scripts/chooseGenre.js")"></script>

A primeira linha declara que estamos passando um Album como nosso modelo, exatamente a mesma instrução de modelo encontrada na visualização Criar. As próximas linhas são a marcação auxiliar Label . A próxima linha é a chamada auxiliar DropDownList , exatamente a mesma que no modo de exibição Create original. A próxima linha adiciona um link com o nome Add New Genree o estiliza como um botão. A linha que contém ValidationMessageFor é copiada diretamente da visualização Criar. As seguintes linhas:

<div id="genreDialog" class="hidden">

</div>

cria um div oculto, com o ID de genreDialog. Usaremos o jQuery para conectar nossa caixa de diálogo Adicionar Gênero com o ID genreDialog nesta div. As duas últimas tags de script contêm links para os arquivos JavaScript que usaremos para implementar o recurso adicionar novo gênero. O arquivo /Scripts/chooseGenre.js é fornecido para você no projeto, vamos examiná-lo mais adiante no tutorial.

Execute o aplicativo e clique no botão Adicionar novo gênero . Na caixa de diálogo Adicionar gênero, insira Opera na caixa de entrada Nome.

Clique no botão Salvar . Uma chamada AJAX cria a categoria Opera e, em seguida, preenche a lista suspensa com o Opera e define o Opera como o gênero selecionado.

Insira um artista, título e preço e selecione o botão Criar . Se você inserir um preço inferior a US$ 8,99, o novo álbum aparecerá na parte superior da visualização do índice. Verifique se a nova entrada do álbum foi salva no banco de dados.

Tente criar um novo gênero com apenas uma letra. O código a seguir no arquivo Models\Genre.cs define o comprimento mínimo e máximo do nome do gênero.

[StringLength(20, MinimumLength = 2)]
public string Name { get; set; }

Relatórios de validação do lado do cliente, você deve inserir uma string entre 2 e 20 caracteres.

Examinando como um novo gênero é adicionado ao banco de dados e à lista de seleção.

Abra o arquivo Scripts\chooseGenre.js e examine o código.

$(function () {

    $('#genreDialog').dialog({

        autoOpen: false,

        width: 400,

        height: 300,

        modal: true,

        title: 'Add Genre',

        buttons: {

            'Save': function () {

                // Omitted 

            },

            'Cancel': function () {

                $(this).dialog('close');

            }

        }

    });

A segunda linha usa a ID genreDialog para criar uma caixa de diálogo na marca div no arquivo Views\StoreManager\_ChooseGenre.cshtml . A maioria dos parâmetros nomeados são autoexplicativos. O autoOpen parâmetro é definido como false, selecionar o botão Criar Gênero abrirá a caixa de diálogo explicitamente (isso é descrito mais adiante). A caixa de diálogo tem dois botões, Salvar e Cancelar. O botão Cancelar fecha a caixa de diálogo. O código a seguir mostra a função do botão Salvar .

'Save': function () {

    var createGenreForm = $('#createGenreForm');

    if (createGenreForm.valid()) {

        $.post(createGenreForm.attr('action'), createGenreForm.serialize(), function (data) {

            if (data.Error != '') {

                alert(data.Error);

            }

            else {

                // Add the new genre to the dropdown list and select it

                $('#GenreId').append(

                        $('<option></option>')

                            .val(data.Genre.GenreId)

                            .html(data.Genre.Name)

                            .prop('selected', true)  // Selects the new Genre in the DropDown LB

                    );

                $('#genreDialog').dialog('close');

            }

        });

    }

},

O var createGenreForm é selecionado a partir do createGenreForm ID. A createGenreForm ID foi definida no código a seguir encontrado no arquivo Views\Genre\_CreateGenre.cshtml .

@model MvcMusicStore.Models.Genre

@using (Html.BeginForm("Create", "Genre", FormMethod.Post, new { id = "createGenreForm" }))

{

    @*Omitted for clarity.*@

}

A sobrecarga auxiliar Html.BeginForm usada no arquivo Views\Genre\_CreateGenre.cshtml gera HTML com um atributo de ação que contém a URL para enviar o formulário. Você pode ver isso exibindo a página de criação de álbum em um navegador e selecionando mostrar fonte no navegador. A marcação a seguir mostra o HTML gerado que contém a tag de formulário.

<form action="/StoreManager/Create" method="post">

A linha jQuery $.post faz uma chamada AJAX para o atributo action (/StoreManager/Create) e transmite os dados da caixa de diálogo Criar gênero . Os dados consistem no nome do novo gênero e uma descrição opcional. Se a chamada AJAX for bem-sucedida, o novo nome e valor do gênero serão adicionados à marcação Select e o novo gênero será definido como o valor selecionado. Como essa é uma marcação gerada dinamicamente, você não pode ver a nova opção de seleção exibindo a origem no navegador. Você pode ver o novo HTML com as ferramentas de desenvolvedor do IE 9 F12. Para exibir a nova opção de seleção, no Internet Explorer 9, pressione a tecla F12 para iniciar as ferramentas de desenvolvedor F12. Navegue até a página Criar e adicione um novo gênero para que o novo gênero seja selecionado na lista de seleção de gênero. Nas ferramentas de desenvolvedor F12:

1. Selecione a guia HTML.

2. Clique no ícone de atualização.
   

3. Na caixa de pesquisa, digite GenreID.

4. Usando o próximo ícone,
   
   Navegue até a seguinte tag SELECT:

   <select name="GenreId" id="GenreId" >
   

5. Expanda o último valor da opção.

O código a seguir no arquivo Scripts\chooseGenre.js mostra como o botão Adicionar Novo Gênero se conecta ao evento de clique e como a caixa de diálogo Adicionar Novo Gênero é criada.

$('#genreAddLink').click(function () {

    var createFormUrl = $(this).attr('href');  

    $('#genreDialog').html('')

    .load(createFormUrl, function () {  

        // The createGenreForm is loaded on the fly using jQuery load. 

        // In order to have client validation working it is necessary to tell the 

        // jQuery.validator to parse the newly added content

        jQuery.validator.unobtrusive.parse('#createGenreForm');

        $('#genreDialog').dialog('open');

    });

    return false;

});

A primeira linha cria uma função de clique anexada ao botão Adicionar novo gênero . A marcação a seguir do arquivo Views\StoreManager\_ChooseGenre.cshtml mostra como o botão Adicionar Novo Gênero é criado:

<a class="button" href="@Url.Content("~/Genre/Create")" 

    id="genreAddLink">Add New Genre</a>

O método load cria e abre a caixa de diálogo Adicionar Gênero e chama o método jQuery parse para que a validação do cliente ocorra nos dados inseridos na caixa de diálogo.

Nesta seção, você aprendeu como criar uma caixa de diálogo que pode ser usada para adicionar novos dados de categoria a uma lista de seleção. Você pode seguir o mesmo procedimento para criar a interface do usuário para adicionar um novo artista à lista de seleção de artistas. Este tutorial forneceu uma visão geral do trabalho com o auxiliar HTML do ASP.NET MVC DropDownList. Para obter informações adicionais sobre como trabalhar com o DropDownList, consulte a seção de referências de adição abaixo. Por favor, deixe-nos saber se este tutorial foi útil.

Referências adicionais

• ASP.NET MVC – Tutorial de listas suspensas em cascata por Radu Enuca
• Escolhido Um plug-in JavaScript que suporta seleção múltipla e filtragem.

Colaboradores

• Radu Enuca
• Jean-Sébastien Goupil
• Brad Wilson

Revisores

• Jean-Sébastien Goupil
• Brad Wilson
• Mike Pope
• Tom Dykstra

Anterior