使用 jQuery UI 將新的分類新增至 DropDownList

發行項
08/24/2024

HTML Select 標籤很適合用來呈現固定類別數據的清單，但通常您需要新增類別。假設我們想要將內容類型「Opera」新增至資料庫中的類別？在本節中，我們將使用 jQuery UI 來新增對話框，我們可用來新增類別。下圖顯示UI如何在瀏覽器中呈現。

瀏覽器視窗中U I的影像

當使用者選取 [ 新增內容類型] 連結時，快顯對話方塊會提示使用者輸入新的內容類型 名稱（以及選擇性的描述）。下圖顯示 [ 新增內容類型 ] 快顯對話方塊。

新增內容類型快顯對話框的影像

輸入新的內容類型名稱並按下 [ 儲存 ] 按鈕時，會發生下列情況：

AJAX 呼叫會將數據張貼至內容類型控制器的 Create 方法，該方法會將新的內容類型儲存至資料庫，並將新的內容類型資訊（內容類型名稱和標識符）傳回為 JSON。
JavaScript 會將新的內容類型數據新增至選取清單。
JavaScript 會將新內容類型設定為選取的專案。

在下圖中，Opera 已新增至資料庫，並在 [內容類型] 下拉式清單中選取。

下拉式清單選取專案的影像

開啟 Views\StoreManager\Create.cshtml 檔案，並以下列程式代碼取代內容類型標記：

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

     @Html.Partial("_ChooseGenre")

</div>

部分 _ChooseGenre 檢視會包含用來實作新增內容類型功能之 JavaScript 和 jQuery 的所有邏輯。完成程式代碼之後，使用藝術家 UI 執行相同動作會很簡單。

在方案總管中，以滑鼠右鍵按下 Views\StoreManager 資料夾，然後選取 [新增]，然後按兩下 [檢視]。在 [ 檢視名稱 輸入] 中，輸入 _ChooseGenre ，然後選取 [ 新增]。將 Views\StoreManager\_ChooseGenre.cshtml 檔案中的標記取代為下列專案：

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

第一行會宣告我們傳入 Album 做為模型，這與在 [建立] 檢視中找到的模型語句完全相同。接下來幾行是標籤協助程式標記。下一行是DropDownList協助程式呼叫，與原始的 [建立] 檢視完全相同。下一行會新增名稱 Add New Genre的連結，並將它樣式設定為按鈕。包含的 ValidationMessageFor 行會直接從 [建立] 檢視複製。下列幾行：

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

</div>

會建立隱藏的 div，識別子為 genreDialog。我們將使用 jQuery 來連結我們的 [新增內容類型 ] 對話方塊，其中包含 genreDialog 此 div 中的識別碼。最後兩個腳本標記包含我們將用來實作新增內容類型功能之 JavaScript 檔案的連結。專案中 會提供 /Scripts/chooseGenre.js 檔案，我們將在稍後的教學課程中加以檢查。

執行應用程式，然後按兩下 [ 新增內容類型 ] 按鈕。在 [新增內容類型] 對話框中，於 [名稱] 輸入方塊中輸入 Opera。

[新增內容類型] 對話框的影像

按一下 [儲存] 按鈕。 AJAX 呼叫會建立 Opera 類別，然後使用 Opera 填入下拉式清單，並將 Opera 設定為選取的內容類型。

填入下拉式清單的影像

輸入藝術家、標題和價格，然後選取 [ 建立] 按鈕。如果您輸入的價格低於 $8.99，新專輯會出現在 [索引] 檢視的頂端。確認新的專輯專案已儲存在資料庫中。

確認新專輯專案已儲存在資料庫中的影像

嘗試建立只有一個字母的新內容類型。 Models\Genre.cs 檔案中的下列程式代碼會設定內容類型名稱的最小和最大長度。

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

用戶端驗證報告您必須輸入介於 2 到 20 個字元之間的字串。

客戶端驗證的影像

檢查如何將新內容類型新增至資料庫和選取清單。

開啟 Scripts\chooseGenre.js 檔案，並檢查程式代碼。

