Добавление новой категории в DropDownList с помощью пользовательского интерфейса jQuery

Статья
06/16/2023

Html-тег Select идеально подходит для представления списка данных фиксированной категории, но часто требуется добавить новую категорию. Предположим, мы хотим добавить жанр "Опера" в категории в нашей базе данных? В этом разделе мы будем использовать пользовательский интерфейс jQuery для добавления диалогового окна, который можно использовать для добавления новой категории. На рисунке ниже показано, как пользовательский интерфейс будет отображаться в браузере.

Изображение U I в окне браузера

Когда пользователь выбирает ссылку "Добавить новый жанр ", всплывающее окно запрашивает у пользователя новое имя жанра (при необходимости описание). На рисунке ниже показано всплывающее окно "Добавить жанр ".

Изображение всплывающего окна добавления жанра

При вводе нового имени жанра и нажатии кнопки "Сохранить " происходит следующее:

Вызов AJAX отправляет данные в метод Create контроллера жанра, который сохраняет новый жанр в базе данных и возвращает новые сведения о жанре (имя жанра и идентификатор) в формате JSON.
JavaScript добавляет новые данные жанра в список выбора.
JavaScript делает новый жанр выбранным элементом.

На рисунке ниже опера была добавлена в базу данных и выбрана в раскрывающемся списке "Жанр ".

Изображение выделения раскрывающегося списка

Откройте файл Views\StoreManager\Create.cshtml и замените разметку жанра следующим кодом:

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

     @Html.Partial("_ChooseGenre")

</div>

Частичное _ChooseGenre представление будет содержать всю логику для подключения JavaScript и jQuery, используемого для реализации новой функции жанра. Завершив код, вы сможете выполнить то же самое с пользовательским интерфейсом художника.

В Обозреватель решений щелкните правой кнопкой мыши папку 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 как модель, точно ту же инструкцию модели, которая найдена в представлении Create. Следующие несколько строк — это вспомогательный разметка метки . Следующая строка — вспомогательный вызов DropDownList , точно такой же, как и в исходном представлении create. Следующая строка добавляет ссылку с именем Add New Genreи стили ее, как кнопка. Строка, ValidationMessageFor содержащаяся, копируется непосредственно из представления "Создать". Следующие строки:

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

</div>

создает скрытый div с идентификатором genreDialog. Мы будем использовать jQuery для подключения диалогового окна "Добавить жанр " с идентификатором genreDialog в этом div. Последние два тега скрипта содержат ссылки на файлы JavaScript, которые будут использоваться для реализации новой функции жанра. Файл /Scripts/chooseGenre.js предоставляется для вас в проекте, мы рассмотрим его далее в руководстве.

Запустите приложение и нажмите кнопку "Добавить новый жанр ". В диалоговом окне "Добавление жанра" введите оперу в поле ввода "Имя".

Изображение диалогового окна добавления жанра

Нажмите кнопку Сохранить. Вызов AJAX создает категорию оперы, а затем заполняет раскрывающийся список оперой и задает оперу в качестве выбранного жанра.

Изображение раскрывающегося списка, заполненного

Введите художника, название и цену, а затем нажмите кнопку "Создать ". Если ввести цену менее $ 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 для создания диалогового окна в теге div в файле Views\StoreManager\_ChooseGenre.cshtml . Большинство именованных параметров являются самообъявительными. Параметр 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.*@

}

Перегрузка вспомогательного средства Html.BeginForm , используемая в файле Views\Genre\_CreateGenre.cshtml , создает HTML с атрибутом действия, содержащим URL-адрес для отправки формы. Это можно увидеть, отображая страницу создания альбома в браузере и выбрав источник в браузере. В следующей разметке показан созданный HTML-код, содержащий тег формы.

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

Строка jQuery $.post вызывает AJAX к атрибуту действия (/StoreManager/Create) и передает данные из диалогового окна "Создать жанр ". Данные состоят из имени нового жанра и необязательного описания. Если вызов AJAX выполнен успешно, новое имя жанра и значение добавляются в разметку Select, а новый жанр имеет выбранное значение. Так как эта разметка создается динамически, новый параметр выбора не отображается, просматривая источник в браузере. Новый HTML-код можно увидеть с помощью средств разработчика IE 9 F12. Чтобы просмотреть новый параметр выбора, в Internet Explorer 9 нажмите клавишу F12, чтобы запустить средства разработчика F12. Перейдите на страницу "Создать" и добавьте новый жанр, чтобы новый жанр был выбран в списке выбора жанра. В средствах разработчика F12:

Перейдите на вкладку HTML.
Нажмите значок обновления.
В поле поиска введите GenreID.
Использование следующего значка

Перейдите к следующему тегу выбора:
```
<select name="GenreId" id="GenreId" >
```
Разверните последнее значение параметра.

Изображение развернутого представления

Следующий код в файле 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 , чтобы проверка клиента выполнялось на данных, введенных в диалоговом окне.

В этом разделе вы узнали, как создать диалоговое окно, которое можно использовать для добавления новых данных категории в список выбора. Вы можете выполнить ту же процедуру, чтобы создать пользовательский интерфейс, чтобы добавить нового художника в список выбора художника. В этом руководстве представлен обзор работы с вспомогательным элемент ASP.NET ом html MVC MVC DropDownList. Дополнительные сведения о работе с DropDownList см. в разделе "Дополнительные ссылки" ниже. Сообщите нам, был ли этот учебник полезным.

Дополнительные справочники

руководство по спискам раскрывающихся списков ASP.NET MVC–Cascading по Radu Enuca
Выбран подключаемый модуль JavaScript, поддерживающий несколько выборок и фильтрацию.

Соавторы

Раду Энука
Жан-Себастиен Goupil
Брэд Уилсон

Рецензенты

Жан-Себастиен Goupil
Брэд Уилсон
Майк Поуп (Mike Pope)
Том Дайкстра

Поделиться через

Добавление новой категории в DropDownList с помощью пользовательского интерфейса jQuery

Изучение добавления нового жанра в базу данных и список выбора.

Дополнительные справочники

Соавторы

Рецензенты

Обратная связь

Дополнительные ресурсы