次の方法で共有

オリジナルのコントロールを作成する方法

  • [アーティクル]

download1.gifv サンプル コードのダウンロード (PHPtips_CustomControl.msi, 285 KB)

※このサンプルをお使いいただくためには、Visual Studio 2005 が必要です。

HTML タグや、サーバー サイド スクリプトで用意されているコントロールにない機能を実装したい場合に、従来の ASP や PHP では、複数のコントロールを組み合わせたり、独自の処理を追加したものをクラスでカプセル化したり関数化したりし、スクリプトに埋め込むことで実装していました。
ASP.NET 2.0 では、Web カスタム コントロールが作成でき、作成した Web カスタム コントロールをサーバー アプリケーションに使用することができます。これは、サーバー上で動作するコンパイル済みのコンポーネントなので、スクリプトの中にコードを埋め込む必要はありません。今回は、ASP.NET 2.0 で Web カスタム コントロールを作成する方法について紹介します。

今回作成する Web カスタム コントロールは、指定された文字列をメッセージボックスで表示するボタンを作成します。

はじめに、Web カスタム コントロールを使用する Web サイトのプロジェクトを開きます。Web サイトのプロジェクトを開いている状態から、下記の手順により Web カスタム コントロールを作成します。

  1.     メニューバーにある [ファイル]-[プロジェクトの追加]-[新しいプロジェクト] を選択し、[新しいプロジェクトの追加] ダイアログが表示されます。

  2.     テンプレートで [Web コントロール ライブラリ] を選択します。

  3.     [プロジェクト名] を「WebCustomControl」に設定し、[OK] ボタンを押します。

  4.     標準で、「WebCustomControl1.vb」が作成されるので、WebCustomControl1.vb ファイルのプロパティを開き、[ファイル名] を「MsgButton.vb」に変更します。

  5.     「MsgButton.vb」をリスト1 のコードに置き換えます。

  6.     [ビルド]-[MsgButton のビルド] からコントロールをビルドします。

Imports System.ComponentModel
Imports System.Web.UI
<DefaultProperty("Text"), ToolboxData("<{0}:MsgButton runat=server></{0}:MsgButton>")> _
             Public Class MsgButton
    Inherits System.Web.UI.WebControls.WebControl
    Dim _text As String
    Dim _message As String
    <Bindable(True), Category("Appearance"), DefaultValue("")> Property [Text]() As String
        Get
            Return _text
        End Get
        Set(ByVal Value As String)
            _text = Value
        End Set
    End Property
    <Bindable(True), Category("Appearance"), DefaultValue("")> Property [Message]() As String
        Get
            Return _message
        End Get
        Set(ByVal Value As String)
            _message = Value
        End Set
    End Property
    Protected Overrides Sub Render(ByVal output As System.Web.UI.HtmlTextWriter)
        Dim strHtml As String
        strHtml = "<input name=" & Me.UniqueID & " type=button value=" & [Text] & _
                      " onclick=""alert('" & [Message] & "')"" > "
        output.Write(strHtml)
    End Sub
End Class

リスト1．MsgButton.vb

標準で作成されるコードには、Text プロパティが用意されています。今回は、この Text プロパティで指定される文字列をボタンのキャプションとして使用し、メッセージ ボックスに表示されるメッセージ文字列を設定するために Message プロパティを追加します。Render プロシージャで HtmlTextWriter の Write メソッドに渡している strHtml は、クライアントへ出力される HTML 文字列になります。今回ボタンを押したときにメッセージ ボックスを表示したいので、onclick で alert によって Message プロパティの文字列を表示します。このように、Web カスタム コントロールは、独自のプロパティを作成することができ、すきな組み合わせの HTML 文字列を出力することができます。
では、作成した MsgButton コントロールをページに貼り付けて動かしてみましょう。[ツールボックス] に [WebCustomControl コンポーネント] タブが追加されるので、Web カスタム コントロールを配置する Web ページのデザイン画面へ貼り付けます。下記の説明では、Web カスタム コントロールを配置する Web ページを Default.aspx とします。

  1.     [ツールボックス]-[WebCustomControl コンポーネント] から MsgButton を選択し、Default.aspx のデザイン画面へ貼り付けます。

  2.     プロパティを開き、[Text] を「TEST」に、 [Message] を「あいうえお」に設定します。

    図

    図1 MsgButton コントロールに作成したプロパティが表示されているプロパティ ウインドウの表示画面

Web カスタム コントロールに作成したプロパティは、標準コントロールと同じようにデザイン画面（図1）やコードからプロパティを設定することができます。

Cc719216.CustomControl_fig02(ja-jp,MSDN.10).gif

図2 MsgButton コントロール貼り付けた Default.aspx の表示画面