Как добавить библиотеку jQueryUI в проект MVC 5?

Я только что установил Visual Studio 2013 и начал новый проект MVC 5. Я немного новичок в разработке MVC, и я не могу понять, как добавить библиотеки в свой проект.

Я вижу некоторые похожие части. Например, на _Layout.cshtml у меня есть этот код:

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

затем в packages.config file:

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

тогда, насколько я знаю, что-то происходит на Global.asax

Итак ,я загрузил библиотеки пользовательского интерфейса jQuery.файлы js и css. Мой вопрос есть: Где и что я должен добавить в плане использования этих библиотек везде, как библиотеки по умолчанию (bootstrap или jquery)? И jQuery UI имеет 3 папки с содержимым. Я добавил эти папки со всем контентом в свой проект, мне просто нужно добавить ссылки.

4 55
asp.net-mvc jquery asp.net-mvc-4 asp.net-mvc-5 jquery-ui-sortable

4 ответа:

код, который вы видите рендеринга css и скриптов на вашем _Layout.cshtml страница (т. е. @Scripts.Render("~/bundles/modernizr")) называется комплектации. Проверьте некоторую информацию здесь:http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

Итак, чтобы добавить jQueryUI, вы должны сделать следующее:

в вашем глобальном.асакс.cs файл вы должны увидеть ряд регистраций:

BundleConfig.RegisterBundles(BundleTable.Bundles);

в этом BundleConfig класс whioch регистрирует любые пакеты. Для jQueryUI вы можете сделать следующее:

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

это создание нового пакета скриптов под названием ~/bundles/jqueryui.

затем он может быть добавлен на вашу страницу макета, сделав это:

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

тогда вы сделаете то же самое для 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"));

и добавить его с

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

Примечание:

  • в MVC4 непустой проект уже имеет настроенный jQuery. Для пустого проекта вам придется добавить его самостоятельно. Не на 100% уверен в новом MVC 5.
  • вы можете установить jQueryUi из nuget, но официальный пакет не добавляет этот комплект.
  • вы могли бы просто сделать старомодную ссылку на вас css и JS файлы (например,<script language="JavaScript" src="~/Scripts/jQuery.ui.1.8.2.js" />
101

пакет css теперь должен выглядеть следующим образом для версии 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"));

'

30

для установки jQueryUI + последней версии jQuery вы можете использовать NuGet:

Install-Package jQuery.UI.Combined

это обновит существующие библиотеки jQuery до последняя версия.

вы можете ссылаться на это, зайдя в App_Start/BundleConfig.cs и добавить: 

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

затем вы можете использовать его на отдельных страницах или в мире _Layout.cshtml

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

после установки jQuery ui с помощью NuGet добавьте следующие фрагменты в BundleConfig.CS, как показано ниже 

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

и 

            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

теперь добавьте следующие фрагменты в ваш _Layout.cshtml, как показано ниже 

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

и 

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

enter image description here

Я просто хочу сделать это немного ясно, надеюсь, что это поможет. Спасибо

3