ASP.NET Web Forms の Modernization のバックアップ(No.5) - マイクロソフト系技術情報 Wiki

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

戻る

目次 †

↑

概要 †

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

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を行う。

↑

追加 †

respond.js
IE8以下でレスポンシブWebデザインを実現する。

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?」
「Bundle.config」
「RegisterBundles?」

という検索文字列で検索。

↑

CDNフォールバック †

↑

ScriptManager? †

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

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

↑

ScriptBundle? †

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

↑

定義方法 †

詳しくは、コチラを

ScriptManager?の場合
- 「<asp:ScriptManager? runat="server">」
- 「.AddDefinition?(」

ScriptBundle?の場合
- 「CdnFallbackExpression?」

という検索文字列で検索。

↑

リンクのさせ方 †

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

↑

JS †

Scripts.Renderメソッドと<asp:ScriptManager?>タグを使用する方法がある。
しかしながら、これら2つの方法の適切な使用が明確でないという問題がある。

Scripts.Render

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

ScriptManager?

<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>

↑

CSS †

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

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

↑

RouteConfig †

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

↑

参考 †

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/

↑

Bundle と Minification †

ASP.NET Web FormsでOptimizationを活用して、CSSとJavascriptを最適化するには？ | sia.tech
http://sianis.azurewebsites.net/?p=61
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/

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