サンプルの AJAX アプリケーション

[アーティクル]
10/22/2014

更新 : 2007 年 11 月

このチュートリアルでは、ASP.NET の AJAX 機能を使用する基本的なサンプルアプリケーションを作成します。ASP.NET の AJAX 機能の詳細、これらの機能がどのような技術的問題を解決する目的で設計されているか、および重要な AJAX コンポーネントについては、次の概要ドキュメントを参照してください。

ASP.NET AJAX Overview
AJAX およびクライアント機能の追加

このチュートリアルでは、AdventureWorks サンプルデータベースの従業員データのページを表示するアプリケーションを構築します。このアプリケーションでは、UpdatePanel コントロールを使用して、ポストバックで発生するページのフラッシュなしに、ページ内で変更された部分のみを更新します。これを、部分ページ更新と呼びます。また、サンプルアプリケーションでは、UpdateProgress コントロールを使用して、部分ページ更新の処理中にステータスメッセージを表示します。

前提条件

独自の開発環境でこの手順を実装するための要件は次のとおりです。

Microsoft Visual Studio 2005 または Microsoft Visual Web Developer Express Edition。
AJAX 対応の ASP.NET Web サイト。
AdventureWorks サンプルデータベース。AdventureWorks データベースは、Microsoft ダウンロードセンターからダウンロードしてインストールできます。"SQL Server 2005 Samples and Sample Databases (December 2006)" を検索してください。

ASP.NET Web サイトの作成

ASP.NET で作成する Web サイトでは、既定で AJAX 機能がサポートされます。

ASP.NET AJAX 対応の Web サイトを作成するには

Visual Studio を起動します。
[ファイル] メニューの [新しい Web サイト] をクリックします。

[新しい Web サイト] ダイアログボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。
場所と言語を入力し、[OK] をクリックします。

ASP.NET Web ページへの UpdatePanel コントロールの追加

ASP.NET Web サイトを作成した後で、UpdatePanel コントロールを含む ASP.NET Web ページを作成します。ページに UpdatePanel コントロールを追加する前に、ScriptManager コントロールを追加する必要があります。UpdatePanel コントロールでは、部分ページ更新を管理するために、ScriptManager コントロールを必要とします。

新しい ASP.NET Web ページを作成するには

ソリューションエクスプローラで、サイトの名前を右クリックし、[新しい項目の追加] をクリックします。

[新しい項目の追加] ダイアログボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [Web フォーム] をクリックします。
新しいページに Employees.aspx という名前を付け、[別のファイルにコードを書き込む] チェックボックスをオフにします。
使用する言語を選択します。
[追加] をクリックします。
デザインビューに切り替えます。
ツールボックスの [AJAX Extensions] タブで、ScriptManager コントロールをダブルクリックしてページに追加します。
ツールボックスの UpdatePanel コントロールをドラッグし、ScriptManager コントロールの下へドロップします。

UpdatePanel コントロールへのコンテンツの追加

UpdatePanel コントロールは、部分ページ更新を実行し、ページの残りの部分とは別に単独で更新されたコンテンツを特定します。ここでは、AdventureWorks データベースのデータを表示するデータバインドコントロールを追加します。

UpdatePanel コントロールにコンテンツを追加するには

ツールボックスの [データ] タブから、GridView コントロールを UpdatePanel コントロールの編集可能な領域にドラッグします。
[GridView タスク] メニューの [オートフォーマット] をクリックします。
[オートフォーマット] パネルで、[スキームの選択] の [カラフル] をクリックし、[OK] をクリックします。
[GridView タスク] メニューの [データソースの選択] ボックスの一覧の [<新しいデータソース>] をクリックします。

データソース構成ウィザードが表示されます。
[アプリケーションがデータを取得する場所] の [データベース] をクリックし、[OK] をクリックします。
データソース構成ウィザードの [データ接続の選択] ページで、AdventureWorks データベースに接続するように構成し、[次へ] をクリックします。
[Select ステートメントの構成] ページで、[カスタム SQL ステートメントまたはストアドプロシージャを指定する] を選択し、[次へ] をクリックします。
[カスタムステートメントまたはストアドプロシージャを定義します。] ページの [SELECT] タブで、次の SQL ステートメントを入力します。
```
SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName
```
[次へ] をクリックします。
[完了] をクリックします。
[GridView タスク] メニューの [ページングを有効にする] チェックボックスをオンにします。
変更内容を保存し、Ctrl キーを押しながら F5 キーを押して、ブラウザでページを表示します。

別のデータページを選択しても、ページのフラッシュは発生しません。これは、ポストバックとページ全体の更新が毎回実行されるわけではないからです。

ページへの UpdateProgress コントロールの追加

UpdateProgress コントロールは、UpdatePanel コントロールの新しいコンテンツが要求されているときにステータスメッセージを表示します。

ページに UpdateProgress コントロールを追加するには

ツールボックスの [AJAX Extensions] タブから UpdateProgress コントロールをページにドラッグし、UpdatePanel コントロールの下へドロップします。
UpdateProgress コントロールを選択し、[プロパティ] ウィンドウで AssociatedUpdatePanelID プロパティを UpdatePanel1 に設定します。

