Sdílet prostřednictvím

Přidání nové kategorie do ovládacího prvku DropDownList v uživatelském rozhraní jQuery

  • Článek

Rick Anderson

Značka HTML Select je ideální pro prezentaci seznamu pevných dat kategorií, ale často potřebujete přidat novou kategorii. Předpokládejme, že chceme do kategorií v naší databázi přidat žánr Opera? V této části použijeme uživatelské rozhraní jQuery k přidání dialogového okna, které můžeme použít k přidání nové kategorie. Následující obrázek ukazuje, jak se uživatelské rozhraní zobrazí v prohlížeči.

Obrázek U V v okně prohlížeče

Když uživatel vybere odkaz Přidat nový žánr , automaticky otevírané dialogové okno vyzve uživatele k zadání nového názvu žánru (a volitelně i popisu). Na následujícím obrázku se zobrazí automaticky otevírané dialogové okno Přidat žánr .

Obrázek automaticky otevíraného dialogového okna pro přidání žánru

Když zadáte nový název žánru a nasdílíte tlačítko Uložit , stane se toto:

  1. Volání AJAX publikuje data do metody Create Kontroleru žánru, která uloží nový žánr do databáze a vrátí informace o novém žánru (název a ID žánru) jako JSON.

  2. JavaScript přidá do seznamu výběr nová data žánru.

  3. JavaScript vytvoří nový žánr vybranou položku.

    Na následujícím obrázku byla opera přidána do databáze a vybrána v rozevíracím seznamu Žánr .

Obrázek výběru rozevíracího seznamu

Otevřete soubor Views\StoreManager\Create.cshtml a nahraďte značky žánru následujícím kódem:

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

     @Html.Partial("_ChooseGenre")

</div>

Částečné _ChooseGenre zobrazení bude obsahovat veškerou logiku pro připojení JavaScriptu a jQuery použité k implementaci nové funkce přidání nového žánru. Jakmile dokončíme kód, bude to jednoduché udělat stejně s uživatelským rozhraním interpreta.

V Průzkumník řešení klikněte pravým tlačítkem na složku Views\StoreManager a vyberte Přidat a pak Zobrazit. Ve vstupu Název zobrazení zadejte _ChooseGenre a pak vyberte Přidat. Nahraďte kód v souboru Views\StoreManager\_ChooseGenre.cshtml následujícím kódem:

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

První řádek deklaruje, že předáváme jako Album náš model, přesně stejný příkaz modelu, který se nachází v zobrazení Create. Další pár řádků jsou pomocné značky Popisek . Dalším řádkem je pomocné volání DropDownList , které je úplně stejné jako v původním zobrazení Vytvořit. Další řádek přidá odkaz s názvem Add New Genrea styly jako tlačítko. Řádek obsahující ValidationMessageFor se zkopíruje přímo ze zobrazení Vytvořit. Následující řádky:

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

</div>

vytvoří skrytý div s ID .genreDialog Pomocí jQuery připojíme dialogové okno Přidat žánr s ID genreDialog v tomto divu. Poslední dvě značky skriptu obsahují odkazy na soubory JavaScriptu, které použijeme k implementaci nové funkce přidání nového žánru. Soubor /Scripts/chooseGenre.js je k dispozici pro vás v projektu, prozkoumáme ho později v tomto kurzu.

Spusťte aplikaci a klikněte na tlačítko Přidat nový žánr . V dialogovém okně Přidat žánr zadejte Opera do vstupního pole Název .

Obrázek dialogového okna přidat žánr

Klikněte na tlačítko Uložit. Volání AJAX vytvoří kategorii Opera a pak naplní rozevírací seznam opera opera a nastaví Opera jako vybraný žánr.

Obrázek vyplněného rozevíracího seznamu

Zadejte interpreta, název a cenu a pak vyberte tlačítko Vytvořit . Pokud zadáte cenu nižší než 8,99 Usd, zobrazí se nové album v horní části zobrazení indexu. Ověřte, že byla nová položka alba uložena v databázi.

Obrázek, který ověřuje, že se nová položka alba uložila do databáze

Zkuste vytvořit nový žánr pouze s jedním písmenem. Následující kód v souboru Models\Genre.cs nastaví minimální a maximální délku názvu žánru.

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

Ověřovací sestavy na straně klienta musíte zadat řetězec mezi 2 a 20 znaky.

