CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/05/24 14:00
目次

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ページを作成できる可能性を持ったコントロールといえます。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:ComponentZine(ComponentOne)

もっと読む

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

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

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5