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

目次

概要

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

共通項

コチラを参照。

BundleConfig

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

初期設定

Optimization.WebForms?をインストールする。

ASP.NET Web Formsでは、追加で以下のインストールが必要になる。

Install-Package Microsoft.AspNet.Web.Optimization.WebForms

Web.configに定義を追加する。

また、インストール後に以下の定義を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>

Bundle & Minification

以下のように、ASP.NET Web Forms用の追加のBundleConfigを行う。

インストール

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

Install-Package Microsoft.AspNet.ScriptManager.MSAjax
Install-Package Microsoft.AspNet.ScriptManager.WebForms

定義方法

  • 定義対象
  • WebFormsJs?
    詳細は不明。情報が殆ど無い。
    • WebForms?.js
    • WebUIValidation.js
    • MenuStandards?.js
    • Focus.js
    • GridView?.js
    • DetailsView?.js
    • TreeView?.js
    • WebParts?.js
  • MsAjaxJs?
    JS file related to ASP.NET Ajax
    • MicrosoftAjax?.js
    • MicrosoftAjaxApplicationServices?.js
    • MicrosoftAjaxTimer?.js
    • MicrosoftAjaxWebForms?.js
  • 設定
    • BundleConfig?を追加する。
      (最新のASP.NET Web Formsプロジェクト・テンプレートから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"));
      
                 // こちらのCDNフォールバック設定はScriptManager内で行われているため不要
                 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"));
      
                 // こちらのCDNフォールバック設定はScriptManager内で行われているため不要
                 // これらのファイルには明示的な依存関係があり、ファイルが動作するためには順序が重要です
                 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",
                     "//ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js") // min 無し
                     {
                         CdnFallbackExpression = "window.Modernizr"
                     }.Include("~/Scripts/modernizr-*"));
      
                 ScriptManager.ScriptResourceMapping.AddDefinition(
                     "respond",
                     new ScriptResourceDefinition
                     {
                         Path = "~/Scripts/respond.min.js",
                         DebugPath = "~/Scripts/respond.js",
                         CdnPath = "//ajax.aspnetcdn.com/ajax/respond/1.4.2/respond.min.js",
                         CdnDebugPath = "//ajax.aspnetcdn.com/ajax/respond/1.4.2/respond.js",
                         CdnSupportsSecureConnection = false,
                         LoadSuccessExpression = "window.respond"
                     });
             }
         }
  • BundleConfig?を呼び出す。
    Global.asax or Startup から BundleConfig?.RegisterBundles?メソッドを呼び出す。
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // アプリケーションの設定方法の詳細については、http://go.microsoft.com/fwlink/?LinkID=316888 を参照してください
    
            // アプリケーションのスタートアップで実行するコードです
    
            // URLルーティングの登録
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            // バンドル&ミニフィケーションの登録
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }
    }
  • CSSについては、Bundle.configに定義する。
    <?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>

CDNフォールバック

ScriptManager?

ASP.NET Web FormsではScriptManager?にCDNフォールバック機能が実装されている。

  • アセンブリから取得する場合はCDNフォールバックの定義は不要。
  • 以下の場合は、CDNフォールバックの定義が必要になる。
    • 自前のScriptManager?定義を使用する場合
    • CDNフォールバック動作をカスタマイズする場合

ScriptBundle?

その他、ASP.NET MVCと同様に、ScriptBundle?クラスで、
個別にCDNフォールバックの定義を行なうこともできる。

定義方法

詳しくは、コチラ

リンクのさせ方

初期設定が完了していること。

JS

Scripts.Renderメソッドと<asp:ScriptManager?>タグを使用する方法がある。

  • Scripts.Render
    • Header
      <title>・・・</title>
      <asp:PlaceHolder runat="server">
          <%: Scripts.Render("~/bundles/modernizr") %>
          <%: Scripts.Render("~/bundles/jquery") %>
      </asp:PlaceHolder>
    • Footer
      <%: Scripts.Render("~/bundles/XXXX") %>
  • ScriptManager?
    <body>
        <form runat="server">
            <asp:ScriptManager EnableCdn="true" 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>

CSS

webopt:bundlereferenceと言うタブを使用するもよう。

<title>・・・</title>
<asp:PlaceHolder runat="server">
    <%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/bundles/css" />

ScriptReference?

カスタマイズ

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"
});

ScriptBundle?との関連

同じような疑問を持つ人がいる。

以下に回答がある。

  • MsAjaxJs?
    • ScriptManager?
      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");
  • ScriptBundle?
    bundles.Add(new ScriptBundle("~/bundles/MsAjaxJs").Include(
                ・・・
  • WebFormsJs?
    • ScriptManager?
      ScriptManager.ScriptResourceMapping.AddDefinition("WebFormsBundle", new ScriptResourceDefinition
      {
          Path = "~/bundles/WebFormsJs", 
          ・・・
  • ScriptBundle?
    bundles.Add(new ScriptBundle("~/bundles/WebFormsJs").Include(
                ・・・

結論としては、

  • ScriptManager?の中から、ScriptBundle?を組み合わせて使っている。
  • PreApplicationStartCode?は、ScriptManager?内部の実装であり、
    ScriptManager?内でCDNフォールバックも定義されている。

となる。

RouteConfig

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

機能概要

ASP.NET Web FormsRouteConfigでは、
ファイルの拡張子(*.aspxなど)をURLに付与しなくても済むよう、
「ASP.NET Friendly URLs」と言う機能を追加できる。

設定方法

インストール

「ASP.NET Friendly URLs」のインストール

Install-Package Microsoft.AspNet.FriendlyUrls

定義方法

  • RouteConfig?を追加する。
    (最新のASP.NET Web Formsプロジェクト・テンプレートからRouteConfig?を自動生成して入手)。
    public static class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            //var settings = new FriendlyUrlSettings();
            //settings.AutoRedirectMode = RedirectMode.Permanent;
            //routes.EnableFriendlyUrls(settings);
        }
    }
  • RouteConfig?を呼び出す。
    Global.asax or Startup から RouteConfig?.RegisterRoutes?メソッドを呼び出す。
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // アプリケーションの設定方法の詳細については、http://go.microsoft.com/fwlink/?LinkID=316888 を参照してください
    
            // アプリケーションのスタートアップで実行するコードです
    
            // URLルーティングの登録
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            // バンドル&ミニフィケーションの登録
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }
    }

参考

BundleConfig

Bundle と Minification

CDNフォールバック

RouteConfig


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


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