ASP.NET Web Forms の Modernization のバックアップ(No.14)

[ トップ ]   [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• ASP.NET Web Forms の Modernization へ行く。
  • 1 (2017-01-16 (月) 09:28:53)
  • 2 (2017-01-16 (月) 12:24:45)
  • 3 (2017-01-16 (月) 15:06:05)
  • 4 (2017-01-16 (月) 20:59:41)
  • 5 (2017-01-17 (火) 12:49:40)
  • 6 (2017-01-17 (火) 17:45:25)
  • 7 (2017-01-18 (水) 13:09:42)
  • 8 (2017-01-19 (木) 22:33:49)
  • 9 (2017-01-20 (金) 15:23:27)
  • 10 (2017-01-23 (月) 23:28:28)
  • 11 (2017-01-24 (火) 15:02:01)
  • 12 (2017-01-26 (木) 15:10:09)
  • 13 (2017-01-29 (日) 21:26:25)
  • 14 (2017-01-29 (日) 22:19:49)
  • 15 (2017-02-27 (月) 18:14:36)
  • 16 (2018-04-12 (木) 10:54:38)
  • 17 (2020-07-02 (木) 18:40:31)

---

Open棟梁Project - マイクロソフト系技術情報 Wiki

• 戻る

目次 †

概要 †

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

• 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

共通項 †

コチラを参照。

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フォールバックの定義を行なうこともできる。

定義方法 †

詳しくは、コチラを

• ScriptManagerの場合

• ScriptBundleの場合

リンクのさせ方 †

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

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?との関連 †

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

• Optimizing ScriptManager? | The ASP.NET Forums
  https://forums.asp.net/t/2027312.aspx?Optimizing+ScriptManager
• asp.net - VS2012 - Web Forms - Bundling Confusion - Stack Overflow
  http://stackoverflow.com/questions/12290537/vs2012-web-forms-bundling-confusion

以下に回答がある。

• ASP.NET 4.5 ScriptManager? Improvements in WebForms? | .NET Web Development and Tools Blog
  https://blogs.msdn.microsoft.com/webdev/2012/09/21/asp-net-4-5-scriptmanager-improvements-in-webforms/
• ASP.NET 4.5 ScriptManager? Improvements in WebForms? – My.Ramblings
  https://blogs.msdn.microsoft.com/pranav_rastogi/2012/09/21/asp-net-4-5-scriptmanager-improvements-in-webforms/

• 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(
              ・・・

• PreApplicationStartCode?
  • PreApplicationStartCode? クラス (System.Web.WebPages?.Razor)
    https://msdn.microsoft.com/ja-jp/library/system.web.webpages.razor.preapplicationstartcode.aspx

    この型/メンバーは、.NET Framework インフラストラクチャをサポートします。
    独自に作成したコードから直接使用するためのものではありません。

結論としては、

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

となる。

RouteConfig †

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

機能概要 †

ASP.NET Web FormsのRouteConfigでは、
ファイルの拡張子（*.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);
      }
  }

参考 †

• Adding Bundling and Minification to Web Forms – RickAndMSFT on Azure & MVC
  https://blogs.msdn.microsoft.com/rickandy/2012/08/14/adding-bundling-and-minification-to-web-forms/

BundleConfig †

Bundle と Minification †

• ASP.NET Web FormsでOptimizationを活用して、CSSとJavascriptを最適化するには？ | sia.tech
  http://sianis.azurewebsites.net/?p=61
• [ASP.NET Optimization] javascript や cssのBundle と Minification 機能を使ってみる - Netplanetes
  http://www.pine4.net/Memo/Article/Archives/545
• ASP.NET 4.5 ScriptManager? Improvements in WebForms? | .NET Web Development and Tools Blog
  https://blogs.msdn.microsoft.com/webdev/2012/09/21/asp-net-4-5-scriptmanager-improvements-in-webforms/

CDNフォールバック †

• ASP.NET アプリの高速化 : CDN の利用とフォールバック対応 – THE TRUTH IS OUT THERE
  https://blogs.msdn.microsoft.com/chack/2013/05/12/asp-net-cdn/

RouteConfig †

• ASP.NET Friendly URLsを使う #aspnetjp by @masaru_b_cl | be free
  https://takanosho.wordpress.com/2013/12/21/one-asp-net-advent-calendar-2013/

---

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

     

Site admin: dotNetDevelopmentInfrastructure

PukiWiki 1.4.7 Copyright © 2001-2006 PukiWiki Developers Team. License is GPL.
Based on "PukiWiki" 1.3 by yu-ji. Powered by PHP 5.3.3. HTML convert time: 0.046 sec.