Condividi tramite

Aggiunta di una nuova categoria a DropDownList tramite l'interfaccia utente di jQuery

  • Articolo

di Rick Anderson

Il tag HTML Select è ideale per presentare un elenco di dati di categoria fissa, ma spesso è necessario aggiungere una nuova categoria. Si supponga di voler aggiungere il genere "Opera" alle categorie nel database? In questa sezione si userà l'interfaccia utente di jQuery per aggiungere una finestra di dialogo che è possibile usare per aggiungere una nuova categoria. L'immagine seguente mostra come l'interfaccia utente verrà presente nel browser.

Immagine di U I in una finestra del browser

Quando un utente seleziona il collegamento Aggiungi nuovo genere , una finestra di dialogo popup richiede all'utente un nuovo nome di genere (e facoltativamente una descrizione). L'immagine seguente mostra la finestra di dialogo popup Aggiungi genere .

Immagine della finestra di dialogo popup aggiungi genere

Quando viene immesso un nuovo nome di genere e viene premuto il pulsante Salva , si verifica quanto segue:

  1. Una chiamata AJAX invia i dati al metodo Create di Genre Controller, che salva il nuovo genere nel database e restituisce le nuove informazioni sul genere (nome genere e ID) come JSON.

  2. JavaScript aggiunge i nuovi dati di genere all'elenco di selezione.

  3. JavaScript rende il nuovo genere l'elemento selezionato.

    Nell'immagine seguente Opera è stata aggiunta al database e selezionata nell'elenco a discesa Genere.

Immagine della selezione dell'elenco a discesa

Aprire il file Views\StoreManager\Create.cshtml e sostituire il markup di genere con il codice seguente:

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

     @Html.Partial("_ChooseGenre")

</div>

La _ChooseGenre visualizzazione parziale conterrà tutta la logica per associare JavaScript e jQuery usati per implementare la nuova funzionalità di genere. Una volta completato il codice, sarà semplice eseguire la stessa operazione con l'interfaccia utente dell'artista.

In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella Views\StoreManager e scegliere Aggiungi, quindi Visualizza. Nell'input Visualizza nome immettere _ChooseGenre e quindi selezionare Aggiungi. Sostituire il markup nel file Views\StoreManager\_ChooseGenre.cshtml con quanto segue:

@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>

La prima riga dichiara che si passa un oggetto Album come modello, esattamente la stessa istruzione del modello trovata nella visualizzazione Crea. Le righe successive sono il markup helper Label . La riga successiva è la chiamata helper DropDownList , esattamente come nella visualizzazione di creazione originale. La riga successiva aggiunge un collegamento con il nome Add New Genree lo stili come un pulsante. La riga contenente ValidationMessageFor viene copiata direttamente dalla visualizzazione Crea. Le righe seguenti:

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

</div>

crea un div nascosto, con l'ID di genreDialog. Verrà usato jQuery per associare la finestra di dialogo Aggiungi genere con l'ID genreDialog in questo div. Gli ultimi due tag di script contengono collegamenti ai file JavaScript che verranno usati per implementare la nuova funzionalità aggiungi genere. Il file /Scripts/chooseGenre.js viene fornito per l'utente nel progetto, che verrà esaminato più avanti nell'esercitazione.

Eseguire l'applicazione e fare clic sul pulsante Aggiungi nuovo genere . Nella finestra di dialogo Aggiungi genere immettere Opera nella casella di input Nome.

Immagine della finestra di dialogo Aggiungi genere

Fare clic sul pulsante Salva. Una chiamata AJAX crea la categoria Opera e quindi popola l'elenco a discesa con Opera e imposta Opera come genere selezionato.

Immagine dell'elenco a discesa popolato

Immettere un artista, un titolo e un prezzo, quindi selezionare il pulsante Crea . Se si immette un prezzo inferiore a $8,99, il nuovo album verrà visualizzato nella parte superiore della visualizzazione Indice. Verificare che la voce del nuovo album sia stata salvata nel database.

Immagine che verifica che la voce del nuovo album sia stata salvata nel database

Provare a creare un nuovo genere con una sola lettera. Il codice seguente nel file Models\Genre.cs imposta la lunghezza minima e massima del nome del genere.

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

I report di convalida lato client devono essere immessi in una stringa compresa tra 2 e 20 caratteri.

Immagine della convalida lato client

Esame della modalità di aggiunta di un nuovo genere al database e all'elenco Di selezione.

