「[[マイクロソフト系技術情報 Wiki>http://techinfoofmicrosofttech.osscons.jp/]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。 -[[戻る>ASP.NET の Modernization]] * 目次 [#cb2dcf69] #contents *概要 [#p4222e1f] コチラの内容をまとめた。 -Modify template : Add the Startup class to template to correspond to the OWIN pipeline.~ https://github.com/OpenTouryoProject/OpenTouryo/issues/198 -Modify template : Link Bootstrap and jQuery from the template.~ https://github.com/OpenTouryoProject/OpenTouryo/issues/199 -Modify template : Correspond the JavaScript and CSS to bundle and minify, or to CDN.~ https://github.com/OpenTouryoProject/OpenTouryo/issues/200 -Modify template : Maintenance of the master page.~ https://github.com/OpenTouryoProject/OpenTouryo/issues/201 *[[共通項>ASP.NET の Modernization]] [#le39c2c1] [[コチラ>ASP.NET の Modernization]]を参照。 *[[BundleConfig>ASP.NET の BundleConfig]] [#b48396de] 基本的な事項は、[[コチラ>ASP.NET の BundleConfig]]を参照。 **Bundle & Minification [#wefbae22] 必要に応じて、追加の[[BundleConfig>ASP.NET の BundleConfig]]を行う。 ***インストール [#nbca941f] [[共通項>ASP.NET の Modernization]]でインストールしたパッケージに加え以下をインストールする。 -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 ***定義方法 [#z6ec33f3] -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フォールバック [#s8ee8670] -[[ASP.NET MVC]]のCDNフォールバックは、 ScriptBundleクラスで行なう。 -[[ASP.NET Web Forms]]では、コレに加えて、ScriptManagerにCDNフォールバック機能がある。 -[[ASP.NET MVC]]のCDNフォールバックの設定方法など、詳しくは、[[コチラ>ASP.NET の Modernization#s62820fe]]を参照。 **リンクのさせ方 [#xbdfa1a0] @* マスタ・ページに相当 *@ <!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 の RouteConfig]] [#z952e103] [[ASP.NET MVC]]では、既定で設定ができている。 *その他 [#b8b41b9b] Model Bindingや非同期コントローラーを使用するように修正する。 -Modify template : Modernization of the implementation of ActionMethod of MVC.~ Issue #215 · OpenTouryoProject/OpenTouryo~ https://github.com/OpenTouryoProject/OpenTouryo/issues/215 *参考 [#md5b9f16] **[[BundleConfig>ASP.NET の BundleConfig]] [#r8f5da6a] ***Bundle と Minification [#d2257292] -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フォールバック [#s57b8e7a] **[[RouteConfig>ASP.NET の RouteConfig]] [#je500e98] ・・・ ---- Tags: [[:.NET開発]], [[:ASP.NET]], [[:ASP.NET MVC]], [[:OWIN]], [[:NuGet]]