Day09-1

概要

• UpdatePanel + Timerコントロールで自動更新ページを生成しよう。

このレッスンの狙い

• Ajax技術をASP.NETアプリケーションに組み込む方法について学習する。

Ajax

• Ajax = Asynchronous JavaScript + Xml
• 簡単に言えば、デスクトップアプリケーションのようなリッチな表現をブラウザ上で可能にする技術
  • JavaScriptを利用してサーバ側と非同期通信を行い受け取った結果をDoM(Document Object Model)などの技術を使ってページに反映させる仕組み

従来のアプリケーションの挙動

@startuml
artifact Page
note left: ①ページ上で\r\nイベントが発生\r\n\r\n④ページ全体を再描画
node Server

Page -> Server: ②サーバに要求データを送信
Server -> Page: ③サーバでの処理結果を\r\nHTML形式で応答
@enduml

Ajaxアプリケーションの挙動

@startuml
artifact Page
note left: ①ページ上で\r\nイベントが発生\r\n\r\n④必要な箇所だけを再描画
node Server

Page -> Server: ②JavaScriptでサーバと\r\n非同期通信
Server -> Page: ③サーバでの処理結果を\r\nXMLなどの形式で応答
@enduml

解説

• 従来の処理は、ユーザはサーバ処理を要求するたびにその勝利結果を待たなければならない。(同期通信)
• Ajax技術を利用することで、エンドユーザはサーバ処理の間も手元の操作を継続できる。(非同期通信)
  • 実際に変更されたページの断片だけを部分的に更新するため従来型のアプリケーションにありがちなちらつきを抑えることができる。

問題点

• サーバのエンジニアは、JavaScriptは複雑な処理を書くことに抵抗がある。
• クロスブラウザ問題(ブラウザ間の統一性の話)がある。
  • JavaScriptによるコーディングを最小限に抑えるライブラリを使用する。

ASP.NET3.5で標準搭載されたAJAXライブラリ(AJAX Extensions)

• ASP.NET3.5ではAsP.NET AJAXが標準搭載されたことで、ASP.NET本体のインストールのみでAJAX対応アプリケーションが構築できるようになった。
• サーバサイド機能を提供するライブラリで、主にサーバサイドで動作するサーバコントロールを提供する。

AJAX Extensionsで提供されるサーバコントロール

• AJAX Extensionsで提供されるサーバコントロール

ScriptManager コントロール

• ASP.NET AJAX の動作に必要なJavaScriptの出力/生成などを管理するためのコントロール
• ASP.NET AJAXを利用するためには、[ページの先頭に一つだけ配置する]必要がある。
  • 本来は、aspxファイルの先頭に配置する必要があるが、マスタページを利用している場合はマスタページの先頭に配置する必要がる。

UpdatePanel コントロール

• ページの中の指定された領域だけを部分的に更新するためのコントロール。
• ユーザコントロールAdRotator.ascxとLabelコントロールに配置することで広告バナーとラベルだけを更新できるようにする。

(1) UpdatePanelコントロールの中でポストバックが発生した場合

• 例えば、UpdatePanelコントロールの中にButtonコントロールを配置し、ボタンクリックしたタイミングでUpdatePanel配下の領域が部分更新されることが確認できる。
  • UpdatePanelコントロール配下で発生したポストバックは、基本的にUpdatePanel以下のコンテンツだけをリフレッシュする。

(2) Triggerプロパティで指定されたイベントが発生した場合

• UpdatePanelの外で発生したポストバックでは、UpdatePanelを更新したい場合は、Triggerプロパティに、更新のトリガーとなるイベントを登録する必要がある。

非同期通信中であることを表すUpdateProgressコントロール

• UpdateProgressコントロールは，UpdatePanelコントロールによる更新が行われている間，ブラウザ上の通信中メッセージやアイコンを表示するためのコントロールである。
• 同期通信(ポストバック)処理では，通信時にブラウザのアイコンが変化したり，ステータス上に通信状況が表示されたりするが，非同期通信の場合，サーバで処理が行われているかどうかを知ることができない。-> UpdateProgressコントロールを利用する。

UpdateProgressコントロールで利用可能な主なプロパティ

DisplayAfterプロパティが0じゃない理由

• DisplayAfterプロパティを0に設定すると，通信がごく短時間で終了した場合にメッセージ等がちらつきとして表示される。
  • 一定以上の遅延があるメッセージのみを表示することで，結果としてちらつきを防止できる。

一定時間沖に決まった時間を処理するTimerコントロール

• 名前の通り，タイマーを管理するためのコントロール。
• 指定された時間間隔でTickイベントが発生する。
  • 時間間隔はIntervalプロパティで指定する。(デフォルト値は60,000ミリ秒)

UpdatePanelコントロールを利用する場合の注意点

• UpdatePanelコントロールを利用すれば，コーディングレスでAjax機能を実現することが可能。
  • だが，UpdatePanelコントロールを利用するためには下記のような注意点が必要である。

1. UpdatePanelコントロールの配下では利用できないコントロールがある。

• 下記のサーバコントロールは，UpdatePanelコントロールの配下には配置することができない。

  • TreeView / Menuコントロール
    • FileUpload / HtmlInputFileコントロール
    • GridViewコントロール
    • ログインコントロール
    • Substitutionコントロール

2. リクエストデータが部分化されるわけではない

• UpdatePanelコントロールが部分化するのは，飽くまで見かけ上(UI部分)の更新だけで，ポストバック時にはページ全体のリクエストデータを送信する。
  • 部分更新のたびに，大量のデータがやりとりされる可能性がある。
• 通信量の増加に注意する必要がある。

まとめ

• Ajaxは，[JavaScriptを利用してサーバ側と非同期通信を行い，受け取った結果をDOMなどの技術を使ってページに反映させる仕組み]
• ASP.NET AJAXは，ASP.NET 3.5で標準搭載されたAjax対応フレームワークの総称である。
• ASP.NET AJAXは，サーバサイドの技術であるASP.NET AJAX Extensionsとクライアントサイド機能であるMicrosoft AJAX Libraryに大別できる。
• AJAX Extensionsは，ScriptManager, UpdatePanel, Timer, UpdateProgressなどのサーバコントロールを提供する。
• UpdatePanelコントロールは，部分更新が可能な領域を定義するコントロールである。
• UpdateProgressコントロールは，非同期通信中に通信中メッセージやアイコンを表示するためのコントロールである。
• Timerコントロールは，指定された時間間隔でTickイベントを発生する。

TOPへ