Adicionar uma nova categoria ao DropDownList usando o jQuery UI

por Rick Anderson

A marca HTML Select é ideal para apresentar uma lista de dados de categoria fixa, mas muitas vezes você precisa adicionar uma nova categoria. Suponha que desejamos adicionar o gênero "Opera" à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, o seguinte acontece:

1. Uma chamada AJAX posta os dados no método Create do Controlador de Gênero, que salva o novo gênero no banco de dados e retorna as novas informações de gênero (nome do gênero e ID) 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, 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 exibiçã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 concluirmos o código, será simples fazer o mesmo com a interface do usuário do artista.

Em 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 Exibir nome , 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 no modo de exibição Criar. As próximas linhas são a marcação auxiliar rótulo . 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 estilos como um botão. A linha que contém ValidationMessageFor é copiada diretamente do modo de exibição Criar. As seguintes linhas:

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

</div>

cria um div oculto, com a ID de genreDialog. Usaremos jQuery para conectar nossa caixa de diálogo Adicionar Gênero com a ID genreDialog neste div. As duas últimas marcas 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 posteriormente 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 preenche a lista suspensa com Opera e define Opera como o gênero selecionado.

Insira um artista, título e preço e, em seguida, selecione o botão Criar . Se você inserir um preço inferior a US$ 8,99, o novo álbum aparecerá na parte superior da exibição Índice. Verifique se a entrada do novo á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 cadeia de caracteres entre 2 e 20 caracteres.

Examinando como um novo gênero é adicionado ao banco de dados e à lista Selecionar.

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, selecionando o botão Criar Gênero abrirá o diálogo explicitamente (isso é descrito no último). 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 de 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 está selecionado na 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 do 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 criar álbum em um navegador e selecionando mostrar origem no navegador. A marcação a seguir mostra o HTML gerado que contém a marca de formulário.

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

A linha jQuery $.post faz uma chamada AJAX para o atributo de ação (/StoreManager/Create) e passa 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 de gênero e o valor serão adicionados à marcação Selecionar e o novo gênero será definido como o valor selecionado. Como essa 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, na Internet Explorer 9, clique na 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 atualizar.
   

3. Na caixa de pesquisa, insira GenreID.

4. Usando o próximo ícone,
   
   navegue até a seguinte marca de seleção:

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

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

O código a seguir no arquivo Scripts\chooseGenre.js mostra como o botão Adicionar Novo Gênero é conectado 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 a 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 do artista. Este tutorial deu uma visão geral de como trabalhar com o auxiliar de HTML do ASP.NET MVC DropDownList. Para obter informações adicionais sobre como trabalhar com o DropDownList, consulte a seção referências de adição abaixo. Informe-nos se este tutorial foi útil.

Rick.Anderson[at]Microsoft.com

Referências adicionais

• ASP.NET tutorial de listas suspensas em cascata do MVC por Radu Enuca
• Escolhido Um plug-in JavaScript que dá suporte à filtragem e seleção múltipla.

Colaboradores

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

Revisores

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

Anterior