マスター ページと ASP.NET AJAX (VB)

作成者: Scott Mitchell

ASP.NET AJAX およびマスター ページを使用するためのオプションについて説明します。 ScriptManagerProxy クラスの使用を確認します。では、ScriptManager がマスター ページとコンテンツ ページのどちらで使用されているかに応じて、さまざまな JS ファイルの読み込み方法について説明します。

はじめに

ここ数年、AJAX 対応 Web アプリケーションを構築する開発者が増えています。 AJAX 対応 Web サイトでは、関連する多数の Web テクノロジを使用して、より応答性の高いユーザー エクスペリエンスを提供します。 Microsoft の ASP.NET AJAX フレームワークにより、AJAX 対応 ASP.NET アプリケーションの作成は驚くほど簡単です。 ASP.NET AJAX は、ASP.NET 3.5 および Visual Studio 2008 に組み込まれています。また、ASP.NET 2.0 アプリケーション用の別のダウンロードとしても利用できます。

ASP.NET AJAX フレームワークを使用して AJAX 対応 Web ページを構築する場合は、フレームワークを使用するすべてのページに 1 つの ScriptManager コントロールを正確に追加する必要があります。 その名前が示すように、ScriptManager は AJAX 対応 Web ページで使用されるクライアント側スクリプトを管理します。 ScriptManager は、少なくとも、AJAX クライアント ライブラリを構成する JavaScript ファイルをダウンロードするようにブラウザーに指示する HTML ASP.NET 出力します。 また、カスタム JavaScript ファイル、スクリプト対応 Web サービス、およびカスタム アプリケーション サービス機能を登録するためにも使用できます。

サイトでマスター ページを使用する場合 (必要に応じて)、必ずしもすべてのコンテンツ ページに ScriptManager コントロールを追加する必要はありません。代わりに、ScriptManager コントロールをマスター ページに追加できます。 このチュートリアルでは、ScriptManager コントロールをマスター ページに追加する方法について説明します。 また、ScriptManagerProxy コントロールを使用して、カスタム スクリプトとスクリプト サービスを特定のコンテンツ ページに登録する方法についても説明します。

注意

このチュートリアルでは、ASP.NET AJAX フレームワークを使用した AJAX 対応 Web アプリケーションの設計や構築については説明しません。 AJAX の使用方法の詳細については、ASP.NET AJAX のビデオとチュートリアルに加えて、このチュートリアルの最後にある「さらに読む」セクションに記載されているリソースを参照してください。

ScriptManager コントロールによって出力されるマークアップの確認

ScriptManager コントロールは、ASP.NET AJAX クライアント ライブラリを構成する JavaScript ファイルをダウンロードするようにブラウザーに指示するマークアップを出力します。 また、このライブラリを初期化するページに、少しのインライン JavaScript も追加します。 次のマークアップは、ScriptManager コントロールを含むページのレンダリングされた出力に追加されるコンテンツを示しています。

<script src="/ASPNET_MasterPages_Tutorial_08_CS/WebResource.axd?d=T8EVk6SsA8mgPKu7_sBX5w2 t=633363040378379010" type="text/javascript"></script>

<script src="/ASPNET_MasterPages_Tutorial_08_CS/ScriptResource.axd?d=SCE1TCh8B24VkQIU5a8iJFizuPBIqs6Lka7GEkxo-6ROKNw5LVPCpF_pmLFR-R-p_Uf42Ahmr_SKd8lwgZUWb2uPJmfX0X_H6oLA50bniyQ1 t=633465688673751480" type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>

<script src="/ASPNET_MasterPages_Tutorial_08_CS/ScriptResource.axd?d=SCE1TCh8B24VkQIU5a8iJFizuPBIqs6Lka7GEkxo-6ROKNw5LVPCpF_pmLFR-R-phT96yZPngppiP_VXlN4Vz2RuVtvwDiQzF9xt42dUCiYjL0UylAJoyYzStwvObx0U0 t=633465688673751480" type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
Sys.Application.initialize();
//]]>
</script>

