web-dev-qa-db-ja.com

MVC 5プロジェクトにjQueryUIライブラリを追加する方法は？

Visual Studio 2013をインストールし、新しいMVC 5プロジェクトを開始しました。私はMVCの開発に慣れていないので、プロジェクトにライブラリを追加する方法がわかりません。

似たような部品がいくつかあります。たとえば、_Layout.cshtmlには次のコードがあります。

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

次に、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>

その後、私の知る限り、Global.asaxで何かが発生します

そのため、.jsおよびcssファイルを含むjQuery UIライブラリをダウンロードしました。私の質問は次のとおりです。デフォルトライブラリ（ブートストラップまたはjquery）のようなあらゆる場所でこのライブラリを使用するという点で、どこに何を追加する必要がありますか。また、jQuery UIには、コンテンツを含む3つのフォルダーがあります。このフォルダーにすべてのコンテンツをプロジェクトに追加しました。参照を追加するだけです。

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

_Layout.cshtmlページ（つまり@Scripts.Render("~/bundles/modernizr")）でcssとスクリプトをレンダリングするのを見るコードはbundlingと呼ばれます。ここでいくつかの情報を確認してください： http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

したがって、jQueryUIを追加するには、次のようにします。

Global.asax.csファイルには、いくつかの登録が表示されるはずです。

BundleConfig.RegisterBundles(BundleTable.Bundles);

これは、バンドルを登録するBundleConfigクラスになります。 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がセットアップされています。空のプロジェクトの場合は、自分で追加する必要があります。新しいMVC 5について100％確信はありません。
  • JQueryUiはNuGetからインストールできますが、公式パッケージではこのバンドル製品は追加されません。
  • 昔ながらのcssファイルとjsファイルの参照を行うことができます（例：<script language="JavaScript" src="~/Scripts/jQuery.ui.1.8.2.js" />
112
Simon C

バージョン1.11.1の場合、cssバンドルは次のようになります。

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

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

NuGetを使用してJQuery UIをインストールした後、以下に示すように、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

少し明確にしたいのですが、これが役立つことを願っています。ありがとう

5
user2662006