Open棟梁Project - マイクロソフト系技術情報 Wiki
コチラの内容をまとめた。
コチラを参照。
基本的な事項は、コチラを参照。
ASP.NET Web Formsでは、追加で以下のインストールが必要になる。
Install-Package Microsoft.AspNet.Web.Optimization.WebForms
また、インストール後に以下の定義をWeb.configに追加する必要がある。
<pages> <namespaces> <add namespace="System.Web.Optimization" /> </namespaces> <controls> <add assembly="Microsoft.AspNet.Web.Optimization.WebForms" namespace="Microsoft.AspNet.Web.Optimization.WebForms" tagPrefix="webopt" /> </controls> </pages> </system.web>
以下のように、ASP.NET Web Forms用の追加のBundleConfigを行う。
共通項でインストールしたパッケージに加え以下をインストールする。
Install-Package Microsoft.AspNet.ScriptManager.MSAjax Install-Package Microsoft.AspNet.ScriptManager.WebForms
public class BundleConfig { // バンドルの詳細については、http://go.microsoft.com/fwlink/?LinkID=303951 を参照してください。 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/WebFormsJs").Include( "~/Scripts/WebForms/WebForms.js", "~/Scripts/WebForms/WebUIValidation.js", "~/Scripts/WebForms/MenuStandards.js", "~/Scripts/WebForms/Focus.js", "~/Scripts/WebForms/GridView.js", "~/Scripts/WebForms/DetailsView.js", "~/Scripts/WebForms/TreeView.js", "~/Scripts/WebForms/WebParts.js")); // これらのファイルには明示的な依存関係があり、ファイルが動作するためには順序が重要です bundles.Add(new ScriptBundle("~/bundles/MsAjaxJs").Include( "~/Scripts/WebForms/MsAjax/MicrosoftAjax.js", "~/Scripts/WebForms/MsAjax/MicrosoftAjaxApplicationServices.js", "~/Scripts/WebForms/MsAjax/MicrosoftAjaxTimer.js", "~/Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js")); // 開発と学習には、Modernizr の開発バージョンを使用します。次に、実稼働の準備ができたら、 // http://modernizr.com にあるビルド ツールを使用して、必要なテストのみを選択します。 bundles.Add(new ScriptBundle("~/bundles/modernizr").Include("~/Scripts/modernizr-*")); ScriptManager.ScriptResourceMapping.AddDefinition( "respond", new ScriptResourceDefinition { Path = "~/Scripts/respond.min.js", DebugPath = "~/Scripts/respond.js", }); } }
public class Startup { public void Configuration(IAppBuilder app) { // アプリケーションの設定方法の詳細については、http://go.microsoft.com/fwlink/?LinkID=316888 を参照してください // アプリケーションのスタートアップで実行するコードです // URLルーティングの登録 RouteConfig.RegisterRoutes(RouteTable.Routes); // バンドル&ミニフィケーションの登録 BundleConfig.RegisterBundles(BundleTable.Bundles); } }
<?xml version="1.0" encoding="utf-8" ?> <bundles version="1.0"> <styleBundle path="~/bundles/css"> <include path="~/Content/bootstrap.css" /> <include path="~/Content/Site.css" /> </styleBundle> </bundles>
ASP.NET Web FormsではScriptManager?にCDNフォールバック機能が実装されている。
その他、ASP.NET MVCと同様に、ScriptBundle?クラスで、
個別にCDNフォールバックの定義を行なうこともできる。
詳しくは、コチラを
初期設定が完了していること。
Scripts.Renderメソッドと<asp:ScriptManager?>タグを使用する方法がある。
<title>・・・</title> <asp:PlaceHolder runat="server"> <%: Scripts.Render("~/bundles/modernizr") %> <%: Scripts.Render("~/bundles/jquery") %> </asp:PlaceHolder>
<%: Scripts.Render("~/bundles/XXXX") %>
<body> <form runat="server"> <asp:ScriptManager runat="server"> <Scripts> <%--ScriptManager のバンドル スクリプトの詳細については、http://go.microsoft.com/fwlink/?LinkID=301884 を参照してください --%> <%--Framework スクリプト--%> <asp:ScriptReference Name="MsAjaxBundle" /> <asp:ScriptReference Name="jquery" /> <asp:ScriptReference Name="bootstrap" /> <asp:ScriptReference Name="respond" /> <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" /> <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" /> <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" /> <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" /> <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" /> <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" /> <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" /> <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" /> <asp:ScriptReference Name="WebFormsBundle" /> <%--サイト スクリプト--%> </Scripts> </asp:ScriptManager>
webopt:bundlereferenceと言うタブを使用するもよう。
<title>・・・</title> <asp:PlaceHolder runat="server"> <%: Scripts.Render("~/bundles/modernizr") %> </asp:PlaceHolder> <webopt:bundlereference runat="server" path="~/bundles/css" />
同じような疑問を持つ人がいる。
以下に回答がある。
ScriptManager.ScriptResourceMapping.AddDefinition("MsAjaxBundle", new ScriptResourceDefinition { Path = "~/bundles/MsAjaxJs", CdnPath = "http://ajax.aspnetcdn.com/ajax/4.5/6/MsAjaxBundle.js", LoadSuccessExpression = "window.Sys", CdnSupportsSecureConnection = true }); PreApplicationStartCode.AddMsAjaxMapping("MicrosoftAjax.js", "window.Sys && Sys._Application && Sys.Observer");
この型/メンバーは、.NET Framework インフラストラクチャをサポートします。
独自に作成したコードから直接使用するためのものではありません。
結論としては、
となる。
asp:ScriptReference?は、jQueryなどのファイルのバージョンとCDNを指定できない。
ただし、次のようにマッピングをカスタマイズすれば、動作をカスタマイズして任意のCDNから任意のバージョンを取得できる。
var mapping = ScriptManager.ScriptResourceMapping; // Map jquery definition to the Google CDN mapping.AddDefinition("jquery", new ScriptResourceDefinition { Path = "~/Scripts/jquery-2.0.0.min.js", DebugPath = "~/Scripts/jquery-2.0.0.js", CdnPath = "http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", CdnDebugPath = "https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.js", CdnSupportsSecureConnection = true, LoadSuccessExpression = "window.jQuery" });
基本的な事項は、コチラを参照。
ASP.NET Web FormsのRouteConfigでは、
ファイルの拡張子(*.aspxなど)をURLに付与しなくても済むよう、
「ASP.NET Friendly URLs」と言う機能を追加できる。
「ASP.NET Friendly URLs」のインストール
Install-Package Microsoft.AspNet.FriendlyUrls
public static class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { //var settings = new FriendlyUrlSettings(); //settings.AutoRedirectMode = RedirectMode.Permanent; //routes.EnableFriendlyUrls(settings); } }
public class Startup { public void Configuration(IAppBuilder app) { // アプリケーションの設定方法の詳細については、http://go.microsoft.com/fwlink/?LinkID=316888 を参照してください // アプリケーションのスタートアップで実行するコードです // URLルーティングの登録 RouteConfig.RegisterRoutes(RouteTable.Routes); // バンドル&ミニフィケーションの登録 BundleConfig.RegisterBundles(BundleTable.Bundles); } }
Tags: :.NET開発, :ASP.NET, :ASP.NET Web Forms, :OWIN, :NuGet