ASP.NET MVC の Modernization のバックアップ(No.7) - マイクロソフト系技術情報 Wiki

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)
       {
           //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").Include(
                       "~/Scripts/jquery-{version}.js"));

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

           bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                       "~/Scripts/jquery.validate*"));

           bundles.Add(new ScriptBundle("~/bundles/jqueryuno").Include(
                       "~/Scripts/jquery.unobtrusive"));

           // 開発と学習には、Modernizr の開発バージョンを使用します。次に、実稼働の準備ができたら、
           // http://modernizr.com にあるビルド ツールを使用して、必要なテストのみを選択します。
           bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                       "~/Scripts/modernizr-*"));

           bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                       "~/Scripts/bootstrap.js",
                       "~/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では上記の、Bundle & Minificationの中で同時に、CDNフォールバックの定義を行う。
具体的には、「CDNのURL」と「CDNフォールバックを行なうための評価式」を設定する。

↑

ScriptBundle? †

ASP.NET MVCのCDNフォールバックは、ScriptBundle?クラスだけで行なう。

↑

定義方法 †

詳しくは、コチラを

「CdnFallbackExpression?」

という検索文字列で検索。

実際の設定方法は、以下のサイトが参考になる。

ASP.NET MVC 5 主要 JavaScriptライブラリのCDN、Fallbackまとめ - KatsuYuzu?のブログ
http://katsuyuzu.hatenablog.jp/entry/2014/10/02/000330

↑

リンクのさせ方 †

@* マスタ・ページに相当 *@
<!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/jqueryui")
    @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では、既定で設定ができている。

↑

参考 †

↑

BundleConfig †

↑

Bundle と Minification †

jQuery UI
- ASP.NET Razor Jqueryuiの使い方 | Yutaka Hirata
  http://rich.hrd.co.jp/asp-net-razor-jueryui%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9/
- クライアント側検証の無効化
  http://surferonwww.info/BlogEngine/post/2015/02/17/disable-client-side-validation-in-mvc4-internet-application.aspx

Ajax.BeginForm?
- MVC5 Ajax.BeginForm?()を利用するための手順 - Qiita
  http://qiita.com/m-otoguro/items/1250015aed6907a8d9e7
- asp.net mvc 5 - Ajax.BeginForm? doesn't fire AJAX script, falls back on postback - Stack Overflow
  http://stackoverflow.com/questions/21831451/ajax-beginform-doesnt-fire-ajax-script-falls-back-on-postback

↑

CDNフォールバック †

↑

RouteConfig †

・・・

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