Agregar una nueva categoría al control DropDownList mediante jQuery UI
Por Rick Anderson
La etiqueta HTML Select es ideal para presentar una lista de datos fijos de categoría, pero a menudo es necesario agregar una nueva categoría. Supongamos que queremos agregar el género "Ópera" a las categorías de nuestra base de datos. En esta sección, usaremos jQuery UI para agregar un cuadro de diálogo que podemos usar para agregar una nueva categoría. En la imagen siguiente se muestra cómo se presentará la interfaz de usuario en el explorador.
Cuando un usuario selecciona el vínculo Add New Genre (Agregar nuevo género), un cuadro de diálogo emergente solicita al usuario un nuevo nombre de género (y, opcionalmente, una descripción). En la imagen siguiente se muestra el cuadro de diálogo emergente Add Genre (Agregar género).
Cuando se escribe un nuevo nombre de género y se pulsa el botón Save (Guardar), ocurre lo siguiente:
Una llamada AJAX envía los datos al método Create del controlador de género, que guarda el nuevo género en la base de datos y devuelve la nueva información de género (nombre del género e identificador) como JSON.
JavaScript agrega los nuevos datos de género a la lista de selección.
JavaScript convierte el nuevo género en el elemento seleccionado.
En la imagen siguiente, Ópera se agregó a la base de datos y se seleccionó en la lista desplegable Genre (Género).
Abra el archivo Views\StoreManager\Create.cshtml y reemplace el marcado de género por el código siguiente:
<div class="editor-field ui-widget">
@Html.Partial("_ChooseGenre")
</div>
La vista parcial _ChooseGenre contendrá toda la lógica para enlazar JavaScript y jQuery que se usa para implementar la característica Agregar nuevo género. Una vez que hayamos completado el código, será sencillo hacer lo mismo con la interfaz de usuario del artista.
En Explorador de soluciones, haga clic con el botón derecho en la carpeta Views\StoreManager y seleccione Agregar y, a continuación, Ver. En la entrada Ver nombre, escriba _ChooseGenre y seleccione Agregar. Reemplace el marcado en el archivo Views\StoreManager\_ChooseGenre.cshtml por lo siguiente:
@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>
La primera línea declara que estamos pasando Album como nuestro modelo, exactamente la misma instrucción de modelo que se encuentra en la vista Crear. Las siguientes líneas son el marcado auxiliar Label (Etiqueta). La siguiente línea es la llamada auxiliar DropDownList, exactamente igual que en la vista Create original. La línea siguiente agrega un vínculo con el nombre Add New Genre, y le da la apariencia de un botón. La línea que contiene ValidationMessageFor se copia directamente de la vista Create. Las líneas siguientes:
<div id="genreDialog" class="hidden">
</div>
crea un div oculto, con el identificador genreDialog. Usaremos jQuery para enlazar el cuadro de diálogo Agregar género con el identificador genreDialog de este div. Las dos últimas etiquetas de script contienen vínculos a los archivos JavaScript que usaremos para implementar la característica Agregar nuevo género. El archivo /Scripts/chooseGenre.js se le proporciona en el proyecto; lo examinaremos más adelante en el tutorial.
Ejecute la aplicación y haga clic en el botón Add New Genre (Agregar nuevo género). En el cuadro de diálogo Add Genre (Agregar género), escriba Ópera en el cuadro de entrada Name (Nombre).
Haga clic en el botón Guardar. Una llamada AJAX crea la categoría Ópera y, a continuación, rellena la lista desplegable con Ópera y establece Ópera como el género seleccionado.
Escriba un artista, un título y un precio y, a continuación, seleccione el botón Create (Crear). Si escribe un precio inferior a 8,99 USD, el nuevo álbum aparecerá en la parte superior de la vista Índice. Compruebe que la nueva entrada del álbum se ha guardado en la base de datos.
Intente crear un género con una sola letra. El código siguiente del archivo Models\Genre.cs establece la longitud mínima y máxima del nombre del género.
[StringLength(20, MinimumLength = 2)]
public string Name { get; set; }
Los informes de validación del lado del cliente informan de que debe introducir una cadena de entre 2 y 20 caracteres.
Información sobre cómo se agrega un nuevo género a la base de datos y a la lista de selección.
Abra el archivo Scripts\chooseGenre.js y examine el código.
$(function () {
$('#genreDialog').dialog({
autoOpen: false,
width: 400,
height: 300,
modal: true,
title: 'Add Genre',
buttons: {
'Save': function () {
// Omitted
},
'Cancel': function () {
$(this).dialog('close');
}
}
});
La segunda línea usa el identificador genreDialog para crear un cuadro de diálogo en la etiqueta div en el archivo Views\StoreManager\_ChooseGenre.cshtml. La mayoría de los parámetros con nombre se explican por sí mismos. El parámetro autoOpen se establece en false. Al seleccionar el botón Create Genre (Crear género) se abrirá explícitamente el diálogo (esto último se describe más adelante). El cuadro de diálogo tiene dos botones, Save (Guardar) y Cancel (Cancelar). El botón Cancel (Cancelar) cierra el cuadro de diálogo. El código siguiente muestra la función del botón Save (Guardar).
'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 se selecciona a partir del identificador createGenreForm. El identificador createGenreForm se estableció en el código siguiente que se encuentra en el archivo Views\Genre\_CreateGenre.cshtml.
@model MvcMusicStore.Models.Genre
@using (Html.BeginForm("Create", "Genre", FormMethod.Post, new { id = "createGenreForm" }))
{
@*Omitted for clarity.*@
}
La sobrecarga del auxiliar Html.BeginForm usada en el archivo Views\Genre\_CreateGenre.cshtml genera HTML con un atributo de acción que contiene la dirección URL para enviar el formulario. Para ver esto, muestre la página Crear álbum en un explorador y seleccione Mostrar origen en el explorador. El marcado siguiente muestra el código HTML generado que contiene la etiqueta de formulario.
<form action="/StoreManager/Create" method="post">
La línea jQuery $.post realiza una llamada AJAX al atributo de acción (/StoreManager/Create) y envía los datos del cuadro de diálogo Create Genre (Crear género). Los datos constan del nombre del nuevo género y una descripción opcional. Si la llamada AJAX se realiza correctamente, el nuevo nombre de género y el valor se agregan al marcado Select y el nuevo género se establece en el valor seleccionado. Dado que este marcado se genera dinámicamente, no puede ver la nueva opción de selección viendo el origen en el explorador. Puede ver el nuevo código HTML con las herramientas de desarrollo de IE 9 F12. Para ver la nueva opción de selección, en Internet Explorer 9, presione la tecla F12 para iniciar las herramientas de desarrollo F12. Vaya a Create page (Crear página) y agregue un nuevo género para que el nuevo género se seleccione en la lista de selección de género. En las herramientas de desarrollador F12:
Seleccione la pestaña HTML.
Pulse el icono de actualización.
En el cuadro de búsqueda, escriba GenreID.
Con el icono siguiente,
vaya a la siguiente etiqueta de selección:<select name="GenreId" id="GenreId" >Expanda el último valor de opción.
El código siguiente del archivo Scripts\chooseGenre.js muestra cómo se conecta el botón Add New Genre (Agregar nuevo género) al evento de clic y cómo se crea el cuadro de diálogo Add New Genre (Agregar nuevo género).
$('#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;
});
La primera línea crea una función de clic adjunta al botón Add New Genre (Agregar nuevo género). El siguiente marcado del archivo Views\StoreManager\_ChooseGenre.cshtml muestra cómo se crea el botón Add New Genre (Agregar nuevo género):
<a class="button" href="@Url.Content("~/Genre/Create")"
id="genreAddLink">Add New Genre</a>
El método de carga crea y abre el cuadro de diálogo Agregar género y llama al método jQuery parse para que la validación del cliente se produzca en los datos especificados en el cuadro de diálogo.
En esta sección ha aprendido a crear un cuadro de diálogo que se puede usar para agregar nuevos datos de categoría a una lista de selección. Puede seguir el mismo procedimiento para crear la interfaz de usuario para agregar un nuevo artista a la lista de selección de artistas. En este tutorial se proporciona información general sobre cómo trabajar con el asistente MVC HTML de ASP.NET DropDownList. Para obtener más información sobre cómo trabajar con DropDownList, consulte la sección de referencias adicionales a continuación. Háganos saber si este tutorial ha sido útil.
Rick.Anderson[at]Microsoft.com
Referencias adicionales
- Tutorial de listas desplegables en cascada: ASP.NET MVC por Radu Enuca
- Chosen Un complemento de JavaScript que admite la selección múltiple y el filtrado.
Colaboradores
- Radu Enuca
- Jean-Sébastien Goupil
- Brad Wilson
Revisores
- Jean-Sébastien Goupil
- Brad Wilson
- Mike Pope
- Tom Dykstra
Comentarios
Próximamente: A lo largo de 2024 iremos eliminando gradualmente las Cuestiones de GitHub como mecanismo de retroalimentación para el contenido y lo sustituiremos por un nuevo sistema de retroalimentación. Para más información, consulta: https://aka.ms/ContentUserFeedback.
Enviar y ver comentarios de