タグは <script src="url"></script> 、Url で JavaScript ファイルをダウンロードして実行するようにブラウザーに指示 します。 ScriptManager は、このような 3 つのタグを出力します。1 つは ファイル WebResource.axdを参照し、もう 2 つは ファイル ScriptResource.axdを参照します。 これらのファイルは、実際には Web サイトのファイルとして存在しません。 代わりに、これらのファイルのいずれかに対する要求が Web サーバーに到着すると、ASP.NET エンジンはクエリ文字列を調べて、適切な JavaScript コンテンツを返します。 これら 3 つの外部 JavaScript ファイルによって提供されるスクリプトは、ASP.NET AJAX フレームワークのクライアント ライブラリを構成します。 ScriptManager によって出力される他 <script> のタグには、このライブラリを初期化するインライン スクリプトが含まれます。

ScriptManager によって出力される外部スクリプト参照とインライン スクリプトは、ASP.NET AJAX フレームワークを使用するページには不可欠ですが、フレームワークを使用しないページでは必要ありません。 そのため、ASP.NET AJAX フレームワークを使用するページにのみ ScriptManager を追加するのが理想的であると考える場合があります。 これで十分ですが、フレームワークを使用するページが多数ある場合は、ScriptManager コントロールをすべてのページ (繰り返しタスク) に追加することになります。 または、ScriptManager をマスター ページに追加して、この必要なスクリプトをすべてのコンテンツ ページに挿入することもできます。 この方法では、ASP.NET AJAX フレームワークを使用する新しいページに ScriptManager を追加する必要はありません。これは、既にマスター ページに含まれているためです。 手順 1 では、ScriptManager をマスター ページに追加する手順を説明します。

注意

マスター ページのユーザー インターフェイスに AJAX 機能を含める予定がある場合は、この問題を選択する必要はありません。マスター ページに ScriptManager を含める必要があります。

ScriptManager をマスター ページに追加する欠点の 1 つは、必要かどうかに関係なく、上記のスクリプトが すべての ページで生成される点です。 これにより、(マスター ページを介して) ScriptManager が含まれていても、ASP.NET AJAX フレームワークの機能を使用していないページの帯域幅が無駄になります。 しかし、どれだけの帯域幅が無駄になっているのでしょうか?

  • ScriptManager によって出力された実際のコンテンツ (上記) は、1 KB を少し超えています。
  • ただし、 要素によって <script> 参照される 3 つの外部スクリプト ファイルは、圧縮されていないデータの約 450 KB で構成されます。gzip 圧縮を使用する Web サイトでは、この合計帯域幅を 100 KB 近く削減できます。 ただし、これらのスクリプト ファイルはブラウザーによって 1 年間キャッシュされます。つまり、1 回ダウンロードするだけで済み、サイト上の他のページで再利用できます。

最良のケースでは、スクリプト ファイルがキャッシュされるとき、合計コストは 1 KB です。これはごくわずかです。 ただし、最悪のケースでは、スクリプト ファイルがまだダウンロードされておらず、Web サーバーが何らかの形式の圧縮を使用していない場合、帯域幅ヒットは約 450 KB です。これにより、ブロードバンド接続を介して 1 秒または 2 秒からダイヤルアップ モデム経由のユーザーに最大 1 分まで追加できます。 良いニュースは、外部スクリプト ファイルがブラウザーによってキャッシュされるため、この最悪のシナリオが発生する頻度が低いということです。

注意

それでも ScriptManager コントロールをマスター ページに配置することに問題がある場合は、Web フォーム ( <form runat="server"> マスター ページのマークアップ) を検討してください。 ポストバック モデルを使用するすべての ASP.NET ページには、正確に 1 つの Web フォームを含める必要があります。 Web フォームを追加すると、多くの非表示フォーム フィールド、タグ自体、 <form> 必要に応じてスクリプトからのポストバックを開始するための JavaScript 関数などのコンテンツが追加されます。 ポストバックしないページでは、このマークアップは不要です。 この余分なマークアップは、マスター ページから Web フォームを削除し、それを必要とする各コンテンツ ページに手動で追加することで排除できます。 ただし、Web フォームをマスター ページに含める利点は、特定のコンテンツ ページに不必要に追加することの欠点を上回ります。

