ASP.NET Futuresで次世代ASP.NETを体験しよう

ASP.NET Futuresのコントロール利用方法を学習する

Historyコントロール

　HistoryコントロールはASP.NET AJAXの利用者に重宝されるコントロールです。AJAXが出てきてから度々話題に上がっていた、「AJAXを利用したページ上でブラウザの戻るボタンを押すとAJAXによる操作履歴を飛ばして、以前のページに戻されてしまう」といった問題を解決します。もう少し詳しく解説すると、AJAX操作時におけるイベントを取得し、そのイベント操作の時点の状態をブックマークとして残すことができる（残しているように感じさせる）コントロールです。実際に実行すると図10～11のような画面が作成できます。

図10 実行直後の画面

図11 操作履歴ポイントが作成された画面

　以下、Historyコントロールを利用した場合の［戻る］ボタンのサポートに関する流れです。

1. ボタンクリックなどのイベントが発生する
2. 該当イベント内に操作履歴ポイントと保持しておきたいデータを併せてHistoryコントロールに格納するコードを記述する
3. ブラウザの［戻る］ボタンがクリックされた時に、Historyコントロールから操作履歴ポイントと保持したデータを取り出して表示する

　Historyコントロールは複数のコントロールのデータを格納できるので、以下のサンプルでは3つのコントロールからデータを受け取り、格納・取り出しを行います。まずはフォームデザイナ上のコードです。最後のImageコントロールを付加していることについては後述します。

History.aspx（一部）

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:History ID="History1" runat="server">
</asp:History>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        複数のコントロールを同時にHistoryコントロールに格納できる<br />
        <br />
        <asp:ListBox ID="ListBox1" runat="server" AutoPostBack="True" >
            <asp:ListItem>ミカン</asp:ListItem>
            <asp:ListItem>メロン</asp:ListItem>
            <asp:ListItem>パイン</asp:ListItem>
            <asp:ListItem>キウイ</asp:ListItem>
            <asp:ListItem>リンゴ</asp:ListItem>
            <asp:ListItem>イチゴ</asp:ListItem>
        </asp:ListBox><asp:Button ID="Button1" runat="server" Text="時刻" />
        <asp:TextBox ID="TextBox1"
            runat="server"></asp:TextBox>
        <asp:Button ID="Button2" runat="server"
                    OnClick="Button2_Click" Text="テキストの値" />
        <br />
    <asp:Label ID="Label1" runat="server"></asp:Label>
    </ContentTemplate>
    <Triggers>
        <%-- HistoryコントロールもTriggersプロパティに設定する--%>
        <asp:AsyncPostBackTrigger ControlID="History1" EventName="Navigate" />
        <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

　後述しますが、HistoryコントロールはNavigateイベントを利用して［戻る］ボタンのサポート（［戻る］ボタンをクリックした後は［進む］ボタンのサポート）をしているのでTriggersプロパティの設定が必要です。Navigateイベントとは、ブラウザの［戻る］ボタンがクリックされた時に直前に利用された非同期通信を利用して発生するイベントです。続いてボタンのクリックイベントなどのイベントハンドラの処理の中に以下の一文を加えます。このコードにより操作履歴ポイントが作成されます。

操作履歴ポイントの作成

'AddHistoryPoint(キー名, 格納したいデータ（オブジェクト）)
History1.AddHistoryPoint("history", Label1.Text)

　上記のコードでお分かりになるかと思いますが、HistoryコントロールはWebページすべての状態を保持するわけではありません。変更がある部分のデータ（オブジェクト）のみをHistoryコントロール内に保持します。だからこそ、AJAXの原理同様に必要最低限の部分のみを格納することが重要です（テキストデータのみなど）。また、実際に利用する場合には、操作履歴のポイントを作りたいイベントの中に上記のAddHistoryPointを追加していく必要があります。続いて、格納したデータを受け取る方法です。格納したデータはNavigateイベント内で受け取ります。このNavigateイベント内に先述した操作履歴のポイントのキーがあるか確認をするコード、Historyコントロールから保持したデータ（オブジェクト）を取り出すコード、該当のコントロールにデータを戻すコードを記述します。重要な点はargsクラス（EventArgs派生クラス）のStateプロパティです。AddHistoryPointメソッドで格納されたデータはすべて「history」をキーとしてDictionlaryに格納されているので、取り出した後に適切な型変換を行う必要があります。

［戻る]ボタンクリック時のイベント処理

Protected Sub History1_Navigate(ByVal sender As Object, _
    ByVal args As Microsoft.Web.Preview.UI.Controls.HistoryEventArgs) _
    Handles History1.Navigate
'格納したデータを受け取る変数の宣言
    Dim startpage As String = ""
'Historyコントロールからページ再現のためのキーがあるか確認
    If args.State.ContainsKey("history") Then
    'Historyコントロールから格納したデータをキャストしてから受け取る
        startpage = CStr(args.State("history"))
    End If
'受け取ったデータを該当のコントロールに渡す（ここではLabel1のテキストを渡す）
    Label1.Text = startpage
End Sub

　以上の設定でHistoryコントロールを利用したページの完成です。実行画面は図10～11のようになります。

　このHistoryコントロールは仕様上次の点に気をつけなくてはいけません。

1. Historyコントロールは操作履歴のポイントを作成した時点で、ページの状態再現のためにURLの末尾にシリアライズされた状態のデータが追加される。このデータは暗号化されていないため、セキュリティ対策を別途考える必要がある

まとめ

　Futuresで利用できるASP.NETの新機能はAJAXやSilverlightと密な関係になっています。特にAJAXによるWebページが増えてきているので、Historyコントロールの活用は非常に重要になると考えられます。例えば、ASP.NET AJAXとの組み合わせの際にぜひ活用してみてはいかがでしょうか。ユーザーは気づかないかもしれませんが、確実にユーザーエクスペリエンスが向上されます。また、Mediaコントロール、XAMLコントロールはSilverlightをASP.NETのサーバコントロールとして利用していますが、2つのコントロールを使わなくとも既存のSilverlightを利用したページ同様の手法で組み合わせることもできるので、プロジェクトにあった方法でSilverlightの組み込みなども行っていただければと思います。

参考資料

1. ASP.NET AJAX（公式ページ：英語）
2. Microsoft ASP.NET Futures (July 2007): Documentation and Resources（ドキュメント：英語）
3. Brad Abrams