拡張パネルでコンテンツをドロップダウン表示するASP.NETアプリケーションの作成

C1Expanderコントロールを使ったWebアプリケーションの作成

ThemeRollerでデザインを変更する

　続いて、「ThemeRoller」を使ってデザインを変更します。「ThemeRoller」については前回の記事「カラフルなツールチップを持つASP.NETアプリケーションの作成」で使い方を詳しく説明していますので、こちらを参照してください。

　① 今回は、「Gallery」から「Start」を選びました。「Download」Buttonをクリックしてダウンロードし、解凍します。

「ThemeRoller」の「Gallery」から「Start」をダウンロード

　② プロジェクトに「MyTheme」というフォルダを作成し、解凍したファイルをすべてこの中に移動します。

　③ C1ExpanderコントロールのThemeプロパティの値欄に、CSSファイルのファイル名をパス名を付けて記述します。

/MyTheme/css/start/jquery-ui-1.10.3.custom.css

　④ アプリケーションを実行し、デザインを確認します。

ここまでの出来栄えを確認する

URL入力エリアを追加する

　これだけでも十分使えるアプリケーションになっていますが、せっかくなのでアプリケーション実行時に他のWebサイトに移動できる機能を追加します。

　① 各C1Expanderコントロールの上に、「URL：」という文字列とTextBox、Buttonコントロールを追加します。Buttonコントロールは、「Text」プロパティに「⇒」という文字を入力しておきます。

各C1Expanderコントロールの上に、「URL：」という文字列とTextBox、Buttonコントロールを追加

　② 3つのButtonコントロールは、Clickイベントハンドラを作成し、TextBoxコントロールの入力内容をC1Expanderコントロールの「ContentUrl」プロパティに代入する式を作成します。

　また、ExpandedプロパティをTrueにして、移動したWebサイトを表示するようにします。

URLを入力してサイトを移動できるようにした

Visual Basic

Public Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        C1Expander1.ContentUrl = TextBox1.Text
        C1Expander1.Expanded = True
    End Sub

    Protected Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click
        C1Expander2.ContentUrl = TextBox2.Text
        C1Expander2.Expanded = True
    End Sub

    Protected Sub Button3_Click(sender As Object, e As EventArgs) Handles Button3.Click
        C1Expander3.ContentUrl = TextBox3.Text
        C1Expander3.Expanded = True
    End Sub
End Class

C#

namespace Expander_ASP_cs
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Button1_Click(object sender, EventArgs e)
        {
            C1Expander1.ContentUrl = TextBox1.Text;
            C1Expander1.Expanded = true;
        }

        protected void Button2_Click(object sender, EventArgs e)
        {
            C1Expander2.ContentUrl = TextBox2.Text;
            C1Expander2.Expanded = true;
        }

        protected void Button3_Click(object sender, EventArgs e)
        {
            C1Expander3.ContentUrl = TextBox3.Text;
            C1Expander3.Expanded = true;
        }
    }
}

まとめ

　C1Expanderコントロールは、限られたWebページのスペースを有効に活用できるだけではなく、コントロールやテキスト、画像から外部コンテンツまで、幅広いコンテンツを組み込むことが可能です。

　今回は、開発作業用のリファレンスページを作成してみましたが、C1Expanderコントロールはアイデア次第で、さまざまな用途のWebページを作成できる可能性を持ったコントロールといえます。