Comment ajouter jQueryUI bibliothèque MVC 5 projet?

Question

Je viens d'installer Visual Studio 2013 et a commencé à nouveau MVC 5 projet. Je suis un peu nouveau dans MVC en développement et je ne peux pas comprendre comment ajouter des bibliothèques dans mon projet.

Je vois des pièces similaires. Par exemple, sur l' _Layout.cshtml j'ai ce code:

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

Puis dans l' packages.config le 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 comme je sais que quelque chose se passe sur Global.asax

Donc, j'ai téléchargé jQuery UI bibliothèques avec .les fichiers css et js. Ma question est: D'où et de quoi dois-je ajouter que ce soit en terme d'utilisation de cette 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é ce dossiers avec tout le contenu de mon projet, j'ai juste besoin d'ajouter des références.

Answer 1

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

Donc, pour ajouter jQueryUI vous effectuez les opérations suivantes:

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

BundleConfig.RegisterBundles(BundleTable.Bundles);

Cela va à l' BundleConfig classe whioch enregistre tous les faisceaux. Pour jQueryUI vous pouvez effectuer les opérations suivantes:

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

C'est la création d'un nouveau script bundle nommé ~/bundles/jqueryui.

Ensuite, il peut être ajouté à votre page de présentation en faisant ceci:

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

Alors vous allez faire de même pour le 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 d'ajouter avec

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

Note:

• Dans MVC4, un non-vide projet a déjà jQuery mis en place. Pour un projet vide vous devez ajouter vous-même. Pas sûr à 100% sur la nouvelle MVC 5.
• Vous pouvez installer jQueryUi de nuget, mais le paquet officiel ne pas ajouter ce regroupement choses.
• Vous pourriez faire à l'ancienne référencement de vous les fichiers css et js (par exemple, <script language="JavaScript" src="~/Scripts/jQuery.ui.1.8.2.js" />

Answer 2

Le css bundle devrait se présenter comme suit pour la version 1.11.1 maintenant:

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

`