WebSurfer's Home

トップ > Blog 1   |   ログイン
APMLフィルター

Ajax Control Toolkit スクリプト バンドル

by WebSurfer 2018年6月10日 22:31

Ajax Control Toolkit は v7.x 以前では、使用する複数のスクリプトファイルをバンドルするために ToolkitScriptManager を使っていました。(ScriptManager ではなくて)

v15.1 以降では、DevExpress の記事 How to use Bundling and CDN にありますように、ScriptManager を使ってのバンドリングが可能となっています。(ちなみに、v15.1 以降 ToolkitScriptManager は提供されていません)

以下の画像の赤枠で囲った部分を見てください。これが Ajax Control Toolkit 用の複数のスクリプトファイルがバンドルされた結果です。

バンドルされたスクリプト

ASP.NET 4.5 以降で、Visual Studio Commnunity 2015 の[Web フォーム]のテンプレートを利用して作った ASP.NET Web Forms プロジェクトに、Ajax Control Toolkit を追加し、必要なスクリプトファイルを ScriptManager で統合できるようにしてみましたので、その方法や結果から分かったことを備忘録として書いておきます。

先の記事「ASP.NET 4.5 ScriptManage」に書きましたように、Microsoft Ajax、jQuery 等のスクリプトファイルが ScriptManager で統合できるようになり、[Web フォーム]のテンプレートを利用して作ったプロジェクトでは、それらが設定済みとなっています。

なので、そのプロジェクトに Ajax Control Toolkit 用のバンドル機能を追加すると、重複などの問題で修正が必要かも知れないと思っていましたが、自分が試した限りはそういうことはなかったです。

まず、NuGet で AjaxControlToolkit のパッケージをインストールします。それだけでも基本的なコントロールは動くようになりますが、ScriptManager を利用したバンドリングを可能にするためには、StaticResources パッケージも追加でインストールする必要があります。

NuGet パッケージの追加

バージョンは Ajax Control Toolkit 本体と合わせた方がよさそうです。ここでは、先にインストールした既存の Ajax Control Toolkit 本体が v17.1.1 なので、StaticResources のバージョンもそれに合わせて v17.1.1 にしました。

なお、Visual Studio で[空]のテンプレートを選択してプロジェクトを作った場合は StaticResources パッケージだけでは不足です。追加で Antlr, WebGrease などの NuGet パッケージもインストールする必要がありますが、StaticResources をインストールする際それらも自動的に追加されるはずです。

StaticResources のインストールが完了すると、以下の画像の赤枠で示したフォルダが生成され、その中に CSS ファイル、イメージ、スクリプトファイルが格納されます。

追加された CSS とスクリプト

Content/AjaxControlToolkit フォルダ下の Images フォルダには .gif, .jpg, .png などの画像ファイルが、Styles フォルダには minify してない .css ファイルと minify した .min.css ファイルの両方が格納されます。

Scripts/AjaxControlToolkit フォルダ下の Debug フォルダには minify してない .debug.js ファイルが、Release フォルダには minify した .js ファイルが格納されます。

さらに、web.config にはデフォルトで以下の設定が追加されます。

<ajaxControlToolkit 
    useStaticResources="true" 
    renderStyleLinks="false" />

DevExpress の記事 How to use Bundling and CDN の説明によるとバンドル機能をコントロールするもののようです。

あとは、DevExpress の記事 "Manual changes required" のセクションを参考に、ScriptManager に ScriptReference を追加してやればスクリプトは一番上の画像に示したようにバンドルされます。

具体的には以下の画像の赤枠で示したコードを追加してやります。

ScriptReference の追加

赤枠部分以外の ScriptManager のコードは、Visual Studio の[Web フォーム]のテンプレートを利用して作った ASP.NET Web Forms アプリのマスタページ Site.master に自動生成されたものです。

.css ファイルについても、DevExpress の記事に従って Styles.Render をページの適当な場所に追加してやれば、.css ファイルを参照する link 要素がレンダリングされます。

ただし、.css ファイルは web.config の compilation 要素で debug="false" とするか、Global.asax の Application_Start メソッドで BundleTable.EnableOptimizations を true に設定しないとバンドルされませんので注意してください。(スクリプトファイルと異なります。理由不明)

BundleTable.EnableOptimizations を true に設定する意味については Microsoft の文書 Bundling and Minification を見てください。抜粋すると "The following code (true に設定すること) enables bundling and minification and overrides any setting in the Web.config file." ということだそうです。

web.config の compilation 要素の debug 属性の true / false でどう異なるかですが、自分が検証した限りでは、

  • .css ファイル: true で minify &バンドルあり、false で minify なしでバンドルもなし。
  • スクリプトファイル: true / false の設定にかかわらず minify &バンドルあり。

・・・となりました。