Obrázek ověření na straně klienta

Zkoumání způsobu přidání nového žánru do databáze a seznamu vybrat

Otevřete soubor Scripts\chooseGenre.js a prozkoumejte kód.

$(function () {

    $('#genreDialog').dialog({

        autoOpen: false,

        width: 400,

        height: 300,

        modal: true,

        title: 'Add Genre',

        buttons: {

            'Save': function () {

                // Omitted 

            },

            'Cancel': function () {

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

            }

        }

    });

Druhý řádek používá ID genreDialog k vytvoření dialogového okna na značce div v souboru Views\StoreManager\_ChooseGenre.cshtml . Většina pojmenovaných parametrů je sama vysvětlující. Parametr autoOpen je nastavený na false a výběrem tlačítka Vytvořit žánr se otevře dialog explicitně (toto je popsáno níže). Dialogové okno obsahuje dvě tlačítka, Uložit a Zrušit. Tlačítko Zrušit zavře dialogové okno. Následující kód ukazuje funkci Uložit tlačítko.

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

            }

        });

    }

},

Vybere se var createGenreForm z createGenreForm ID. ID createGenreForm bylo nastaveno v následujícím kódu nalezen v souboru Views\Žánr\_CreateGenre.cshtml .

@model MvcMusicStore.Models.Genre

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

{

    @*Omitted for clarity.*@

}

Přetížení pomocné rutiny Html.BeginForm použité v Views\Žánr\_CreateGenre.cshtml generuje HTML s atributem akce obsahujícím adresu URL pro odeslání formuláře. Můžete to zobrazit tak, že v prohlížeči zobrazíte stránku pro vytvoření alba a v prohlížeči vyberete zobrazit zdroj. Následující kód ukazuje vygenerovaný kód HTML obsahující značku formuláře.

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

Řádek jQuery $.post provede volání AJAX atributu akce (/StoreManager/Create) a předá data z dialogového okna Vytvořit žánr . Data se skládají z názvu nového žánru a volitelného popisu. Pokud je volání AJAX úspěšné, nový název a hodnota žánru se přidají do značky Select a nový žánr se nastaví na vybranou hodnotu. Vzhledem k tomu, že se jedná o dynamicky generované značky, není možné novou možnost výběru zobrazit zobrazením zdroje v prohlížeči. Nový kód HTML můžete zobrazit pomocí vývojářských nástrojů IE 9 F12. Pokud chcete zobrazit novou možnost výběru, stiskněte v Internet Exploreru 9 klávesu F12 a spusťte vývojářské nástroje F12. Přejděte na stránku Vytvořit a přidejte nový žánr, aby byl nový žánr vybrán v seznamu pro výběr žánru. V vývojářských nástrojích F12:

  1. Vyberte kartu HTML.

  2. Stiskněte ikonu aktualizace.
    Obrázek výběru ikony aktualizace

  3. Do vyhledávacího pole zadejte Id žánru.

  4. Pomocí další ikony
    Obrázek výběru další ikony
    přejděte na následující značku výběru:

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

  5. Rozbalte hodnotu poslední možnosti.

Obrázek rozbaleného zobrazení

Následující kód v souboru Scripts\chooseGenre.js ukazuje, jak se tlačítko Přidat nový žánr připojí k události kliknutí a jak se vytvoří dialogové okno Přidat nový žánr .

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

});

První řádek vytvoří funkci kliknutí připojenou k tlačítku Přidat nový žánr . Následující kód ze souboru Views\StoreManager\_ChooseGenre.cshtml ukazuje, jak se vytvoří tlačítko Přidat nový žánr :

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

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

Metoda načtení vytvoří a otevře dialogové okno Přidat žánr a zavolá metodu jQuery parse tak, aby ověření klienta proběhlo u dat zadaných v dialogovém okně.

V této části jste se dozvěděli, jak vytvořit dialogové okno, které se dá použít k přidání nových dat kategorií do seznamu výběru. Stejným postupem můžete vytvořit uživatelské rozhraní pro přidání nového interpreta do seznamu pro výběr interpreta. V tomto kurzu jsme získali přehled práce s pomocnými rutinami html ASP.NET MVC. Další informace o práci s rozevíracím seznamem najdete v části s dalšími odkazy níže. Dejte nám prosím vědět, jestli byl tento kurz užitečný.

Další odkazy

Přispěvatelé

Revidující

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

Předchozí