使用 jQuery UI 向 DropDownList 添加新类别

  • 项目

作者： 里克·安德森

HTML Select 标记非常适合显示固定类别数据的列表，但通常需要添加新类别。 假设我们要将流派“Opera”添加到数据库中的类别？ 在本部分中，我们将使用 jQuery UI 添加可用于添加新类别的对话框。 下图显示了 UI 在浏览器中的显示方式。

浏览器窗口中 U I 的图像

当用户选择“ 添加新流派”链接时，弹出对话框会提示用户输入新的流派 名称（以及可选说明）。 下图显示了“ 添加流派 ”弹出对话框。

“添加流派”弹出对话框的图像

输入新的流派名称并 按下“保存 ”按钮时，会发生以下情况：

  1. AJAX 调用将数据发布到流派控制器的 Create 方法，该方法将新流派保存到数据库，并将新的流派信息（流派名称和 ID）作为 JSON 返回。

  2. JavaScript 将新的流派数据添加到选择列表中。

  3. 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，其 ID 为 genreDialog. 我们将使用 jQuery 将“添加流派”对话框与此 div 中的 ID genreDialog 挂钩。 最后两个脚本标记包含指向 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');

            }

        }

    });

第二行使用 ID 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');

            }

        });

    }

},

从 createGenreForm ID 中选择了此项var createGenreForm。 ID 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 帮助程序重载使用包含要提交表单的 URL 的操作属性生成 HTML。 可以通过在浏览器中显示“创建相册”页并选择浏览器中的“显示源”来查看此内容。 以下标记显示包含表单标记的生成的 HTML。

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

jQuery $.post 行对操作属性 （/StoreManager/Create） 进行 AJAX 调用，并从“创建流派”对话框传入数据。 数据由新流派的名称和可选说明组成。 如果 AJAX 调用成功，则会将新的流派名称和值添加到 Select 标记，并将新流派设置为所选值。 由于这是动态生成的标记，因此无法在浏览器中查看源来查看新的选择选项。 可以使用 IE 9 F12 开发人员工具查看新的 HTML。 若要查看新的选择选项，请在 Internet Explorer 9 中按 F12 键启动 F12 开发人员工具。 导航到“创建”页并添加新流派，以便在流派选择列表中选择新流派。 在 F12 开发人员工具中：

  1. 选择 HTML 选项卡。

  2. 点击刷新图标。
    刷新图标选择的图像

  3. 在搜索框中，输入流派 ID。

  4. 使用下一个图标，
    下一个图标选择的图像
    导航到以下选择标记：

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

  5. 展开最后一个选项值。

展开视图的图像

Scripts\chooseGenre.js 文件中的以下代码显示了“添加新流派”按钮如何连接到单击事件，以及如何创建“添加新流派”对话框。

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

});

第一行创建附加到“添加新流派”按钮的单击函数。 Views\StoreManager\_ChooseGenre.cshtml 文件中的以下标记显示了如何 创建“添加新流派 ”按钮：

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

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

加载方法创建并打开“添加流派”对话框并调用 jQuery parse 方法，以便客户端验证在对话框中输入的数据上发生。

在本部分中，你已了解如何创建可用于向选择列表添加新类别数据的对话框。 可以按照相同的过程创建 UI，将新艺术家添加到艺术家选择列表中。 本教程概述了如何使用 ASP.NET MVC HTML 帮助程序 DropDownList。 有关使用 DropDownList 的其他信息，请参阅下面的“添加引用”部分。 请告知我们本教程是否有帮助。

其他参考

供稿人

审阅者

上一篇