スクリプトファイルの結果がちょっと解せないです。そのままでは、debug="true" にしてもスクリプトのデバッグができません。

.debug.js 版をダウンロードさせてデバッグ可能なようにするには、上の ScriptManager の設定のところで ScriptReference をコメントアウトする他なさそうです。

あと、minify&バンドルされたスクリプトファイルのサイズですが、何と 1,248,841 バイトもありました。Ajax Control Toolkit は使わないのにスクリプトをダウンロードするように設定するというのは避けた方がよさそうです。

ちなみに、.CSS ファイルの方は minify&バンドル後で 56,240 バイトでした。

最後にもう一つ、HtmlEditorEntender には AjaxControlToolkit.HtmlEditor.Sanitizer, HtmlAgilityPack が必要です。

それなしでは先の記事「Ajax Control Toolkit デモ」で述べたような意味不明のエラーが出てハマるかもしれませんのでご注意ください。

Tags: , ,

AJAX

Ajax Control Toolkit デモ

by WebSurfer 2017年12月16日 20:25

Ajax Control Toolkit の最新版(この記事を書いた時点では v17.1.1.0)のデモを自分の開発環境で動くようにする手順を備忘録として書いておきます。

Ajax Control Toolkit デモ

DevExpress のサイト ASP.NET AJAX Control Toolkit Demos にデモは公開されていますが、自分の開発環境に同��ものをインストールし、ソースコードを見たりデバッグ実行したいということがあると思います。

そのためには、まず、GitHub のサイト DevExpress/AjaxControlToolkit から AjaxControlToolkit-master.zip をダウンロードします。

ダウンロードしたファイル AjaxControlToolkit-master.zip の中に AjaxControlToolkit.SampleSite というフォルダがあるので、それを丸ごと解凍して適当な場所にコピーします。

v7.x までは、それを Visual Studio で開いて[デバッグ(D)]⇒[デバッグなしで開始(H)]で実行すれば動いたのですが、v17.1.1.0 では AjaxControlToolkit が見つからないというエラーになります。

基本的には NuGet で必要なパッケージをインストールして web.config を一部修正すれば動くようになるのですが、かなり多くのパッケージをインストールしなければならず、エラーメッセージも意味不明なものがあり、動くようになるまで 2 日ほどハマってしまいました。(笑)

NuGet

自分が NuGet からインストールしたパッケージおよびそのバージョンは以下の通りです。

  1. AjaxControlToolkit v17.1.1
  2. Microsoft.AspNet.Web.Optimization v1.1.3
  3. Microsoft.AspNet.Web.Optimization.WebForms v1.1.3
  4. AjaxControlToolkit.StaticResources v17.1.1
  5. WebGrease v1.6.0
  6. AjaxControlToolkit.HtmlEditor.Sanitizer v17.1.1
  7. HtmlAgilityPack v1.6.7
  8. Antlr v3.5.0.2
  9. Newtonsoft.Json v10.0.3
  10. Microsoft.Web.Infrastructure v1.0.0

web.config の修正箇所は以下の通りです。

  1. <trust level="Medium" /> を削除(理由不明ですが Visual Studio 2015 で IIS Express 64-bt で動かした場合はこれがあるとダメ)
  2. siteMap / providers 要素に <remove name="MySqlSiteMapProvider" /> を追加(これは MySQL の Connector/NET をインストールした自分の環境固有の問題)

上に書いた NuGet でのパッケージのインストールが完了するとアプリケーションの bin フォルダは以下のようになるはずです。

bin フォルダ

以下に自分的に注意すべきと思う点を書いておきます。

WebGrease, HtmlAgilityPack など[ソリューションの NuGet パッケージの管理]ではインストール済みと表示されるものがあります。その場合、新しいバージョンがリリースされていたら更新することでインストールできます。

Microsoft.Web.Infrastructure は新しいバージョンがない(1.0.0 しかない)ので[ソリューションの NuGet パッケージの管理]ではインストールできません。その場合は[パッケージマネージャーコンソール(O)]で以下のようにしてインストールできます。

Update-Package -reinstall Microsoft.Web.Infrastructure

HtmlEditorEntender には AjaxControlToolkit.HtmlEditor.Sanitizer が必要です。これなしで起動しようとすると以下のように "値を Null にすることはできません。パラメータ名:Type" という意味不明なエラーになります。これの原因が分からなくてハマりました。(汗)

エラーメッセージ

加えて、HtmlAgilityPack も必要です。もういい加減にカンベンしてって感じだったのですが、一応ここまででとりあえず動くようにはなりました。(笑)

Tags: ,

AJAX

ModalPopup と Firefox の問題

by WebSurfer 2014年11月6日 16:46