手順 1: ScriptManager コントロールをマスター ページに追加する

ASP.NET AJAX フレームワークを使用するすべての Web ページには、正確に 1 つの ScriptManager コントロールが含まれている必要があります。 この要件のため、通常は、すべてのコンテンツ ページに ScriptManager コントロールが自動的に含まれるように、マスター ページに 1 つの ScriptManager コントロールを配置するのが理にかなっています。 さらに、UpdatePanel コントロールや UpdateProgress コントロールなど、ASP.NET AJAX サーバー コントロールの前に ScriptManager を使用する必要があります。 そのため、Web フォーム内の ContentPlaceHolder コントロールの前に ScriptManager を配置することをお勧めします。

マスター ページを Site.master 開き、ScriptManager コントロールを Web フォーム内の要素の前 <div id="topContent"> のページに追加します (図 1 を参照)。 Visual Web Developer 2008 または Visual Studio 2008 を使用している場合、ScriptManager コントロールは [AJAX 拡張機能] タブの [ツールボックス] にあります。Visual Studio 2005 を使用している場合は、まず ASP.NET AJAX フレームワークをインストールし、ツールボックスにコントロールを追加する必要があります。 ASP.NET AJAX ダウンロード ページにアクセスして、ASP.NET 2.0 のフレームワークを取得します。

ScriptManager をページに追加した後、その を ID から ScriptManager1MyManager変更します。

ScriptManager をマスター ページに追加する

図 01: ScriptManager をマスター ページに追加する (フルサイズの画像を表示する場合はクリックします)

手順 2: コンテンツ ページから ASP.NET AJAX Framework を使用する

ScriptManager コントロールがマスター ページに追加されたので、ASP.NET AJAX フレームワーク機能を任意のコンテンツ ページに追加できるようになりました。 Northwind データベースからランダムに選択された製品を表示する新しい ASP.NET ページを作成しましょう。 ASP.NET AJAX フレームワークの Timer コントロールを使用して、この表示を 15 秒ごとに更新し、新しい製品を表示します。

まず、 という名前 ShowRandomProduct.aspxのルート ディレクトリに新しいページを作成します。 この新しいページをマスター ページにバインドすることを Site.master 忘れないでください。

Web サイトに新しい ASP.NET ページを追加する

図 02: Web サイトに新しい ASP.NET ページを追加する (フルサイズの画像を表示する をクリックします)

マスター ページ [SKM1] のタイトル、メタ タグ、およびその他の HTML ヘッダーの指定に関するチュートリアルでは、ページのタイトルが明示的に設定されていない場合に生成される という名前 BasePage のカスタム 基本ページ クラスを作成したことを思い出してください。 ページの ShowRandomProduct.aspx 分離コード クラスに移動し、 から BasePage 派生させます ( System.Web.UI.Pageからではなく)。

最後に、このレッスンの Web.sitemap エントリを含むようにファイルを更新します。 [マスターからコンテンツ ページへの対話] レッスンの の下 <siteMapNode> に次のマークアップを追加します。

<siteMapNode url="~/ShowRandomProduct.aspx" title="Master Pages and ASP.NET AJAX" />

この <siteMapNode> 要素の追加は、レッスンの一覧に反映されます (図 5 を参照)。

ランダムに選択された製品の表示

ShowRandomProduct.aspx戻ります。 Designerから、[ツールボックス] から [コンテンツ] コントロールに UpdatePanel コントロールをMainContentドラッグし、そのプロパティを IDProductPanel設定します。 UpdatePanel は、部分的なページ ポストバックを介して非同期的に更新できる画面上の領域を表します。

