マイクロソフト系技術情報 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

目次

概要

コチラの内容をまとめた。

共通項

コチラを参照。

BundleConfig

基本的な事項は、コチラを参照。

Bundle & Minification

必要に応じて、追加のBundleConfigを行う。

インストール

共通項でインストールしたパッケージに加え以下をインストールする。

  • jQuery Validation Plugin ( MVC の Validation で使っている )
    • 既存のフォームのドロップイン検証を提供する。
      アプリケーションに合わせてあらゆるカスタマイズを簡単できる。
    • インストール方法
      Install-Package jQuery.Validation
  • jQuery Unobtrusive Ajax
    https://github.com/aspnet/jquery-ajax-unobtrusive
    • 公式サイトにも殆ど情報が無いが、Ajax.BeginForm?を実行するのに必要らしい。
    • インストール方法
      Install-Package Microsoft.jQuery.Unobtrusive.Ajax
  • jQuery Unobtrusive Validation
    https://github.com/aspnet/jquery-validation-unobtrusive
    • 公式サイトにも殆ど情報が無いが、Ajax.BeginForm? での Validationを実行するのに必要らしい。
    • インストール方法
      Install-Package Microsoft.jQuery.Unobtrusive.Validation

定義方法

  • BundleConfig?を追加する。
       public class BundleConfig
       {
           public static void RegisterBundles(BundleCollection bundles)
           {
               // see : https://www.asp.net/ajax/cdn
    
               string jqueryVersion = "3.1.1";
    
               BundleTable.EnableOptimizations = true;
               BundleTable.Bundles.UseCdn = true; // same as: bundles.UseCdn = true;
    
               // ( new ScriptBundle("~/XXXX") のパスは実在するpathと被るとRender時にバグる。
               // なので、bundlesと実在しないpathを指定している(CSSも同じbundlesを使用する)。
    
               bundles.Add(new ScriptBundle("~/bundles/app").Include(
                           "~/Scripts/app/Site.js"));
    
               bundles.Add(new ScriptBundle("~/bundles/otr").Include(
                           "~/Scripts/otr/common.js",
                           "~/Scripts/otr/ie_key_event.js",
                           "~/Scripts/otr/else.js"));
    
               bundles.Add(new ScriptBundle(
                   "~/bundles/jquery",
                   string.Format("//ajax.aspnetcdn.com/ajax/jquery/jquery-{0}.min.js", jqueryVersion))
                   {
                       CdnFallbackExpression = "window.jQuery"
                   }.Include(string.Format("~/Scripts/jquery-{0}.js", jqueryVersion)));
    
               bundles.Add(new ScriptBundle(
                   "~/bundles/jqueryval",
                   "//ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js")
                   {
                       CdnFallbackExpression = "window.jQuery.validator"
                   }.Include("~/Scripts/jquery.validate.js"));
    
               bundles.Add(new ScriptBundle(
                   "~/bundles/jqueryvaluno",
                   "//ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.min.js")
                   {
                       CdnFallbackExpression = "window.jQuery.validator.unobtrusive"
                   }.Include("~/Scripts/jquery.validate.unobtrusive.js"));
    
               bundles.Add(new ScriptBundle("~/bundles/jqueryunoajax").Include(
                   "~/Scripts/jquery.unobtrusive-ajax.js")); // CDNで提供されていない。
               
               // 開発と学習には、Modernizr の開発バージョンを使用します。次に、実稼働の準備ができたら、
               // http://modernizr.com にあるビルド ツールを使用して、必要なテストのみを選択します。
               bundles.Add(new ScriptBundle(
                   "~/bundles/modernizr",
                   "//ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js") // min 無し
                   {
                       CdnFallbackExpression = "window.Modernizr"
                   }.Include("~/Scripts/modernizr-*"));
    
               bundles.Add(new ScriptBundle(
                   "~/bundles/bootstrap",
                   "//ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js")
                   {
                       CdnFallbackExpression = "window.jQuery.fn.modal"
                   }.Include("~/Scripts/bootstrap.js"));
    
               bundles.Add(new ScriptBundle(
                   "~/bundles/respond",
                   "//ajax.aspnetcdn.com/ajax/respond/1.4.2/respond.min.js")
                   {
                       CdnFallbackExpression = "window.respond"
                   }.Include("~/Scripts/respond.js"));
    
               bundles.Add(new StyleBundle("~/bundles/css").Include(
                           "~/Content/bootstrap.css",
                           "~/Content/themes/base/all.css",
                           "~/Content/themes/base/jquery-ui.css",
                           "~/Content/otr/Style.css",
                           "~/Content/app/Site.css"));
           }
       }
  • BundleConfig?を呼び出す。
       public class Startup
       {
           public void Configuration(IAppBuilder app)
           {
               // アプリケーションの設定方法の詳細については、http://go.microsoft.com/fwlink/?LinkID=316888 を参照してください
    
               // アプリケーションのスタートアップで実行するコードです
    
               //
               AreaRegistration.RegisterAllAreas();
    
               // 
               WebApiConfig.Register(GlobalConfiguration.Configuration);
    
               // グローバルフィルタの登録
               FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
    
               // URLルーティングの登録
               RouteConfig.RegisterRoutes(RouteTable.Routes);
    
               // バンドル&ミニフィケーションの登録
               BundleConfig.RegisterBundles(BundleTable.Bundles);
           }
       }

CDNフォールバック

  • ASP.NET MVCのCDNフォールバックは、 ScriptBundle?クラスで行なう。
  • ASP.NET Web Formsでは、コレに加えて、ScriptManager?にCDNフォールバック機能がある。
  • ASP.NET MVCのCDNフォールバックの設定方法など、詳しくは、コチラを参照。

リンクのさせ方

@* マスタ・ページに相当 *@
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/bundles/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")

    @RenderSection("HeaderSection", required: true)

</head>
<body onload="Fx_Document_OnLoad(); Fx_AdjustStyle();">

    @RenderBody()

    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryuno")
    @Scripts.Render("~/bundles/otr")
    @Scripts.Render("~/bundles/app")

    @RenderSection("FooterSection", required: true)
</body>
</html>

RouteConfig

ASP.NET MVCでは、既定で設定ができている。

その他

Model Bindingや非同期コントローラーを使用するように修正する。

参考

BundleConfig

Bundle と Minification

CDNフォールバック

RouteConfig

・・・


Tags: :.NET開発, :ASP.NET, :ASP.NET MVC, :OWIN, :NuGet, :移行


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2018-04-12 (木) 10:54:34 (314d)