SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(ComponentOne)

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

ThemeRollerでデザインを変更する

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

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

「ThemeRoller」の「Gallery」から「Start」をダウンロード
「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コントロールを追加
各C1Expanderコントロールの上に、「URL:」という文字列とTextBox、Buttonコントロールを追加

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

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

URLを入力してサイトを移動できるようにした
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ページを作成できる可能性を持ったコントロールといえます。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ComponentZine(ComponentOne)連載記事一覧

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7151 2013/05/24 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング