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

コンテンツ ページの作成

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

最終更新日 2005 年 11 月 17 日

コンテンツ ページの作成

ここでは、その 2 で作成したマスタ ページを継承するコンテンツ ページを作成します。

コンテンツページを新規作成します。[新しい項目の追加] ダイアログで、[マスタ ページを選択する] をチェックします。

コンテンツ ページの詳細については 「ステップ 7 ハンズオン : ASP.NET 2.0 マスタ ページによるページテンプレートの実装」を参考にしてください。

その 2 で作成した、マスタ ページを選択します。

コンテンツページ上の Content コントロールに、トップ ページのメイン コンテンツとして「お知らせ」情報を記述します。

「お知らせ」情報の下に、パーソナライズ可能な Web パーツ領域を配置します。

• Content コントロール内の先頭に WebPart マネージャコントロールを配置します
• お知らせ情報の下に、WebPartZone コントロールを配置します
• Link ボタンコントロールを配置し、クリック時に CatalogDisplayMode に切り替えるようにします
• CatalogZone コントロールを配置し、DeclarativeCatalogPart コントロールを含めます
• その 1 で作成した、カレンダー コントロールと内線番号一覧 コントロールを DeclarativeCatalogPart コントロールに含めます

Web パーツの詳細については 「ステップ 7 ハンズオン : ASP.NET 2.0 Web パーツを使用したページのパーソナライズ」を参考にしてください。

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
  <asp:WebPartManager ID="WebPartManager1" runat="server"> </asp:WebPartManager>
  <asp:Label ID="Label1" runat="server" Font-Size="X-Large" Text="お知らせ"></asp:Label>
    <br />社員持ち株会総会 11/15/2005<br /> 健康診断 11/18/2005<br /> 年末調整種類の提出 11/20/2005<br /> 
    <br />
  <asp:WebPartZone ID="WebPartZone1" runat="server" Height="62px" Width="130px"></asp:WebPartZone><hr />
  <asp:LinkButton ID="LinkButton1" runat="server">ページのカスタマイズ</asp:LinkButton><br />
  <asp:CatalogZone ID="CatalogZone1" runat="server">
    <ZoneTemplate>
      <asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" runat="server">
        <WebPartsTemplate>
          <uc1:calendar title="カレンダー" ID="Calendar1" runat="server" />
          <uc2:phoneNoList title="内線一覧" ID="PhoneNoList1" runat="server" /> 
        </WebPartsTemplate>
      </asp:DeclarativeCatalogPart>
    </ZoneTemplate>
  </asp:CatalogZone>
</asp:Content>

コンテンツ ページをブラウザで表示させ、[ページのカスタマイズ] をクリックします。

CatalogDisplayMode に遷移したら、Web パーツ領域にカレンダー コントロールと内線一覧コントロールを組み込みます。

その 2 で定義した、Professional テーマが適用されていることを確認します。

ハイパー リンク要素にマウスをポイントすると赤色に変化します。

Web.config ファイルで、アプリケーション レベルで適用される既定のテーマを Colorful テーマに変更します。

<system.web>
  <compilation debug="true" strict="false" explicit="true"/>
  <pages theme="Colorful">
    <namespaces>
      <clear/>

Colorful テーマが適用されていることを確認します。

ハイパー リンク要素にマウスをポイントするとオレンジ色に変化します。

まとめ

ASP.NET 2.0 では、マスタ ページ及びサイトマップ、そしてテーマを組み合わせることによりサイトデザインの一貫性を集中管理することが可能です。動的コンテンツは、リッチデータコ ントロールを活用することによりノンコーディングで実装可能です。さらに、フレーム ワーク化されたメンバシップとロールの管理のもとで、サイト利用者に対して、Web パーツによる柔軟なパーソナライズ環境を提供することも可能です。

ページのトップへ