La implementación exitosa de las vistas parciales de Ajax depende de la carga adecuada de varias bibliotecas de JavaScript.
jQuery y otras bibliotecas de todo el sitio
La plantilla predeterminada de ASP.NET MVC incluye un archivo estándar _Layout.cshtml que implementa las características del navegador e incluye referencias a las bibliotecas estándar de JavaScript. Debido a que _Layout.cshtml se incluye en cada vista del proyecto web, es un buen lugar para incluir referencias de scripts que implementan la funcionalidad de los elementos de la página, como la barra de navegación que se encuentra incluida en cada página.
La mayoría de las librerías de JavaScript se muestran en la parte inferior del elemento
de _Layout.cshtml usando la funcionalidad de agrupación de MVC. El único paquete cargado en el elemento es la versión 2.8.3 de la biblioteca Modernizr, una versión fechada de Modernizr incluida para propósitos de desarrollo. La referencia de Modernizr incluida en _Layout.cshtml debe no ser incluida en el código de producción. La inclusión de referencias de librerías de scripts y scripts al final de la página mejora el rendimiento de la renderización de la página.La funcionalidad de la interfaz de usuario proporcionada por el marco de CSS Bootstrap está incluida en la biblioteca Bootstrap.js cargada con el paquete Bootstrap . Bootstrap.js depende de la omnipresente biblioteca jQuery , que se carga con el paquete jquery .
La definición del paquete jQuery permite cargar la versión actual de jQuery sin cambiar la definición del paquete o _Layout.cshtml para que coincida con el número de la versión actual. De esta manera, la biblioteca jQuery puede ser actualizada a través del paquete asociado NuGet sin necesidad de actualizar el código para mantener el número de versión en sincronía.
La funcionalidad de Ajax depende de la biblioteca jQuery , pero no de la biblioteca Bootstrap . Si el proyecto web no implementa el framework CSS Bootstrap, la librería Bootstrap es innecesaria. En la solución de ejemplo, BlipAjax, el marco de trabajo CSS Bootstrap, se utiliza para proporcionar el estilo y la funcionalidad de la interfaz de usuario para una serie de elementos de la interfaz de usuario, incluidos los elementos de formulario como las listas desplegables País y Estado/Región .
12345678910111213141516171819202122232425262728293031323334353637383940414243<!DOCTYPE html;<html;<head;<metacharset="utf-8"/;<metaname="viewport "content="width=ancho de dispositivo, escala inicial=1. 0"³;¡TÃtulo!;@ViewBag.Title - Mi aplicación ASP.NET</title;¡Archivo!;@Styles.Render("~/Content/css") @Scripts. Render("~/bundles/modernizr") @RenderSection("header", requerido: false);/cabeza("body");;div("div");;div("buttontype="button "data-toggle="collapse "data-("span");;;/span ActionLink("Nombre de la aplicación", "Índice", "Inicio", nuevo { área = "" }, nuevo { @clase = "navbar-brand" }) </div <div><ul>li>@Html.ActionLink("Home", "Index", "Home")</li>li>@Html.ActionLink("About", "About", "Home")</li>li>@Html. ActionLink("Contacto", "Contacto", "Home")¹;/li>/ul²;²;/div²;²;/div²;²;²;/div²;²;div²; @RenderBody() ²;hr/_____;²;p³;p³;²;@DateTime. Now.Year - My ASP.NET Application</p></footer;||||div; @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", required: false)
Tengan en cuenta que el archivo _Layout.cshtml también incluye una directiva @RenderSection Razor para la sección "scripts". Esto hace que cualquier referencia adicional de la biblioteca de JavaScript y los scripts se carguen después del paquete jQuery. El orden de estos elementos es importante para que la funcionalidad de Ajax funcione, y el orden de carga es un área en la que los desarrolladores han experimentado frecuentemente dificultades.
jquery-validate.js, jquery-validate-unobtrusive.js, y jquery-unobtrusive-ajax.js
Las páginas que incluyen elementos como Cliente/Editar , pueden implementar la validación de datos del lado del cliente utilizando bibliotecas jQuery adicionales y, opcionalmente, características del marco de trabajo Bootstrap para el estilismo. El paquete jqueryval carga las dos bibliotecas necesarias:
-
jquery-validate.js
-
jquery-validate-unobtrusive.js
Estas bibliotecas se cargan a través del paquete jqueryval .
Las páginas que incluyen la funcionalidad de Ajax, como Cliente/Editar necesitan incluir una biblioteca adicional de JavaScript:
jquery-unobtrusive-ajax.js
Esta biblioteca se carga a través del paquete jqueryunobtrusive .
Obsérvese que la convención de nombres estándar para las bibliotecas crea la posibilidad de confusión: el paquete jqueryunobtrusive no incluye la biblioteca para Ajax no intrusivo y el paquete jqueryunobtrusive no incluye la biblioteca para validación no intrusiva.
Como se muestra a continuación, la vista superior de Cliente/Editar incluye una directiva @section para la sección de scripts especificada en _Layout.cshtml. Los paquetes mencionados anteriormente se incluyen en esta sección y, siguiendo el orden de las directivas en _Layout.cshtml, cargue las bibliotecas indicadas anteriormente después de cargar el paquete jquery . Este orden es esencial para la correcta implementación de la biblioteca de JavaScript de Ajax; depende de jQuery.
El orden de carga también es importante para la correcta implementación de las bibliotecas de validación. Tanto jquery-validate.js como jquery-validate-unobtrusive.js requieren que la biblioteca jQuery se cargue primero.
La vista superior Edit.cshtml también incluye un código JavaScript específico para la página que se describirá en detalle en la siguiente sección.
Cliente/Edit.cshtml
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879@*Los modelos están en vistas parciales.*@@cabecera de la sección {}@Ver Bolsa. Título = "Editar Información del Cliente";}<div><div>h2;;Editar Información del Cliente</h2;</div;;};/div;;div;;@Html.Acción("EditarParcial del Cliente", nuevo { id = Url.SolicitudContexto.RutaDatos.Valores["id"] });/div;;;div;;@Html. Acción("AddressTypePartial", nuevo { id = Url.RequestContext.RouteData.Values["id"] })};/div><div>/div>div>div>³³³hr/³³³³; @Html. ActionLink("Back to List", "Index") </div.;;/div.;;/div.;;/div.;@section Scripts { @Scripts. Render("~/bundles/jqueryunobtrusive") @*Para no intrusivo-ajax*@ @Scripts.Render("~/bundles/jqueryval") @*Para validar y validar-no intrusivo-*@ <scripttype="text/javascript"$(documento). ready(function(){var selectedCountry =$("#Country").val();var selectedRegion =$("#Region").val();var regionsSelect =$($0027#Region$0027);AddRegions(selectedCountry, regionsSelect);if(selectedRegion !=null&& selectedRegion ! =$0027$0027){ regionsSelect.val= selectedRegion;};});$("#Country").change(function(){var selectedCountry =$("#Country").val();var regionsSelect =$($0027#Region$0027); regionsSelect.empty();if(selectedCountry !=null&& selectedCountry ! =$0027$0027){AddRegions(selectedCountry, regionsSelect);}});functionAddRegions(selectedCountry, regionsSelect){ $.getJSON($0027@Url.Action("GetRegions")$0027,{ iso3: selectedCountry },function(regions){if(regions !=null&&!jQuery. esObjetoVacío(regiones)){ regionsSelect.append($($0027<option/>$0027,{ valor:null, texto:""})); $.each(regions,function(index, region){ regionsSelect.append($($0027<option/>$0027,{ valor: region.Value, text: region.Text});});};}</script>}html
Tenga en cuenta que los @*comentarios*@ del lado del servidor se incluyen con las directivas @Scripts.Render para los paquetes de validación y Ajax para eliminar cualquier confusión que pueda surgir sobre qué scripts se incluyen en los paquetes como resultado de la convención de nombres estándar.
Tenga en cuenta también que el orden de estas directivas no es obligatorio, pero como la funcionalidad de Ajax es más crítica para el correcto funcionamiento de la página que la validación del lado del cliente, es una buena idea cargar esa biblioteca inmediatamente después de la biblioteca jQuery para minimizar la probabilidad de que los errores de carga impidan que se cargue la biblioteca de Ajax. Esto es particularmente importante cuando se añade la complejidad de cargar las bibliotecas de JavaScript desde las redes de entrega de contenido (CDN) en producción con una versión local de la biblioteca como respaldo cuando la CDN no está disponible.
Por último, observe que los elementos de la página Cliente/Editar se incluyen en las vistas parciales, en lugar de la vista principal Edit.cshtml . Sin embargo, la convención es que el JavaScript asociado a una vista parcial se ubique en el archivo .cshtml para la vista padre , en lugar de la vista parcial a la que se aplican. En la siguiente sección se mostrará esta convención en la práctica y se describirá una excepción notable.