ステップ 7 ハンズオン: ASP.NET 2.0 Web パーツを使用したページのパーソナライズ その 3

カスタム プロパティを持つ web パーツの作成

グローバル ナレッジ ネットワーク株式会社
ナレッジ ソリューション本部 鈴木和久

カスタム プロパティを持つ Web パーツの作成

ここでは、その 2 で作成したページに、カスタム プロパティを持つ Web パーツを追加し、Web パーツ同士の通信を実現します。

その 2 で作成した Default.aspx をデザイン ビューで開きます。

ASP.NET 2.0 Web Parts Framework では Web パーツの接続の機能を利用して、Web パーツが保持する値を他の Web パーツに渡すことができます。

Web パーツ同士が接続できるためには、接続する Web パーツ間で共通のインターフェイスを持つ必要があります。この例では、Web パーツ間で日付のデータを渡せるように App_Code フォルダ内に ICalendarDate インターフェイスを定義します。

 ICalendarDate.vb ファイル

Imports Microsoft.VisualBasic 

Public Interface ICalendarDate 

    ReadOnly Property SelectedDate() As String 

End Interface

Web ユーザー コントロールを利用して、カスタムプロパティを持つ Calendar コントロールを作成します。プロジェクトに新しい項目の追加として、CalendarExt.ascx という Web ユーザー コントロールファイルを追加します。
このページのデザイン画面に標準タブから Calendar コントロールを配置します。この Web ユーザー コントロールは他の Web パーツに、選択した日付のデータを渡す Web パーツとして作成します。

CalendarExt.ascx.vb のコード ページを開き、以下のように、クラスにカスタム プロパティを定義します。

Partial Class CalendarExt 

    Inherits System.Web.UI.UserControl 
    
    ' Web パーツ間でデータを渡すためのインターフェイスを実装する 
    Implements ICalendarDate 

    Public ReadOnly Property SelectedDate() As String Implements ICalendarDate.SelectedDate 
        Get 
            Return Calendar1.SelectedDate.ToString("yyyy/MM/dd (ddd)") 
        End Get 
    End Property

    ' 日付データの送信元として、ConnectProvider 属性を定義し、CalendaerSelectedDate キーを持つ Consumer 
    '  Web パーツと接続できるようにする 
    <ConnectionProvider("CalendarSelectedDate")> Public Function ProviderInterface() As ICalendarDate 
        Return Me 
    End Function 

End Class

CalendarExt コントロールから日付データを受け取るための Web パーツとして、次のようなメモ用の Web パーツを App_Code フォルダの下に、MemoWebParts.vb に定義します。

MemoWebPart.vb ファイル

Imports Microsoft.VisualBasic 
Imports System.Web.UI 
Imports System.Web.UI.WebControls.WebParts 

Namespace myControls 
    Public Class MemoWebPart 
        Inherits WebPart 

        Private _myInterface As ICalendarDate 
        Private _memo As String 
        Private _memoDate As String 

            ' プロパティ グリッド エディタから編集できるように属性を定義 
        <Personalizable(), WebBrowsable()> Public Property Memo() As String 
            Get 
                Return _memo 
            End Get 

            Set(ByVal value As String)
                 _memo = value 
            End Set 
        End Property 

        Sub New() 
            _memoDate = Date.Today.ToString("yyyy/MM/dd (ddd)") 
        End Sub 

        ' CalendarSelectedDate キーを持つ Web パーツからデータを受け取る 
        <ConnectionConsumer("CalendarSelectedDate")> _ 
        Public Sub GetInterface(ByVal myInterface As ICalendarDate) 
            _myInterface = myInterface 
        End Sub 

        'Web パーツ同士の接続後、コンテンツをレンダーする前にデータを受け取る 
        Protected Overrides Sub OnPreRender(ByVal e As System.EventArgs) 
            If _myInterface IsNot Nothing Then 
                _memoDate = _myInterface.SelectedDate 
            End If 
        End Sub 

        Protected Overrides Sub RenderContents(ByVal writer As System.Web.UI.HtmlTextWriter) 
        '  日付をカレンダーコントロールから受け取り、日付とメモの内容を表示する 
            writer.Write(_memoDate + "<br /><br />") 
            writer.RenderBeginTag("strong") 
            writer.Write(Memo) 
            writer.RenderEndTag() 
        End Sub 

    End Class 
End Namespace

Defalt.aspx をソース ビューで表示し、次のようなディレクティブを宣言します。これは Step 3 で定義したクラスを Web パーツとして使用するための宣言になります。

<%@ Register TagPrefix="custom" Namespace="myControls" %>

さらに、DeclarativeCatalogPart のテンプレートから その 2 で使用したメモ Web パーツを削除します。
ここに、Step 3 で定義したメモ Web パーツを設定するために、ソース ビューを表示し、以下の記述を追加します。

<asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" runat="server"> 

    <WebPartsTemplate> 

        <custom:MemoWebPart Title="拡張メモ" ID="MemoWebPart" runat="server" /> 

        <uc1:EmployeesList title="内線一覧" ID="EmployeesList1" runat="server" />    

   </WebPartsTemplate> 

</asp:DeclarativeCatalogPart>

WebPartZone1 に配置してある Calendar コントロールを削除し、変わりに、CalendarExt.ascx ファイルをこの領域にドラッグ ドロップしてコントロールを取り替えます。ソース ビューから CalendarExt コントロールの title 属性を「拡張カレンダー」に設定します。

<asp:WebPartZone ID="WebPartZone1" runat="server"> 

    <ZoneTemplate> 

        <uc3:CalendarExt title="拡張カレンダー" ID="CalendarExt1" runat="server" /> 

    </ZoneTemplate> 

</asp:WebPartZone>

Default.aspx 上に LinkButton を配置し、Text プロパティを「WebParts の接続」とします。このClick イベント  ハンドラに次のコードを記述して Web パーツ同士の接続ができるようにします。

WebPartManager1.DisplayMode = WebPartManager.ConnectDisplayMode

ページのトップへ