CodeZine(コードジン)

特集ページ一覧

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

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

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

Webページのデザイン

 では、さっそくアプリケーションを作成していきましょう。作成するアプリケーションは、3つのC1Expanderコントロールを使用して、3つのサイトをページ内に表示します。各C1Expanderコントロールは、デザイン時にContentUrlプロパティを設定しサイトを表示しますが、TextBoxコントロールとButtonコントロールを使って、好きなサイトを表示できるようにします。

ページのレイアウト

 ページには、ASP.NETのTextBox、ButtonコントロールとC1Expanderコントロールを配置します。

 C1ExpanderコントロールはExpandedプロパティを「False」にし、ページ表示時は縮小状態で表示するようにします。

 また、ThemeRolerを使用してデザインを装飾します。

ページレイアウト
ページレイアウト

C1Expanderコントロールの作成

 最初に、C1Expanderコントロールを作成します。

 ① ツールボックスからC1Expanderコントロールのアイコンをクリックし、ページにドラッグ&ドロップします。

 ② 「ContentUrl」プロパティに「http://download.grapecity.com/help/componentone/aspwij_expander/」と入力します。これで、C1Expanderコントロールはこの外部コンテンツ(Webサイト)を表示します。

 ③ ここで試しにプロジェクトを実行してみます。グレープシティ社のWebサイトにある「Expander for ASP.NET Wijmoヘルプ」が表示されます。

 C1Expanderコントロールはデフォルトのままなので、コンテンツ領域が拡張して表示されています。

 また、コンテンツ領域も少し狭いですね。

デフォルトで実行したページはコンテンツ領域が拡張表示で少し狭い
デフォルトで実行したページはコンテンツ領域が拡張表示で少し狭い

 ④ 実行を中止し、Visual Studioに戻ります。C1Expanderコントロールをクリックし、プロパティウィンドウにある「Expanded」プロパティを「False」にします。

 これで、アプリケーション実行時はC1Expanderコントロールはコンテンツ領域が閉じた状態になります。

 ⑤ また、コンテンツ領域が狭かったのでもう少し広げます。ページエディタを「ソース」に切り替え、次のCSS文を<asp:Content>要素の下に記述します。

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <style type="text/css" media="all">
        .ui-expander-content 
        {
            height: 400px;
        }
    </style>

 ⑥ ヘッダー領域にWebサイトのタイトルを設定します。<wijmo:C1Expander>要素の中に、<Header>要素を追加し、タイトル文字列を入力します。

<Header>Expander for ASP.NET Wijmo ユーザーガイド<br /> </Header>

 これで、ヘッダー領域にタイトルが表示されます。

コンテンツ領域が広がり、ヘッダーにタイトルが付いた。
コンテンツ領域が広がり、ヘッダーにタイトルが付いた。
ここまでのHTML文
<%@ Page Title="ホーム ページ" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<%@ Register assembly="C1.Web.Wijmo.Controls.4" namespace="C1.Web.Wijmo.Controls.C1Expander" tagprefix="wijmo" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <style type="text/css" media="all">
        .ui-expander-content 
        {
            height: 400px;
        }
    </style>

    <h2>
        &nbsp;</h2>
    <p>
    </p>
    <wijmo:C1Expander ID="C1Expander1" runat="server" 
        ContentUrl="http://download.grapecity.com/help/componentone/aspwij_expander/" 
        Expanded="False">
        <Header>Expander for ASP.NET Wijmo ユーザーガイド<br /> </Header>
    </wijmo:C1Expander>
</asp:Content>

 ⑦ 同じように、C1Expanderコントロールをあと2つ作成します。

<wijmo:C1Expander ID="C1Expander2" runat="server" Expanded="False" 
    ContentUrl="http://msdn.microsoft.com/ja-jp/library">
    <Header>MSDN ライブラリ<br /> </Header>
</wijmo:C1Expander>
<br />
<br />

<wijmo:C1Expander ID="C1Expander3" runat="server" Expanded="False" 
    ContentUrl="http://www.grapecity.com/tools/products/componentoneasp2012">
    <Header>「ComponentOne Studio for ASP.NET Wijmo 2012J」 製品情報<br /> </Header>
</wijmo:C1Expander>
<br />
<br />
3つのC1Expanderコントロールを作成する
3つのC1Expanderコントロールを作成する

  • 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