Udostępnij za pośrednictwem


Dodawanie nowej kategorii do metody DropDownList przy użyciu zestawu jQuery UI

Autor: Rick Anderson

Tag HTML Select jest idealny do prezentowania listy stałych danych kategorii, ale często trzeba dodać nową kategorię. Załóżmy, że chcemy dodać gatunek "Opera" do kategorii w naszej bazie danych? W tej sekcji użyjemy interfejsu użytkownika jQuery, aby dodać okno dialogowe, za pomocą których można dodać nową kategorię. Na poniższej ilustracji przedstawiono sposób prezentowania interfejsu użytkownika w przeglądarce.

Obraz przedstawiający interfejs użytkownika w oknie przeglądarki

Gdy użytkownik wybierze link Dodaj nowy gatunek , okno dialogowe wyskakujące wyświetli monit o podanie nowej nazwy gatunku (i opcjonalnie opis). Na poniższej ilustracji przedstawiono wyskakujące okno dialogowe Dodawanie gatunku .

Obraz przedstawiający okno dialogowe dodawania gatunku

Po wprowadzeniu nowej nazwy gatunku i naciśnięciu przycisku Zapisz następuje:

  1. Wywołanie AJAX publikuje dane w metodzie Create kontrolera gatunku, która zapisuje nowy gatunek w bazie danych i zwraca nowe informacje o gatunku (nazwa gatunku i identyfikator) jako dane JSON.

  2. Język JavaScript dodaje nowe dane gatunku do listy wyboru.

  3. Język JavaScript sprawia, że nowy gatunek jest wybranym elementem.

    Na poniższej ilustracji opera została dodana do bazy danych i wybrana na liście rozwijanej Gatunek .

Obraz przedstawiający wybór listy rozwijanej

Otwórz plik Views\StoreManager\Create.cshtml i zastąp znacznik gatunku następującym kodem:

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

     @Html.Partial("_ChooseGenre")

</div>

Widok _ChooseGenre częściowy będzie zawierać całą logikę podłączania skryptów JavaScript i jQuery używanych do implementowania funkcji dodawania nowego gatunku. Po ukończeniu kodu będzie to proste, aby wykonać to samo za pomocą interfejsu użytkownika artysty.

W Eksplorator rozwiązań kliknij prawym przyciskiem myszy folder Views\StoreManager i wybierz polecenie Dodaj, a następnie pozycję Wyświetl. W danych wejściowych Nazwa widoku wprowadź, _ChooseGenre a następnie wybierz pozycję Dodaj. Zastąp znaczniki w pliku Views\StoreManager\_ChooseGenre.cshtml następującym kodem:

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

Pierwszy wiersz deklaruje, że przekazujemy Album jako model dokładnie tę samą instrukcję modelu znajdującą się w widoku Tworzenie. Następne kilka wierszy to znacznik pomocnika etykiet . Następny wiersz to wywołanie pomocnika DropDownList , dokładnie takie samo jak w oryginalnym widoku Utwórz. Następny wiersz dodaje link o nazwie Add New Genrei styluje go jak przycisk. Wiersz zawierający ValidationMessageFor jest kopiowany bezpośrednio z widoku Tworzenie. Następujące wiersze:

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

</div>

tworzy ukryty element div z identyfikatorem genreDialog. Użyjemy biblioteki jQuery, aby podłączyć okno dialogowe Dodawanie gatunku z identyfikatorem genreDialog w tym div. Ostatnie dwa tagi skryptu zawierają linki do plików JavaScript, których użyjemy do zaimplementowania funkcji dodawania nowego gatunku. Plik /Scripts/chooseGenre.js jest udostępniany w projekcie, przeanalizujemy go w dalszej części tego samouczka.

Uruchom aplikację i kliknij przycisk Dodaj nowy gatunek . W oknie dialogowym Dodawanie gatunku wprowadź wartość Opera w polu Wprowadzanie nazwy.

Obraz przedstawiający okno dialogowe dodawania gatunku

Kliknij przycisk Zapisz. Wywołanie AJAX tworzy kategorię Opera, a następnie wypełnia listę rozwijaną operą i ustawia Opera jako wybrany gatunek.

Obraz wypełnionej listy rozwijanej

Wprowadź artystę, tytuł i cenę, a następnie wybierz przycisk Utwórz . Jeśli wprowadzisz cenę niższą niż 8,99 USD, nowy album pojawi się w górnej części widoku Indeks. Sprawdź, czy nowy wpis albumu został zapisany w bazie danych.

Obraz weryfikując wpis nowego albumu został zapisany w bazie danych

Spróbuj utworzyć nowy gatunek z tylko jedną literą. Poniższy kod w pliku Models\Genre.cs ustawia minimalną i maksymalną długość nazwy gatunku.

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

Raporty weryfikacji po stronie klienta należy wprowadzić ciąg z zakresu od 2 do 20 znaków.