最初のタスクは、UpdatePanel 内でランダムに選択された製品に関する情報を表示することです。 まず、DetailsView コントロールを UpdatePanel にドラッグします。 DetailsView コントロールの ID プロパティを にProductInfo設定し、その プロパティと Width プロパティをHeightクリアします。 DetailsView のスマート タグを展開し、[データ ソースの選択] ドロップダウン リストから、DetailsView を という名前 RandomProductDataSourceの新しい SqlDataSource コントロールにバインドすることを選択します。

DetailsView を新しい SqlDataSource コントロールにバインドする

図 03: DetailsView を新しい SqlDataSource コントロールにバインドする (フルサイズの画像を表示する場合はクリックします)

を使用して NorthwindConnectionString Northwind データベースに接続するように SqlDataSource コントロールを構成します (コンテンツ ページ [SKM2] チュートリアルの「マスター ページを操作する」で作成しました)。 select ステートメントを構成する場合は、カスタム SQL ステートメントを指定し、次のクエリを入力します。

SELECT TOP 1 ProductName, UnitPrice
FROM Products
ORDER BY NEWID()

句のSELECTキーワード (keyword)はTOP 1、クエリによって返された最初のレコードのみを返します。 関数は NEWID() 新しいグローバル一意識別子値 (GUID) を生成し、 句で ORDER BY 使用して、テーブルのレコードをランダムな順序で返すことができます。

単一のランダムに選択されたレコードを返すように SqlDataSource を構成する

図 04: 単一のランダムに選択されたレコードを返すように SqlDataSource を構成する (フルサイズの画像を表示するにはクリックします)

ウィザードが完了すると、Visual Studio によって、上記のクエリによって返される 2 つの列に対して BoundField が作成されます。 この時点で、ページの宣言型マークアップは次のようになります。

<asp:UpdatePanel ID="ProductPanel" runat="server">
 <ContentTemplate>
 <asp:DetailsView ID="ProductInfo" runat="server" AutoGenerateRows="False" 
 DataSourceID="RandomProductDataSource">
 <Fields>
 <asp:BoundField DataField="ProductName" HeaderText="ProductName" 
 SortExpression="ProductName" />
 <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" 
 SortExpression="UnitPrice" />
 </Fields>
 </asp:DetailsView>
 <asp:SqlDataSource ID="RandomProductDataSource" runat="server" 
 ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT TOP 1 ProductName, UnitPrice FROM Products ORDER BY NEWID()"></asp:SqlDataSource>
 </ContentTemplate>
</asp:UpdatePanel>

図 5 は、ブラウザーで ShowRandomProduct.aspx 表示したときのページを示しています。 ブラウザーの [更新] ボタンをクリックしてページを再読み込みします。ランダムに ProductName 選択された新しいレコードの と UnitPrice の値が表示されます。

ランダムな製品の名前と価格が表示される

図 05: ランダムな製品の名前と価格が表示されている (フルサイズの画像を表示する をクリックします)

15 秒ごとに新しい製品を自動的に表示する

ASP.NET AJAX フレームワークには、指定した時刻にポストバックを実行する Timer コントロールが含まれています。ポストバック時にタイマーの Tick イベントが発生します。 Timer コントロールが UpdatePanel 内に配置されると、部分的なページ ポストバックがトリガーされ、その間にデータを DetailsView に再バインドして、ランダムに選択された新しい製品を表示できます。

これを実現するには、ツールボックスから Timer をドラッグし、UpdatePanel にドロップします。 Timer の ID を から Timer1ProductTimer 変更し、そのプロパティを Interval 60000 から 15000 に変更します。 プロパティは Interval ポストバック間のミリ秒数を示します。15000 に設定すると、Timer は 15 秒ごとにページの部分的なポストバックをトリガーします。 この時点で、タイマーの宣言型マークアップは次のようになります。