Aprire il file Scripts\chooseGenre.js ed esaminare il codice.

$(function () {

    $('#genreDialog').dialog({

        autoOpen: false,

        width: 400,

        height: 300,

        modal: true,

        title: 'Add Genre',

        buttons: {

            'Save': function () {

                // Omitted 

            },

            'Cancel': function () {

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

            }

        }

    });

La seconda riga usa l'ID genreDialog per creare una finestra di dialogo nel tag div nel file Views\StoreManager\_ChooseGenre.cshtml . La maggior parte dei parametri denominati è autoesplicativo. Il autoOpen parametro è impostato su false, selezionando il pulsante Crea genere si aprirà in modo esplicito la finestra di dialogo( questa è descritta in quest'ultima sezione). La finestra di dialogo include due pulsanti, Salva e Annulla. Il pulsante Annulla chiude la finestra di dialogo. Il codice seguente mostra la funzione pulsante Salva .

'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');

            }

        });

    }

},

L'oggetto var createGenreForm viene selezionato dall'ID createGenreForm . L'ID createGenreForm è stato impostato nel codice seguente trovato nel file Views\Genre\_CreateGenre.cshtml .

@model MvcMusicStore.Models.Genre

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

{

    @*Omitted for clarity.*@

}

L'overload helper Html.BeginForm usato nel file Views\Genre\_CreateGenre.cshtml genera codice HTML con un attributo di azione contenente l'URL per inviare il modulo. È possibile visualizzare questo problema visualizzando la pagina crea album in un browser e selezionando Mostra origine nel browser. Il markup seguente mostra il codice HTML generato contenente il tag del modulo.

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

La riga jQuery $.post effettua una chiamata AJAX all'attributo azione (/StoreManager/Create) e passa i dati dalla finestra di dialogo Crea genere . I dati sono costituiti dal nome del nuovo genere e da una descrizione facoltativa. Se la chiamata AJAX ha esito positivo, il nuovo nome e il nuovo valore del genere vengono aggiunti al markup Select e il nuovo genere viene impostato sul valore selezionato. Poiché questo markup viene generato dinamicamente, non è possibile visualizzare la nuova opzione di selezione visualizzando l'origine nel browser. È possibile visualizzare il nuovo codice HTML con gli strumenti di sviluppo F12 di Internet Explorer 9. Per visualizzare la nuova opzione di selezione, in Internet Explorer 9 premere il tasto F12 per avviare gli strumenti di sviluppo F12. Passare alla pagina Crea e aggiungere un nuovo genere in modo che il nuovo genere sia selezionato nell'elenco di selezione genere. Negli strumenti di sviluppo F12:

  1. Seleziona la scheda HTML.

  2. Premere l'icona di aggiornamento.
    Immagine della selezione dell'icona di aggiornamento

  3. Nella casella di ricerca immettere GenreID.

  4. Uso dell'icona successiva,
    Immagine della selezione dell'icona successiva
    passare al tag di selezione seguente:

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

  5. Espandere l'ultimo valore dell'opzione.

Immagine della visualizzazione espansa

Nel codice seguente nel file Scripts\chooseGenre.js viene illustrato il modo in cui il pulsante Aggiungi nuovo genere viene connesso all'evento click e come viene creata la finestra di dialogo Aggiungi nuovo genere .

$('#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;

});

La prima riga crea una funzione click collegata al pulsante Aggiungi nuovo genere . Il markup seguente del file Views\StoreManager\_ChooseGenre.cshtml mostra come viene creato il pulsante Aggiungi nuovo genere :

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

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

Il metodo load crea e apre la finestra di dialogo Aggiungi genere e chiama il metodo jQuery parse in modo che la convalida client venga eseguita sui dati immessi nella finestra di dialogo.

In questa sezione si è appreso come creare una finestra di dialogo che può essere usata per aggiungere nuovi dati di categoria a un elenco di selezione. È possibile seguire la stessa procedura per creare l'interfaccia utente per aggiungere un nuovo artista all'elenco di selezione dell'artista. Questa esercitazione ha fornito una panoramica dell'uso dell'helper HTML MVC ASP.NET DropDownList. Per altre informazioni sull'uso di DropDownList, vedere la sezione dei riferimenti di addizione di seguito. Segnalare se questa esercitazione è stata utile.

Riferimenti aggiuntivi

Collaboratori

Revisori

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

Indietro