ステップ 7 ハンズオン : ASP.NET 2.0 による一貫性と柔軟性に優れたサイト デザイン その 1

サイト基盤の構築と共通 UI 部品の作成

グローバル ナレッジ ネットワーク株式会社
ナレッジ ソリューション本部 鈴木和久

最終更新日 2005 年 11 月 17 日

サイト基盤の構築と共通 UI 部品の作成

ここでは、新規に ASP.NET 2.0 Web サイトを作成し共通 UI 部品を作成する方法について説明します。

Web サイトを新規に作成し、セキュリティ設定ウィザードを実行します。

セキュリティ設定ウィザードの詳細については 「ステップ 7 ハンズオン : ASP.NET 2.0 メンバ シップとロールの管理」を参考にしてください。

ステップ 2 ： アクセス方法の選択で、「ローカル エリア ネットワーク（LAN）から」を選択します。これにより、Windows 認証オプションが Web サイトに適用されます。

サイトマップ （Web.sitemap) を新規作成します。

サイトマップの詳細については 「ステップ 7 ハンズオン : ASP.NET 2.0 Web サイト ナビゲーションの実装」を参考にしてください。

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="https://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="Default.aspx" title="Enterprise Information Portal" description="Enterprise Information Portal "> 
    <siteMapNode url="generalAffairs.aspx" title="General Affairs" description="General Affairs" />
    <siteMapNode url="humanResource.aspx" title="Human Resource" description="Human Resource" />
    <siteMapNode url="Legal.aspx" title="Legal" description="Legal" />
   </siteMapNode>
</siteMap>

ヘッダー機能を提供するユーザー コントロールを、「header.ascx」という名前で作成します。

ロゴ イメージを配置し、その下に SiteMapPath コントロールを配置します。

SiteMapPath コントロールの詳細については 「ステップ 7 ハンズオン : ASP.NET 2.0 Web サイト ナビゲーションの実装」を参考にしてください。

ナビゲーション メニュー機能を提供するユーザー コントロールを、「naviMenu.ascx」という名前で作成します。

TreeView コントロールを配置し、データ ソースとしてサイトマップを選択します。

TreeView コントロールの詳細については 「ステップ 7 ハンズオン : ASP.NET 2.0 Web サイト ナビゲーションの実装」を参考にしてください。

フッター機能を提供するユーザー コントロールを、「footer.ascx」という名前で作成します。

内線番号一覧情報を提供するユーザー コントロールを、「phoneNoList.ascx」という名前で作成します。このコントロールは、Web パーツとして使用します。

GridView コントロールを配置し、データ ソースとしてデータベースを選択します。社員情報を管理するテーブルより、社員番号、姓、名、拠点、内線番号の各フィールドを選択します。表示スタイルについては、後の手順でスキンにより集中管理しますので、この時点で設定する必要はありません。

GridView コントロールの詳細については 「ステップ 7 ハンズオン : ASP.NET 2.0 リッチ データ コントロールによるデータ アクセス ページの実装」を参考にしてください。

カレンダー情報を提供するユーザー コントロールを、「Calendar.ascx」という名前で作成します。このコントロールは、Web パーツとして使用します。

Calendar コントロールを配置します。表示スタイルについては、後の手順でスキンにより集中管理しますので、この時点で設定する必要はありません。

以上で、サイト基盤が構築され、共通UI部品の作成が完了しました。

ページのトップへ