ASP.NET Web Forms の Modernization のバックアップ差分(No.15)

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

• バックアップ一覧
• 現在との差分 を表示
• ソース を表示
• バックアップ を表示
• 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>http://opentouryo.osscons.jp/]] - [[マイクロソフト系技術情報 Wiki>http://techinfoofmicrosofttech.osscons.jp/]]
「[[マイクロソフト系技術情報 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]]を参照。

**初期設定 [#s5b54b4c]
***Optimization.WebFormsをインストールする。 [#v05e2164]
[[ASP.NET Web Forms]]では、追加で以下のインストールが必要になる。
 Install-Package Microsoft.AspNet.Web.Optimization.WebForms

***Web.configに定義を追加する。 [#y511bb29]
また、インストール後に以下の定義を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 [#wefbae22]
以下のように、[[ASP.NET Web Forms]]用の追加の[[BundleConfig>ASP.NET の BundleConfig]]を行う。

***インストール [#neb771b9]
[[共通項>ASP.NET の Modernization]]でインストールしたパッケージに加え以下をインストールする。

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

***定義方法 [#z6ec33f3]
-定義対象

--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フォールバック [#s8ee8670]
***ScriptManager [#x116b8c6]
[[ASP.NET Web Forms]]ではScriptManagerにCDNフォールバック機能が実装されている。

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

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

***定義方法 [#s25dcf4f]
詳しくは、[[コチラ>https://github.com/OpenTouryoProject/OpenTouryo/issues/200]]を

-[[ScriptManagerの場合>#q7b86fa2]]

-[[ScriptBundleの場合>ASP.NET の Modernization#s62820fe]]

**リンクのさせ方 [#xbdfa1a0]
[[初期設定>#s5b54b4c]]が完了していること。

***JS [#id2a0390]
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 [#f1858a71]
webopt:bundlereferenceと言うタブを使用するもよう。

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

**ScriptReference [#r2152a06]
***カスタマイズ [#q7b86fa2]
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との関連 [#r10bf580]
同じような疑問を持つ人がいる。

-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 の RouteConfig]] [#z952e103]
基本的な事項は、[[コチラ>ASP.NET の RouteConfig]]を参照。

**機能概要 [#sfdb6d92]
[[ASP.NET Web Forms]]の[[RouteConfig>ASP.NET の RouteConfig]]では、~
ファイルの拡張子（*.aspxなど）をURLに付与しなくても済むよう、~
「ASP.NET Friendly URLs」と言う機能を追加できる。

**設定方法 [#d1509727]

***インストール [#g6b3e8d5]
「ASP.NET Friendly URLs」のインストール

 Install-Package Microsoft.AspNet.FriendlyUrls

***定義方法 [#l0dd072e]
-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);
     }
 }

*参考 [#b3a19659]
-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>ASP.NET の BundleConfig]] [#d735cd46]
***Bundle と Minification [#s832ac35]
-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フォールバック [#fce577b9]
- ASP.NET アプリの高速化 : CDN の利用とフォールバック対応 – THE TRUTH IS OUT THERE~
https://blogs.msdn.microsoft.com/chack/2013/05/12/asp-net-cdn/

**[[RouteConfig>ASP.NET の RouteConfig]] [#k0869edb]
-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.012 sec.