jquery - cambiar texto label javascript

¿Cómo agregar la biblioteca jQueryUI en el proyecto MVC 5?

Question

Acabo de instalar Visual Studio 2013 y comencé el nuevo proyecto MVC 5. Soy algo nuevo en el desarrollo de MVC y no puedo encontrar la manera de agregar bibliotecas en mi proyecto.

Veo algunas partes similares. Por ejemplo, en _Layout.cshtml tengo este código:

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

Luego en el archivo packages.config :

<packages>
<package id="Antlr" version="3.4.1.9004" targetFramework="net45" />
<package id="bootstrap" version="3.0.0" targetFramework="net45" />
<package id="EntityFramework" version="6.0.0" targetFramework="net45" />
<package id="jQuery" version="1.10.2" targetFramework="net45" />
<package id="jQuery.Validation" version="1.11.1" targetFramework="net45" />
</packages>

Entonces, por lo que sé, algo sucede en Global.asax

Por lo tanto, he descargado las bibliotecas de jQuery UI con archivos .js y css. Mi pregunta es: ¿dónde y qué debo agregar para utilizar estas bibliotecas en todas partes, como las bibliotecas predeterminadas (bootstrap o jquery)? Y jQuery UI tiene 3 carpetas con contenido. Agregué estas carpetas con todo el contenido a mi proyecto, solo necesito agregar referencias.

Answer 1

Después de instalar JQuery ui usando NuGet, agregue los siguientes fragmentos a BundleConfig.cs como se muestra a continuación

 bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));

además

 bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.theme.css"));

Ahora agregue los siguientes fragmentos a su _Layout.cshtml como se muestra a continuación

 @Styles.Render("~/Content/themes/base/css")

y

@Scripts.Render("~/bundles/jqueryui")

Solo quiero dejarlo un poco claro, espero que esto ayude. Gracias

Answer 2

El código que ve renderizar css y scripts en su página _Layout.cshtml (es decir, @Scripts.Render("~/bundles/modernizr") ) se denomina agrupamiento . Consulte información aquí: http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

Entonces, para agregar jQueryUI, haría lo siguiente:

En su archivo Global.asax.cs debería ver una serie de registros:

BundleConfig.RegisterBundles(BundleTable.Bundles);

Esto va a la clase BundleConfig whioch registra cualquier paquete. Para jQueryUI puedes hacer lo siguiente:

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));

Esto está creando un nuevo paquete de scripts llamado ~/bundles/jqueryui .

Luego se puede agregar a su página de diseño haciendo esto:

@Scripts.Render("~/bundles/jqueryui")

Entonces harás lo mismo para css:

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));

y agregarlo con

@Styles.Render("~/Content/themes/base/css")

Nota:

• En MVC4, un proyecto no vacío ya tiene configurada jQuery. Para un proyecto vacío, deberías agregarlo tú mismo. No estoy 100% seguro acerca del nuevo MVC 5.
• Puedes instalar jQueryUi desde nuget, pero el paquete oficial no agrega estas cosas agrupadas.
• Podrías hacer las referencias pasadas de tus archivos css y js (ej. <script language="JavaScript" src="~/Scripts/jQuery.ui.1.8.2.js" />

Answer 3

El paquete CSS debe tener el siguiente aspecto para la versión 1.11.1 ahora:

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/accordion.css",
"~/Content/themes/base/all.css",
"~/Content/themes/base/autocomplete.css",
"~/Content/themes/base/base.css",
"~/Content/themes/base/button.css",
"~/Content/themes/base/core.css",
"~/Content/themes/base/datepicker.css",
"~/Content/themes/base/dialog.css",
"~/Content/themes/base/draggable.css",
"~/Content/themes/base/menu.css",
"~/Content/themes/base/progressbar.css",
"~/Content/themes/base/resizable.css",
"~/Content/themes/base/selectable.css",
"~/Content/themes/base/selectmenu.css",
"~/Content/themes/base/slider.css",
"~/Content/themes/base/sortable.css",
"~/Content/themes/base/spinner.css",
"~/Content/themes/base/tabs.css",
"~/Content/themes/base/theme.css",
"~/Content/themes/base/tooltip.css"));

`

Answer 4

Para instalar jQueryUI + la última versión de jQuery, puede usar NuGet:

Install-Package jQuery.UI.Combined

Esto actualizará sus bibliotecas jQuery existentes a la última versión .

Puede hacer referencia a esto yendo en App_Start/BundleConfig.cs y agregue:

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/all.css"));

Luego puede usarlo en páginas individuales o globalmente en _Layout.cshtml

@Styles.Render("~/Content/themes/base/css") // Add to <head> tags
@Scripts.Render("~/bundles/jqueryui") // Add above </body>