【タイトル】
ASP.NET 2.0 - 手軽に AJAX 化（パーシャルレンダリング機能）
【概要】
ASP.NET AJAX が提供する主要機能の1つであるパーシャルレンダリング機能（ページ内の部分的な再描画）を利用して
既存の ASP.NET アプリケーションを手軽に AJAX 化することで、画面のちらつき抑止及びネットワーク負荷の軽減を図る。
【環境】
OS: Windows XP SP2, Windows Server 2003 SP1
Software: Microsoft .NET Framework 2.0
Visual Studio 2005 Professional Edition
IIS 6.0
IE 6.0, 7.0
【内容(詳細)】
ASP.NET AJAX のパーシャルレンダリングは、基本的に「UpdatePanel コントロール」をページに配置するだけなので、手軽に
実装できる。
この UpdatePanel コントロールは、ASP.NET 標準の Panel コントロール等と同様にコントロールコンテナとして機能し、
再描画領域の区切りとなるので、画面内で部分的な更新を行いたい領域を UpdatePanel コントロールで定義するだけである。
以下、実際にページにパーシャルレンダリングを使用するサンプルである。
Step 1. ASP.NET AJAX のインストール
Microsoft ASP.NET AJAX Site（http://www.asp.net/ajax/）から「ASP.NET AJAX Extensions 1.0 for ASP.NET 2.0」の
インストーラをダウンロードする。
ダウンロードした「ASPAJAXExtSetup.msi」を実行することで、ASP.NET AJAX のサーバーサイド技術のコア機能である
「ASP.NET 2.0 AJAX Extensions」がインストールされる。
Step 2. web.config に設定を追加
既存の ASP.NET アプリケーションの web.config に、ASP.NET AJAX が機能するための設定を追加する。
※インストールした「ASP.NET 2.0 AJAX Extensions」フォルダに格納されている web.config の設定を追加
また、既存アプリケーションの bin フォルダに「ASP.NET 2.0 AJAX Extensions」に格納されている dll を追加する。
Step 3. ソースコードの変更
- 変更前（既存の ASP.NET アプリケーション）
検索条件を指定してボタンをクリックすることで結果を一覧表示する画面がある。この画面には、
検索条件アイテムとして「大分類ドロップダウンリスト」と「小分類ドロップダウンリスト」が配置されている。
「大分類ドロップダウンリスト」には、大分類項目マスタの全情報がリストされている。
「大分類ドロップダウンリスト」の選択値を変更するとポストバックして、選択された大分類項目に紐付く
小分類項目をマスタから抽出し「小分類ドロップダウンリスト」にリストしてページ全体を再描画する。
------------------------------------------------------------------------------------------------------------
<!-- 大分類ドロップダウンリスト -->
<asp:dropdownlist runat="server" id="ddlDaibunrui"
DataSourceID="objDataSrcDaibunrui"
DataTextField="DAIBUNRUI_NAME"
DataValueField="DAIBUNRUI_ID"
AppendDataBoundItems="true"
EnableViewState="true"
AutoPostBack="true"
>
</asp:dropdownlist>
<!-- 小分類ドロップダウンリスト -->
<asp:dropdownlist runat="server" id="ddlSyoubunrui"
DataSourceID="objDataSrcSyoubunrui"
DataTextField="SYOUBUNRUI_NAME"
DataValueField="SYOUBUNRUI_ID"
AppendDataBoundItems="true"
EnableViewState="true"
>
</asp:dropdownlist>
------------------------------------------------------------------------------------------------------------
※ objDataSrcDaibunrui は、大分類項目マスタの全情報をデータベースから取得
※ objDataSrcSyoubunrui は、選択されている大分類項目に紐付く小分類項目マスタ情報をデータベースから取得
- 変更後（パーシャルレンダリングを使用するように変更）
「小分類ドロップダウンリスト」の動的作成時にパーシャルレンダリング機能を使用する。
「大分類ドロップダウンリスト」変更時には、「小分類ドロップダウンリスト」のみを再描画する。
------------------------------------------------------------------------------------------------------------
<asp:ScriptManager ID="ScriptManager1" runat="server" /> ・・・ ①
<!-- 大分類ドロップダウンリスト -->
<asp:dropdownlist runat="server" id="ddlDaibunrui"
DataSourceID="objDataSrcDaibunrui"
DataTextField="DAIBUNRUI_NAME"
DataValueField="DAIBUNRUI_ID"
AppendDataBoundItems="true"
EnableViewState="true"
AutoPostBack="true"
>
</asp:dropdownlist>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> ・・・ ②
<ContentTemplate> ・・・ ②-1
<!-- 小分類ドロップダウンリスト -->
<asp:dropdownlist runat="server" id="ddlSyoubunrui"
DataSourceID="objDataSrcSyoubunrui"
DataTextField="SYOUBUNRUI_NAME"
DataValueField="SYOUBUNRUI_ID"
AppendDataBoundItems="true"
EnableViewState="true"
>
</asp:dropdownlist>
</ContentTemplate>
<Triggers> ・・・ ②-2
<asp:AsyncPostBackTrigger ControlID="ddlDaibunrui" EventName="TextChanged" /> ・・・ ②-3
</Triggers>
</asp:UpdatePanel>
------------------------------------------------------------------------------------------------------------
① ScriptManeger: ASP.NET AJAX フレームワークの中で最も中心的なオブジェクト。
ページに当コントロールを配置することで、Ajax 機能に必要な JavaScript ライブラリがページに
対して出力される。1つのページに1つだけ、Form 内に配置できる。
② UpdatePanel: パーシャルレンダリングの再描画領域を定義。
※UpdateMode プロパティに「Conditional」を設定すると「該当する UpdatePanel 内でポストバック
が発生した場合」のみパネル領域の更新が行われる。但し、どの UpdatePanel にも属さない位置に
配置されたコントロールによりポストバックが発生した場合は更新対象となる。
②-1 ContentTemplate: ここに HTML やサーバーコントロールを配置する。
②-2 Triggers: トリガを定義することで、UpdatePanel の外部の特定のコントロールによるポストバック発生時に
当パネル領域の再描画処理を実行することができる。
②-3 AsyncPostBackTrigger: ControlId プロパティにトリガとするコントロールIDを、EventName プロパティには
対象のトリガとするイベント名を設定する。
以上。
2008/06/27 h.o