<asp:UpdatePanel ID="ProductPanel" runat="server" onload="ProductPanel_Load">
 <ContentTemplate>
 ...

 <asp:Timer ID="ProductTimer" runat="server" Interval="15000">
 </asp:Timer>
 </ContentTemplate>
</asp:UpdatePanel>

タイマー Tick のイベントのイベント ハンドラーを作成します。 このイベント ハンドラーでは、DetailsView の メソッドを呼び出して、データを DetailsView DataBind に再バインドする必要があります。 これにより、DetailsView にデータ ソース管理からデータを再取得するように指示されます。これにより、ランダムに選択された新しいレコードが選択されて表示されます (ブラウザーの [更新] ボタンをクリックしてページを再読み込みするときと同様)。

Protected Sub ProductTimer_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles ProductTimer.Tick
 ProductInfo.DataBind()
End Sub

これですべて完了です。 ブラウザーを使用してページを見直します。 最初は、ランダムな製品の情報が表示されます。 画面を辛抱強くwatchすると、15 秒後に新製品に関する情報が既存のディスプレイに魔法のように置き換えられます。

ここで何が起こっているのかを確認するために、ディスプレイが最後に更新された時刻を表示する Label コントロールを UpdatePanel に追加しましょう。 UpdatePanel 内に Label Web コントロールを追加し、その コントロールを IDLastUpdateTime設定し、そのプロパティを Text クリアします。 次に、UpdatePanel のイベントのイベント ハンドラーを作成し、現在の Load 時刻を Label に表示します。 (UpdatePanel のイベントは、ページの Load 完全または一部のポストバックごとに発生します)。

Protected Sub ProductPanel_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles ProductPanel.Load
 LastUpdateTime.Text = "Last updated at " & DateTime.Now.ToLongTimeString()
End Sub

この変更が完了すると、ページには、現在表示されている製品が読み込まれた時刻が含まれます。 図 6 は、最初にアクセスしたときのページを示しています。 図 7 は、タイマー コントロールが "ティック" され、UpdatePanel が更新されて新しい製品に関する情報が表示されてから 15 秒後のページを示しています。

ランダムに選択された製品がページ読み込み時に表示される

図 06: ランダムに選択された製品がページ読み込み時に表示される (フルサイズの画像を表示する をクリックします)

ランダムに選択された新しい製品が 15 秒ごとに表示される

図 07: ランダムに選択された新しい製品が 15 秒ごとに表示される (フルサイズの画像を表示する をクリックします)

手順 3: ScriptManagerProxy コントロールを使用する

ScriptManager は、ASP.NET AJAX フレームワーク クライアント ライブラリに必要なスクリプトを含めると共に、カスタム JavaScript ファイル、スクリプトが有効な Web サービスへの参照、カスタム認証、承認、プロファイル サービスを登録することもできます。 通常、このようなカスタマイズは特定のページに固有です。 ただし、カスタム スクリプト ファイル、Web サービス参照、または認証、承認、またはプロファイル サービスがマスター ページの ScriptManager で参照されている場合は、Web サイト内のすべてのページに含まれます。

ScriptManager 関連のカスタマイズをページ単位で追加するには、ScriptManagerProxy コントロールを使用します。 ScriptManagerProxy をコンテンツ ページに追加し、ScriptManagerProxy からカスタム JavaScript ファイル、Web サービス参照、または認証、承認、またはプロファイル サービスを登録できます。これは、特定のコンテンツ ページにこれらのサービスを登録する効果があります。

注意

ASP.NET ページには、1 つ以上の ScriptManager コントロールしか存在できません。 したがって、ScriptManager コントロールがマスター ページで既に定義されている場合、コンテンツ ページに ScriptManager コントロールを追加することはできません。 ScriptManagerProxy の唯一の目的は、開発者がマスター ページで ScriptManager を定義する方法を提供することですが、それでもページ単位で ScriptManager カスタマイズを追加できます。