Ajax Control Toolkit の ModalPopup を Firefox で表示した場合、一旦表示して消した ModalPopup が、別ページに遷移する前に一瞬表示されてしまう問題とその対処方法の紹介です。

遷移前に一瞬表示された ModalPopup

上の画像は、[Show ModalPopup]ボタンをクリック ⇒ ModalPopup が表示される ⇒ ModalPopup 上の[Cancel]ボタンクリック ⇒ ModalPopup が非表示になる ⇒[ブログのページへ]のハイパーリンクをクリックした時、遷移先のページからの応答を待っている時のものです。応答を待っている間、本来表示されてはいけない ModalPopup が表示されてしまっています。

この問題は、ブラウザが Firefox の場合で(現時点での最新バージョン 33.0.2 で確認)、かつ、ModalPopup の DropShadow プロパティが true に設定された場合に発生します。

そのメカニズムは以下の通りです。

DropShadow="true" となっていると、ModalPopup の PopupControlID プロパティに設定した Panel の外側が div 要素で囲われ、その style 属性に "display: none;" が追加 / 削除さることによって ModalPopup の非表示 / 表示が切り替えられます。

たとえ Panel の Style プロパティに "display: none;" を設定しておいても、一旦 ModalPopup を表示するとその設定は削除され、その後 ModalPopup を非表示にしても Panel の "display: none;" は復活しません。(その外側の div 要素に動的に追加される "display: none;" によって非表示になる)

Firefox の場合、ハイパーリンクがクリックされて、遷移先のページを要求に行くとき、Panel の外側の div 要素そのものがなくなるか、その div 要素に設定されている "display: none;" の効果がなくなり、要求を出してから応答が帰ってくるまで Panel が表示されてしまうという感じです。(推測です。実際にどうなっているのかは不明)

ハイパーリンクでなくリダイレクトで遷移しても同じで、GET 要求を出してから応答が戻ってくるまで Panel は表示されてしまいます。

なお、この問題は DropShadow="false" になっていると起こりません。なぜなら、その場合は Panel は div 要素で囲われることはなく、Panel に直接 "display: none;" が追加 / 削除され ModalPopup の非表示 / 表示が切り替えられるからです。

対症療法的ですが、ハイパーリンクの onclick イベントで、ModalPopup (Panel) の style 属性に "display:none;" を設定することでこの問題を回避できます。

そのサンプルコードを以下に書いておきます。また、実際に動かして試すことができるよう 実験室 にアップしました。興味のある方は試してみてください。

<%@ Page Language="C#" %>

<%@ Register Assembly="AjaxControlToolkit" 
    Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title>ModalPopup と Firefox</title>
  <style type="text/css">       
    .modalBackground {
      background-color: Gray;
      filter: alpha(opacity=70);
      opacity: 0.7;
    }

    .modalPopup {
      height: 100px;
      width: 250px;
      background-color: White;
      border: solid 2px black;
    }
  </style>
  <script type="text/javascript">
  //<![CDATA[
    function setDisplayNone() {
      var ele = document.getElementById('<%=Panel1.ClientID%>');
      ele.setAttribute('style', 'display: none;');
    }
  //]]>
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <asp:ToolkitScriptManager ID="ToolkitScriptManager1" 
    runat="server">
  </asp:ToolkitScriptManager>

  <h1>ModalPopup と Firefox</h1>

  <asp:Button ID="Button1" 
    runat="server" 
    Text="Show ModalPopup"/>    
  <br />
  <asp:HyperLink ID="HyperLink1" 
    runat="server" 
    NavigateUrl="~/Default.aspx">
    ブログのページへ
  </asp:HyperLink>
  <br />
  <asp:HyperLink ID="HyperLink2" 
    runat="server" 
    NavigateUrl="~/Default.aspx"
    onclick="setDisplayNone();">
    ブログのページへ(display:none 設定)
  </asp:HyperLink>

  <asp:ModalPopupExtender ID="ModalPopupExtender1" 
    runat="server"
    TargetControlID="Button1" 
    PopupControlID="Panel1"        
    BackgroundCssClass="modalBackground" 
    DropShadow="True"
    CancelControlID="CancelButton">
  </asp:ModalPopupExtender>

  <asp:Panel ID="Panel1" 
    runat="server"  
    Style="display: none" 
    CssClass="modalPopup">        
    <p style="text-align: center;">ModalPopup</p>
    <p style="text-align: center;">
      <asp:Button ID="CancelButton" 
        runat="server" Text="Cancel" />
    </p>
  </asp:Panel>
  </form>
</body>
</html>

Tags: , ,

AJAX

About this blog

2010年5月にこのブログを立ち上げました。その後 ブログ2 を追加し、ここは ASP.NET 関係のトピックス、ブログ2はそれ以外のトピックスに分けました。

Calendar

<<  2018年10月  >>
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910

View posts in large calendar