$(function () {

    $('#genreDialog').dialog({

        autoOpen: false,

        width: 400,

        height: 300,

        modal: true,

        title: 'Add Genre',

        buttons: {

            'Save': function () {

                // Omitted 

            },

            'Cancel': function () {

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

            }

        }

    });

第二行會使用標識符genreDialog，在 Views\StoreManager\_ChooseGenre.cshtml 檔案的 div 標記上建立對話框。大部分具名參數都是自我解釋的。參數 autoOpen 設定為 false，選取 [ 建立內容類型 ] 按鈕會明確開啟對話（後者會加以描述）。對話框有兩個按鈕[ 儲存 ] 和 [取消]。 [ 取消] 按鈕會關閉對話框。下列程式代碼顯示 [ 儲存 ] 按鈕函式。

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

            }

        });

    }

},

var createGenreForm從識別碼createGenreForm選擇取。標識元createGenreForm是在 Views\Genre\_CreateGenre.cshtml 檔案中找到的下列程式代碼中設定的。

@model MvcMusicStore.Models.Genre

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

{

    @*Omitted for clarity.*@

}

Views\Genre\_CreateGenre.cshtml 檔案中使用的 Html.BeginForm 協助程式多載會產生 HTML，其中包含要送出窗體 URL 的動作屬性。您可以在瀏覽器中顯示 [建立專輯] 頁面，然後選取瀏覽器中的 [顯示來源] 來查看此內容。下列標記顯示產生的 HTML，其中包含窗體標記。

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

jQuery $.post 行會呼叫 action 屬性（/StoreManager/Create）並傳入 [ 建立內容類型 ] 對話框中的數據。數據是由新內容類型的名稱和選擇性描述所組成。如果 AJAX 呼叫成功，新的內容類型名稱和值會新增至 Select 標記，而新的內容類型會設定為選取的值。由於這是動態產生的標記，因此您無法在瀏覽器中檢視來源來查看新的選取選項。您可以使用 IE 9 F12 開發人員工具查看新的 HTML。若要檢視新的選取選項，請在 Internet Explorer 9 中按 F12 鍵以啟動 F12 開發人員工具。流覽至 [建立] 頁面並新增內容類型，以便在內容類型選取清單中選取新的內容類型。在 F12 開發人員工具中：

選取 HTML 索引標籤。
叫用重新整理圖示。
在搜尋方塊中，輸入 GenreID。
使用下一個圖示，

瀏覽至下列選取標籤：
```
<select name="GenreId" id="GenreId" >
```
展開最後一個選項值。

展開檢視的影像

Scripts\chooseGenre.js 檔案中的下列程式代碼顯示 [新增類型] 按鈕如何連線至 Click 事件，以及如何建立 [新增內容類型] 對話框。

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

});

第一行會建立附加至 [新增內容類型] 按鈕的 Click 函式。 Views\StoreManager\_ChooseGenre.cshtml 檔案的下列標記會顯示如何建立 [ 新增內容類型 ] 按鈕：

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

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

load 方法會建立並開啟 [新增內容類型] 對話方塊，並呼叫 jQuery parse 方法，讓客戶端驗證發生在對話框中輸入的數據上。

在本節中，您已瞭解如何建立對話框，以用來將新的類別數據新增至選取清單。您可以遵循相同的程式來建立UI，以將新藝術家新增至藝術家選取清單。本教學課程提供使用 ASP.NET MVC HTML 協助程式 DropDownList的概觀。如需使用 DropDownList的其他資訊，請參閱下方的新增參考一節。請讓我們知道本教學課程是否有所説明。

其他參考

ASP.NET Radu Enuca 的 MVC-級聯下拉式清單教學課程
選擇支援多重選取和篩選的 JavaScript 外掛程式。

參與者

Radu Enuca
Jean-Sébastien Goupil
布拉德·威爾遜

審閱者

Jean-Sébastien Goupil
布拉德·威爾遜
Mike Pope
Tom Dykstra

上一筆

共用方式為

使用 jQuery UI 將新的分類新增至 DropDownList

檢查如何將新內容類型新增至資料庫和選取清單。

其他參考

參與者

審閱者

意見反應

其他資源