ScriptManagerProxy コントロールの動作を確認するには、 で ShowRandomProduct.aspx UpdatePanel を拡張し、クライアント側スクリプトを使用して Timer コントロールを一時停止または再開するボタンを含めます。 Timer コントロールには、この目的の機能を実現するために使用できる 3 つのクライアント側メソッドがあります。

  • _startTimer() - タイマー コントロールを起動します
  • _raiseTick() - タイマー コントロールを "ティック" にすることで、サーバー上で Tick イベントをポストバックして発生させます
  • _stopTimer() - タイマー コントロールを停止する

という名前の変数と という名前 timerEnabled の関数 ToggleTimerを含む JavaScript ファイルを作成してみましょう。 変数は timerEnabled 、Timer コントロールが現在有効か無効かを示します。既定値は true です。 関数は ToggleTimer 、2 つの入力パラメーター ([一時停止/再開] ボタンへの参照と Timer コントロールのクライアント側 id の値) を受け取ります。 この関数は、 の timerEnabled値を切り替え、Timer コントロールへの参照を取得し、Timer を開始または停止し (の timerEnabled値に応じて)、ボタンの表示テキストを "Pause" または "Resume" に更新します。 この関数は、[一時停止/再開] ボタンがクリックされるたびに呼び出されます。

まず、 という名前 Scriptsの Web サイトに新しいフォルダーを作成します。 次に、JScript File 型の Scripts TimerScript.js フォルダーに新しいファイルを追加します。

Scripts フォルダーに新しい JavaScript ファイルを追加する

図 08: フォルダーに新しい JavaScript ファイルを Scripts 追加する (フルサイズの画像を表示する をクリックします)

Web サイトに新しい JavaScript ファイルが追加されました

図 09: Web サイトに新しい JavaScript ファイルが追加されました (フルサイズの画像を表示する をクリックします)

次に、ファイルに次のスクリップを TimerScript.js 追加します。

var timerEnabled = true;
function ToggleTimer(btn, timerID)
{
    // Toggle the timer enabled state
    timerEnabled = !timerEnabled;

    // Get a reference to the Timer
    var timer = $find(timerID);

    if (timerEnabled)
    {
        // Start timer
        timer._startTimer();

        // Immediately raise a tick
        timer._raiseTick();

        btn.value = 'Pause';
    }
    else
    {
        // Stop timer
        timer._stopTimer();

        btn.value = 'Resume';
    }
}

ここで、このカスタム JavaScript ファイルを に登録する ShowRandomProduct.aspx必要があります。 に ShowRandomProduct.aspx 戻り、ScriptManagerProxy コントロールをページに追加します。その コントロール ID を に MyManagerProxy設定します。 カスタム JavaScript ファイルを登録するには、Designerで ScriptManagerProxy コントロールを選択し、プロパティ ウィンドウに移動します。 プロパティの 1 つは Scripts というタイトルです。 このプロパティを選択すると、図 10 に示す ScriptReference コレクション エディターが表示されます。 [追加] ボタンをクリックして新しいスクリプト参照を含め、Path プロパティにスクリプト ファイルへのパスを入力します ~/Scripts/TimerScript.js

ScriptManagerProxy コントロールへのスクリプト参照の追加

図 10: ScriptManagerProxy コントロールへのスクリプト参照の追加 (フルサイズの画像を表示する をクリックします)

スクリプト参照を追加すると、次のマークアップ スニペットが示すように、ScriptManagerProxy コントロールの宣言型マークアップが更新され、1 つのScriptReferenceエントリを持つコレクションが含まれます<Scripts>

<asp:ScriptManagerProxy ID="MyManagerProxy" runat="server">
 <Scripts>
 <asp:ScriptReference Path="~/Scripts/TimerScript.js" />
 </Scripts>
</asp:ScriptManagerProxy>