これにより、UpdateProgress コントロールが、前の手順で追加した UpdatePanel コントロールに関連付けられます。
UpdateProgress コントロールの編集可能な領域に「Getting Employees ...」と入力します。
変更内容を保存し、Ctrl キーを押しながら F5 キーを押して、ブラウザでページを表示します。

ページが SQL クエリを実行してデータを取得するまでに時間がかかった場合、UpdateProgress コントロールに入力されたメッセージが、UpdateProgress コントロールによって表示されます。

サンプルアプリケーションへの遅延の追加

データの各ページの更新がアプリケーションですばやく処理された場合、UpdateProgress コントロールの内容がページに表示されない可能性があります。UpdateProgress コントロールは、このコントロールが表示されるまでの遅延を設定する DisplayAfter プロパティをサポートしています。これにより、更新が高速で実行された場合でも、ブラウザにコントロールが一瞬だけ表示されてすぐに消えることがなくなります。既定では、遅延が 500 ミリ秒 (0.5 秒) に設定されているため、0.5 秒未満で更新が行われた場合、UpdateProgress コントロールは表示されません。

開発環境では、UpdateProgress コントロールが意図されたとおりに機能していることを確認するために、アプリケーションに対して人為的に遅延を追加できます。これはオプションの手順であり、アプリケーションをテストする目的でのみ行います。

サンプルアプリケーションに遅延を追加するには

UpdatePanel コントロール内で、GridView コントロールを選択します。
[プロパティ] ウィンドウの [イベント] をクリックします。
PageIndexChanged イベントをダブルクリックして、イベントハンドラを作成します。

次のコードを PageIndexChanged イベントハンドラに追加します。これにより、3 秒の遅延が人為的に作成されます。

'Include three second delay for example only.
System.Threading.Thread.Sleep(3000)

//Include three second delay for example only.
System.Threading.Thread.Sleep(3000);

メモ :
このチュートリアルでは、PageIndexChanged イベントのハンドラで意図的に遅延を発生させます。実際には、遅延を発生させることはありません。サーバートラフィックや、処理に時間がかかるサーバーコード (長時間実行するデータベースクエリなど) によって遅延が発生します。

変更内容を保存し、Ctrl キーを押しながら F5 キーを押して、ブラウザでページを表示します。

新しいデータページに移動するたびに 3 秒の遅延が発生するようになったので、UpdateProgress コントロールが表示されるのを確認できます。

<%@ Page Language="VB" %>

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

<script runat="server">

    Protected Sub GridView1_PageIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)
        'Include three second delay for example only.
        System.Threading.Thread.Sleep(3000)
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

    </div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:GridView ID="GridView1" runat="server" AllowPaging="True" CellPadding="4" DataSourceID="SqlDataSource1"
                    ForeColor="#333333" GridLines="None" OnPageIndexChanged="GridView1_PageIndexChanged">
                    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
                    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <AlternatingRowStyle BackColor="White" />
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                    SelectCommand="SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName">
                </asp:SqlDataSource>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
            <ProgressTemplate>
                Getting employees...
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>

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

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

<script runat="server">

    protected void GridView1_PageIndexChanged(object sender, EventArgs e)
    {
        //Include three second delay for example only.
        System.Threading.Thread.Sleep(3000);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

    </div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:GridView ID="GridView1" runat="server" AllowPaging="True" CellPadding="4" DataSourceID="SqlDataSource1"
                    ForeColor="#333333" GridLines="None" OnPageIndexChanged="GridView1_PageIndexChanged">
                    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
                    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <AlternatingRowStyle BackColor="White" />
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                    SelectCommand="SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName">
                </asp:SqlDataSource>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
            <ProgressTemplate>
                Getting employees...
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>

参照

処理手順

UpdatePanel コントロールの概要

UpdateProgress コントロールの概要

概念

ASP.NET AJAX の概要

AJAX およびクライアント機能の追加

UpdatePanel コントロールの概要

UpdateProgress コントロールの概要

次の方法で共有

サンプルの AJAX アプリケーション

前提条件

ASP.NET Web サイトの作成

ASP.NET AJAX 対応の Web サイトを作成するには

ASP.NET Web ページへの UpdatePanel コントロールの追加

新しい ASP.NET Web ページを作成するには

UpdatePanel コントロールへのコンテンツの追加

UpdatePanel コントロールにコンテンツを追加するには

ページへの UpdateProgress コントロールの追加

ページに UpdateProgress コントロールを追加するには

サンプルアプリケーションへの遅延の追加

サンプルアプリケーションに遅延を追加するには

参照

処理手順

概念

その他のリソース

次の方法で共有

サンプルの AJAX アプリケーション

前提条件

ASP.NET Web サイトの作成

ASP.NET AJAX 対応の Web サイトを作成するには

ASP.NET Web ページへの UpdatePanel コントロールの追加

新しい ASP.NET Web ページを作成するには

UpdatePanel コントロールへのコンテンツの追加

UpdatePanel コントロールにコンテンツを追加するには

ページへの UpdateProgress コントロールの追加

ページに UpdateProgress コントロールを追加するには

サンプル アプリケーションへの遅延の追加

サンプル アプリケーションに遅延を追加するには

参照

処理手順

概念

その他のリソース

サンプルアプリケーションへの遅延の追加

サンプルアプリケーションに遅延を追加するには