web-dev-qa-db-fra.com

Comment ajouter une bibliothèque jQueryUI dans un projet MVC 5?

Je viens d'installer Visual Studio 2013 et de démarrer un nouveau projet MVC 5. Je suis un peu nouveau dans le développement de MVC et je ne sais pas comment ajouter des bibliothèques à mon projet.

Je vois des parties similaires. Par exemple, sur le _Layout.cshtml J'ai ce code:

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

Puis dans le packages.config fichier:

<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>

Alors, autant que je sache, il se passe quelque chose le Global.asax

J'ai donc téléchargé des bibliothèques jQuery UI avec les fichiers .js et css. Ma question est la suivante: où et à quoi dois-je ajouter en termes d’utilisation ces bibliothèques partout comme les bibliothèques par défaut (bootstrap ou jquery)? Et jQuery UI a 3 dossiers avec le contenu. J'ai ajouté ces dossiers avec tout le contenu de mon projet, il me suffit d'ajouter des références.

jqueryasp.net-mvcjquery-uiasp.net-mvc-4asp.net-mvc-5
59
Bryuk

Le code que vous voyez lors du rendu des css et des scripts sur votre page _Layout.cshtml (C'est-à-dire @Scripts.Render("~/bundles/modernizr")) est appelé le regroupement . Découvrez quelques informations ici: http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

Ainsi, pour ajouter jQueryUI, procédez comme suit:

Dans votre fichier Global.asax.cs, vous devriez voir un certain nombre d’enregistrements:

BundleConfig.RegisterBundles(BundleTable.Bundles);

Cela va à la classe BundleConfig qui enregistre les paquets. Pour jQueryUI, vous pouvez effectuer les opérations suivantes:

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

Cela crée un nouvel ensemble de scripts appelé ~/bundles/jqueryui.

Ensuite, il peut être ajouté à votre page de mise en page en procédant comme suit:

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

Ensuite, vous ferez de même pour les 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"));

et l'ajouter avec

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

Remarque:

  • Dans MVC4, jQuery est déjà configuré pour un projet non vide. Pour un projet vide, vous devez l'ajouter vous-même. Pas tout à fait sûr du nouveau MVC 5.
  • Vous pouvez installer jQueryUi à partir de NuGet, mais le paquetage officiel n’ajoute pas ce type de regroupement.
  • Vous pouvez simplement faire le référencement à l’ancienne de vos fichiers css et js (par exemple <script language="JavaScript" src="~/Scripts/jQuery.ui.1.8.2.js" />
112
Simon C

Le bundle css devrait maintenant ressembler à la version 1.11.1:

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"));

`

33
Doug Dekker

Pour installer jQueryUI + la dernière version de jQuery, vous pouvez utiliser NuGet:

Install-Package jQuery.UI.Combined

Ceci mettra à jour vos bibliothèques jQuery existantes à la dernière version .

Vous pouvez ensuite faire référence à cela en allant dans App_Start/BundleConfig.cs et ajouter:

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"));

Vous pouvez ensuite l'utiliser sur des pages individuelles ou globalement dans _Layout.cshtml

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

Après avoir installé JQuery UI à l’aide de NuGet, ajoutez les extraits suivants à BundleConfig.cs comme indiqué ci-dessous.

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

également

            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"));

here is my screen shot

Maintenant, ajoutez les extraits suivants à votre _Layout.cshtml comme indiqué ci-dessous

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

et

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

enter image description here

Je veux juste que ce soit un peu clair, espérons que cela aidera. Merci

5
user2662006