エントリは ScriptReference 、レンダリングされたマークアップに JavaScript ファイルへの参照を含むように ScriptManagerProxy に指示します。 つまり、ScriptManagerProxy ShowRandomProduct.aspx にカスタム スクリプトを登録することで、ページのレンダリングされた出力に、 という別 <script src="url"></script> のタグ <script src="Scripts/TimerScript.js" type="text/javascript"></script>が含まれるようになりました。

ページの ToggleTimer クライアント スクリプトから で TimerScript.js 定義されている関数を ShowRandomProduct.aspx 呼び出すようになりました。 UpdatePanel 内に次の HTML を追加します。

<input type="button" id="PauseResumeButton" 
    value="Pause" 
    onclick="ToggleTimer(this, '<%=ProductTimer.ClientID %>');" />

これにより、"一時停止" というテキストのボタンが表示されます。 クリックされるたびに JavaScript 関数 ToggleTimer が呼び出され、ボタンへの参照と id Timer コントロールの値 (ProductTimer) が渡されます。 Timer コントロールの値を取得するための id 構文に注意してください。 <%=ProductTimer.ClientID%> は、Timer コントロールの プロパティの ProductTimer 値を ClientID 出力します。 コンテンツ ページのコントロール ID の名前付け [SKM3] チュートリアルでは、サーバー側の値と結果のクライアント側IDの値の違いと、クライアント側 ididの を返す方法ClientIDについて説明しました。

図 11 は、ブラウザーから初めてアクセスしたときのこのページを示しています。 タイマーは現在実行中で、表示されている製品情報を 15 秒ごとに更新します。 図 12 は、[一時停止] ボタンがクリックされた後の画面を示しています。 [一時停止] ボタンをクリックすると、タイマーが停止し、ボタンのテキストが "Resume" に更新されます。 ユーザーが [再開] をクリックすると、製品情報が更新され (15 秒ごとに更新が続行されます)。

[一時停止] ボタンをクリックしてタイマー コントロールを停止する

図 11: [一時停止] ボタンをクリックしてタイマー コントロールを停止する (クリックするとフルサイズの画像が表示されます)

[再開] ボタンをクリックしてタイマーを再起動します

図 12: [再開] ボタンをクリックしてタイマーを再起動します (クリックするとフルサイズの画像が表示されます)

まとめ

ASP.NET AJAX フレームワークを使用して AJAX 対応 Web アプリケーションをビルドする場合、すべての AJAX 対応 Web ページに ScriptManager コントロールが含まれることが不可欠です。 このプロセスを容易にするために、ScriptManager を各コンテンツ ページに追加することを忘れずに、マスター ページに ScriptManager を追加できます。 手順 1 では ScriptManager をマスター ページに追加する方法を示し、手順 2 ではコンテンツ ページでの AJAX 機能の実装について説明しました。

カスタム スクリプト、スクリプト対応 Web サービスへの参照、またはカスタマイズされた認証、承認、またはプロファイル サービスを特定のコンテンツ ページに追加する必要がある場合は、ScriptManagerProxy コントロールをコンテンツ ページに追加し、そこでカスタマイズを構成します。 手順 3 では、ScriptManagerProxy を使用して、カスタム JavaScript ファイルを特定のコンテンツ ページに登録する方法を確認しました。

幸せなプログラミング!

もっと読む

このチュートリアルで説明するトピックの詳細については、次のリソースを参照してください。

著者について

複数の ASP/ASP.NET 書籍の著者であり、4GuysFromRolla.com の創設者である Scott Mitchell は、1998 年から Microsoft Web テクノロジと協力しています。 Scott は独立したコンサルタント、トレーナー、ライターとして働いています。 彼の最新の本は サムズ・ティーチ・イン・ヒア ASP.NET 24時間で3.5です。 Scott は、 または mitchell@4GuysFromRolla.com のブログを http://ScottOnWriting.NET介してアクセスできます。

特別な感謝

このチュートリアル シリーズは、多くの役立つ校閲者によってレビューされました。 今後の MSDN 記事の確認に関心がありますか? もしそうなら、私に行を落としてください mitchell@4GuysFromRolla.com