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

Autor : Rick Anderson

Tag HTML Select jest idealny do prezentowania listy danych o stałej 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 do dodania okna dialogowego, za pomocą których możemy dodać nową kategorię. Na poniższej ilustracji przedstawiono sposób prezentowania interfejsu użytkownika w przeglądarce.

Gdy użytkownik wybierze link Dodaj nowy gatunek , wyskakujące okno dialogowe wyświetli monit o podanie nowej nazwy gatunku (i opcjonalnie opisu). Na poniższej ilustracji przedstawiono wyskakujące okno dialogowe Dodawanie 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 wybranych.

3. Język JavaScript sprawia, że nowy gatunek jest wybierany element.

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

Otwórz plik Views\StoreManager\Create.cshtml i zastąp znaczniki 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 zakończeniu kodu będzie można łatwo wykonać to samo w interfejsie 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 polu Wprowadź nazwę 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 nasz model, dokładnie tę samą instrukcję modelu znajdującą się w widoku Tworzenie. Kilka następnych wierszy to znacznik pomocnika etykiet . Następny wiersz to wywołanie pomocnika DropDownList , dokładnie takie samo jak w oryginalnym widoku Tworzenie. Następny wiersz dodaje link o nazwie Add New Genrei style go jak przycisk. Wiersz zawierający ValidationMessageFor jest kopiowany bezpośrednio z widoku Utwórz. Następujące wiersze:

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

</div>

Tworzy ukryty div z identyfikatorem genreDialog. Użyjemy jQuery, aby podłączyć okno dialogowe Dodawanie gatunku z identyfikatorem genreDialog w tym div. Dwa ostatnie 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 wejściowym Nazwa .

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

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.

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.

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 ma wartość false. Wybranie przycisku Utwórz gatunek spowoduje otwarcie jawnego okna dialogowego (opisano to później). Okno dialogowe ma 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 klawisz 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.
   

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

4. Przy użyciu następnej ikony,
   
   przejdź do następującego tagu select:

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

5. Rozwiń ostatnią wartość opcji.

Poniższy kod w pliku Scripts\chooseGenre.js pokazuje, jak przycisk Dodaj nowy gatunek jest połączony ze zdarzeniem kliknięcia i 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, jak jest tworzony przycisk 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ą dropdownList pomocnika HTML ASP.NET MVC. Aby uzyskać dodatkowe informacje na temat pracy z listą DropDownList, zobacz sekcję dokumentacji dodawania poniżej. Poinformuj nas, czy ten samouczek był przydatny.

Rick.Anderson[at]Microsoft.com

Dodatkowe informacje

• ASP.NET MVC— kaskadowe listy rozwijane — samouczek autorstwa Radu Enuca
• Wybrany Wtyczka języka JavaScript, która obsługuje wybór wielokrotny i filtrowanie.

Współautorzy

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

Weryfikatorzy

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

Poprzednie