Obraz weryfikacji po stronie klienta

Badanie sposobu dodawania nowego gatunku do bazy danych i listy wybierz.

Otwórz plik Scripts\chooseGenre.js i sprawdź kod.

$(function () {

    $('#genreDialog').dialog({

        autoOpen: false,

        width: 400,

        height: 300,

        modal: true,

        title: 'Add Genre',

        buttons: {

            'Save': function () {

                // Omitted 

            },

            'Cancel': function () {

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

            }

        }

    });

Drugi wiersz używa identyfikatora genreDialog do utworzenia okna dialogowego w tagu div w pliku Views\StoreManager\_ChooseGenre.cshtml . Większość nazwanych parametrów nie wymaga objaśnienia. Parametr autoOpen jest ustawiony na wartość false, wybranie przycisku Utwórz gatunek spowoduje otwarcie okna dialogowego jawnie (opisano to później). Okno dialogowe zawiera dwa przyciski: Zapisz i Anuluj. Przycisk Anuluj zamyka okno dialogowe. Poniższy kod przedstawia funkcję przycisku Zapisz .

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

            }

        });

    }

},

Element var createGenreForm jest wybierany z identyfikatora createGenreForm . createGenreForm Identyfikator został ustawiony w poniższym kodzie znajdującym się w pliku Views\Genre\_CreateGenre.cshtml.

@model MvcMusicStore.Models.Genre

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

{

    @*Omitted for clarity.*@

}

Przeciążenie pomocnika Html.BeginForm używane w pliku Views\Genre\_CreateGenre.cshtml generuje kod HTML z atrybutem akcji zawierającym adres URL do przesłania formularza. Możesz to zobaczyć, wyświetlając stronę tworzenia albumu w przeglądarce i wybierając pozycję Pokaż źródło w przeglądarce. Poniższy znacznik przedstawia wygenerowany kod HTML zawierający tag formularza.

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

Wiersz jQuery $.post wykonuje wywołanie AJAX do atrybutu akcji (/StoreManager/Create) i przekazuje dane z okna dialogowego Tworzenie gatunku . Dane składają się z nazwy nowego gatunku i opcjonalnego opisu. Jeśli wywołanie AJAX powiedzie się, nowa nazwa i wartość gatunku zostaną dodane do znacznika Select, a nowy gatunek zostanie ustawiony na wybraną wartość. Ponieważ jest to dynamicznie generowane znaczniki, nie można wyświetlić nowej opcji wyboru, wyświetlając źródło w przeglądarce. Nowy kod HTML można zobaczyć przy użyciu narzędzi deweloperskich IE 9 F12. Aby wyświetlić nową opcję wyboru, w programie Internet Explorer 9 naciśnij F12, aby uruchomić narzędzia deweloperskie F12. Przejdź do strony Tworzenie i dodaj nowy gatunek, aby nowy gatunek został wybrany na liście wyboru gatunku. W narzędziach deweloperskich F12:

  1. Wybierz kartę HTML.

  2. Naciśnij ikonę odświeżania.
    Obraz przedstawiający wybór ikony odświeżania

  3. W polu wyszukiwania wprowadź ciąg GenreID.

  4. Przy użyciu następnej ikony,
    Obraz przedstawiający wybór następnej ikony
    przejdź do następującego tagu select:

    <select name="GenreId" id="GenreId" >
    
  5. Rozwiń ostatnią wartość opcji.

Obraz przedstawiający widok rozwinięty

Poniższy kod w pliku Scripts\chooseGenre.js pokazuje sposób, w jaki przycisk Dodaj nowy gatunek jest połączony ze zdarzeniem kliknięcia oraz jak jest tworzone okno dialogowe Dodawanie nowego gatunku.

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

});

Pierwszy wiersz tworzy funkcję click dołączoną do przycisku Dodaj nowy gatunek . Poniższy znacznik z pliku Views\StoreManager\_ChooseGenre.cshtml pokazuje sposób tworzenia przycisku Dodaj nowy gatunek :

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

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

Metoda ładowania tworzy i otwiera okno dialogowe Dodawanie gatunku i wywołuje metodę jQuery parse , aby walidacja klienta odbywała się na danych wprowadzonych w oknie dialogowym.

W tej sekcji przedstawiono sposób tworzenia okna dialogowego, które może służyć do dodawania nowych danych kategorii do listy wyboru. Możesz wykonać tę samą procedurę, aby utworzyć interfejs użytkownika, aby dodać nowego artystę do listy wyboru artysty. Ten samouczek zawiera omówienie pracy z listą rozwijaną w języku HTML pomocnika MVC ASP.NET MVC. Aby uzyskać dodatkowe informacje na temat pracy z listą DropDownList, zobacz sekcję odwołania do dodawania poniżej. Daj nam znać, czy ten samouczek był przydatny.

Dodatkowa dokumentacja

Współautorzy

Recenzenci

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