Club Web サイト スターター キットの概要

 

Bill Evjen
Reuters

2005 年 6 月

適用対象:
   Microsoft ASP.NET 2.0
   Visual Studio 2005
   Visual Web Developer 2005 Express Edition

概要： Visual Studio 2005 で使用可能なプロジェクトの種類である新しい Club Web サイト スターター キットについて説明します。 (30ページ印刷)

内容

はじめに
Club Web サイト スターター キットの初期セットアップ
管理者ロールの作成
管理者ロールへのユーザーの追加
マスター ページ: Default.master
マスター ページでの SiteMapDataSource コントロールの操作
サイト アクセス制限について
クラブイベントの登録: Events_Calendar.aspx
ニュース記事: News_List.aspx
フォト アルバム ページ: PhotoAlbum_List.aspx
アプリケーションの登録済みメンバーの表示: Member_List.aspx
静的ページ: Links.aspx と Contact.aspx
まとめ

はじめに

Club Webサイトスターターキットを使用すると、任意のクラブやorganizationの提示と管理に役立つアプリケーションを簡単に作成できます。 Club Web サイト スターター キットのアイデアは、あらゆる種類のクラブに焦点を当てた価値のある Web サイトをすばやく整理するために使用できるフレームワークを提供することです。 このスターターキットは、クラブの詳細を簡単に提示できる一連のページを提供します。 このスターターキットのスタートページには、クラブのニュースとイベントの概要、関連するニュースやイベントページ、写真を公開する場所、登録フォーム、メンバーリスト、リンクのページ、連絡先ページが一覧表示されたホームページが含まれています。

この簡単な説明から、このフレームワーク アプリケーションには多くの機能が用意されていることがわかります。 Club Web サイト スターター キットを初めてコンパイルして実行すると、図 1 に示すホーム ページが表示されます。

図 1. スターター キットのホーム ページ

Club Web サイト スターター キットの各ページでは、既定の lorem ipsum テキストを独自の単語に置き換える準備が整っています。 これにより、クラブの Web サイトのパーソナル化プロセスが開始されます。 アプリケーションからわかるように、架空のサッカー チーム (世界中のほとんどの地域の サッカー チームとも呼ばれます) の Web サイトとして構築されていますが、このフレームワークはさまざまなクラブや組織に簡単に使用できます。

クラブ Web サイト スターター キットは、優れた学習ツールでもあります。 アプリケーションの各ページを生成するコードを表示すると、ASP.NET の最新リリースの最も強力な機能の一部が使用されていることがわかります。 このスターター キットを実際の運用 Web サイトに使用することに関心がない場合でも、ASP.NET 2.0 を使用してアプリケーションを作成する方法を学習するために使用する貴重なリソースです。

ただし、このアプリケーションを使用する前に、まず、このスターター キットのインストールとスタートアップを見てみましょう。

Club Web サイト スターター キットの初期セットアップ

Club Web Site Starter Kit を開発サーバーにインストールすると、[新しい Web サイト] ダイアログの [マイ テンプレート] セクションで、インストールがプロジェクト テンプレートとして使用できるようになります。 このダイアログボックスを表示するには、[ ファイル] をクリックし、Visual Studio メニューの [ 新しい Web サイト ] を選択します。 このダイアログは図 2 に示されています。

図 2. 新しいクラブ サイトの作成

このプロジェクトの種類のインスタンスを作成すると、Visual Studio によって、多数のフォルダーとファイルを含むソリューションが作成されます。 図 3 に示すように、Visual Studio のソリューション エクスプローラーで作成されたすべての項目を表示できます。

図 3: クラブサイトソリューション

図 3 からわかるように、このスターター キットには多くのものがあります。 Visual Studio でこのスターター キットのインスタンスが作成されると、App_Data フォルダーにデータベースの ASPNETDB.mdf コピーが必要ないことがわかります。 この SQL Express ファイルは、このアプリケーションで使用されているメンバーシップ、ロール管理、およびその他の ASP.NET 2.0 システムに必要です。 次に、このファイルが自動的に作成される方法について説明します。

管理者ロールの作成

アプリケーションの Administrators ロールを作成し、このロールに少なくとも 1 人のユーザーを配置する必要があるため、Visual Studio のソリューション エクスプローラーの [ASP.NET 構成] ボタンをクリックして、ASP.NET Web サイト管理ツールを開きます。 この管理ツールを開くには、Visual Studio メニューから [Web サイト] ASP.NET [管理] を選択します。 ASP.NET Web サイト管理ツールが起動した後、ツールが提供する [セキュリティ] タブをクリックします。 その後、次の情報が提供されます。

図 4: [管理] ページ

ブラウザーでこのツールを起動すると、必要な ASPNETDB.mdf ファイルが App_Data フォルダーに見つからない場合にも作成されます。 ASP.NET Web サイト管理ツールを起動したら、Visual Studio ソリューション エクスプローラーの [最新の情報に更新] ボタンをクリックし、App_Data フォルダーを展開すると、これを自分で確認できます。 ここでは、メンバーシップとロール管理システムで使用される ASP.NET データベースが見つかります。

最初から、アプリケーション用に設定されたユーザーまたはロールが存在しないことがわかります。 このアプリケーションは、サイトに含まれる情報の編集を管理するために 、Administrators という名前のロールの一部であるユーザーに依存します。 管理者ロールには、必要と思われる数のユーザーを含めることができます。 ロールとユーザーを確立するには、最初の手順として Administrators ロールを作成します。

ASP.NET Web サイト管理ツールを使用して管理者ロールを作成するには、[セキュリティ] ページにある [役割の 作成 または 管理 ] リンクをクリックします。 指定されたロールの作成ページで、ロールの名前を指定するだけです。 この場合は、図 5 に示すようにロール に Administrators という名前を付けます。

図 5: Administrators ロールの作成

[ ロールの追加 ] ボタンをクリックして、アプリケーションにロールを追加します。 次のページにロールが一覧表示されます。 このビュー (図 6) から、ユーザーを追加および削除することでロールを管理できます。 このページを使用して、システムからロールを削除することもできます。

図 6: ロールの追加

管理者ロールへのユーザーの追加

管理者ロールが設定されたので、次の手順では、1 人以上のユーザーをロールに追加します。 これを行うには、ASP.NET Web サイト管理ツールの [セキュリティ] ページから [ ユーザーの作成 ] リンクをクリックします。 [ユーザーの作成] フォームを図 7 に示します。

図 7: 管理者の追加

ここでユーザーを作成するときは、[管理者] チェック ボックスがオンになっていることを確認して、このユーザーを Administrators ロールに追加します。 この同じダイアログから、通常のユーザー (管理者以外) を必要な数だけ追加することもできます。 もう 1 つのオプションは、これらの他のユーザーが単に Web サイト自体で独自の登録を実行できるようにすることです。 これについては、この記事の後半で説明します。 既定では、ASP.NET 2.0 には、大文字と小文字、数字、特殊文字の組み合わせ (!、#、$、%など) を含む 8 文字以上の強力なパスワードが必要であることに注意してください。

図 7 に示すように [ ユーザーの作成 ] ボタンをクリックすると、アプリケーション管理者が作成されます。 これでこのユーザーが配置されたので、スターター キットを見て、このアプリケーションを構成するいくつかの項目を実行してみましょう。

マスター ページ: Default.master

このアプリケーションで最初に確認するページは、アプリケーションのマスター ページです。 ASP.NET 2.0 では、テンプレート化されたページを構築する方法が導入されています。 つまり、指定した各ページに適用できるマスター テンプレートまたはマスター ページを作成できます。 Club Web サイト スターター キットでは、マスター ページを使用します。

必ずしもページで Default.master 明らかであるとは限りませんが、Club Web Site Starter Kit では、分離コード モデルを使用するのではなく、使用可能なインライン コーディング モデルを使用します。 つまり、ページのビジネス ロジック (すべてのページ メソッド) は、タグ間 <script> のページ自体にカプセル化されます。

Default.masterこのスターター キットのページは、純粋にプレゼンテーション テンプレートであり、アプリケーションに含まれる任意のコンテンツ ページで使用できます (コンテンツ ページについてはまもなく説明します)。 ASP.NET 2.0 のマスター ページを操作する場合の良い点は、Visual Studio での表示方法です。 Visual Studio の [ドキュメント] ウィンドウで [ デザイン ] タブをクリックすると、マスター ページが視覚的に表示されます。 これを図 8 に示します。

図 8: マスター ページ

この図から、このページには、このマスター ページを使用するすべてのコンテンツ ページで使用される基本的なフレームワークが含まれていることがわかります。 マスター ページには、HTML と Web サーバー コントロールの組み合わせがあり、その一部は ASP.NET 2.0 の新機能です。 図 8 の画像は、ほとんどが黄色のページのように見えますが、アプリケーションのカスケード スタイル シート ファイル clubsite.cssを使用してマスター ページに配置されるスタイルや画像も多数あります。 このスタイル シートは、次のコード ビットを含めることでマスター ページに追加されます。

<link type="text/css" rel="Stylesheet" href="clubsite.css" />

ASP.NET 2.0 を初めて使用するマスター ページの最も興味深いサーバー コントロールは ContentPlaceHolder コントロールでしょう。 ContentPlaceHolder コントロールは、この特定のマスター ページを使用してコンテンツを挿入するコンテンツ ページを許可する定義済みの領域です。 基本的には、マスター ページを作成するときに、コンテンツ ページでページの指定されたセクションを使用できるようにします。 コンテンツ ページは、このコンテンツ領域の範囲外では機能しません。 マスター ページに配置された複数の ContentPlaceHolder コントロールを使用して複数のコンテンツ領域を含めることができますが、この例 (この Default.master ページ) では、これらのコントロールのうち 1 つだけを使用します。

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>

マスター ページで使用されるもう 1 つの新しい ASP.NET サーバー コントロールは、 SiteMapDataSource コントロールです。 このデータ ソース管理を使用すると、ページの定義済みのナビゲーション構造を簡単に操作できます。 既定では、サイトのナビゲーション構造を XML ファイル web.sitemapに定義します。 このファイルは Club Web サイト プロジェクトにあります。 これは、リスト 1 に示されています。

リスト 1: Default.master ページで使用される web.sitemap ファイル

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="https://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="/" title=""  description=""  roles="*">
    <siteMapNode url="default.aspx" title="Home"  
     description="Welcome page"  />
    <siteMapNode url="events_calendar.aspx" title="Events"  
     description="Calendar of events"  />
    <siteMapNode url="news_list.aspx" title="News"  
     description="Recent News"  />
    <siteMapNode url="photoalbum_list.aspx" title="Photos"  
     description="Photo album"  />
    <siteMapNode url="member_list.aspx" title="Members" 
     description="Membership list and contact informaation" />
    <siteMapNode url="member_redirect.aspx" title="Membership"  
     description="Member registration"  />
    <siteMapNode url="links.aspx" title="Links"  
     description="Useful links"  />
    <siteMapNode url="contact.aspx" title="Contact"  
     description="How to contact the club leaders"  />
  </siteMapNode>
</siteMap>

この構造を見ると、アプリケーションが非常にフラットな形式で表示されていることがわかります。 実際には、エンド ユーザーが操作できるページの階層はありません。 このため、各ページへのハイパーリンクは、マスター ページの上部と下部に表示される水平ツール バーに表示されます。

マスターページのデザインビューまたはコードビューから、マスターページのテキストを変更して、クラブまたはorganizationを反映するようにページを自由にカスタマイズできるようになりました。

次に、マスター ページに組み込まれているナビゲーション システムを詳しく見てみましょう。

マスター ページでの SiteMapDataSource コントロールの操作

マスター ページには、各ページの上部と下部にナビゲーション ツール バーが表示されます。 コンテンツ ページでこのマスター ページを使用すると、図 9 に示されているツール バーが表示されます。

図 9: ツール バー

このナビゲーション ツール バーは、この記事で前に web.sitemap 確認したファイルの内容によって定義されます。 この情報は、ページに web.sitemap 表示されるファイルからどのように行われますか? ページのコードを Default.master 調べると、 SiteMapDataSource コントロールを使用して XML ファイルの内容が表示されることがわかります。

アプリケーションのページ構造をファイルに web.sitemap 定義すると、新しいクラスまたは新しい SitemapSiteMapDataSource コントロールを使用して、定義されたナビゲーション構造を操作できます。 SiteMapDataSource コントロールを使用すると、データ バインディング式または SiteMapDataSource コントロール (TreeView や Menu サーバー コントロールなど) を使用して、ファイル内web.sitemapのナビゲーション構造の内容にバインドできます。

Club Web Site Starter Kit の場合、ページでは、 Default.master 前述のサーバー コントロールではなく、 SiteMapDataSource コントロールによって提供される情報から情報を取得する単純なデータバインド式を利用します。 リスト 2 は、マスター ページの SiteMapDataSource コントロールを示しています。

リスト 2: マスター ページの SiteMapDataSource コントロール

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" 
 ShowStartingNode="false" />

ご覧のように、ファイルから web.sitemap 取得される定義されたアプリケーション構造を操作することはあまりありません。 必要なのは、リスト 2 に示すような SiteMapDataSource コントロールです。 このデータソース コントロールで定義されている動作の唯一の ShowStartingNode 変更は、 属性を使用することです。これは に false設定されています。 を に false 設定すると、 SiteMapDataSource コントロールはファイルに表示される最初 <siteMapNode> の要素を web.sitemap 無視し、代わりに最初の要素のすぐ下に入れ子になった要素から <siteMapNode> 機能します。

SiteMapDataSource コントロールが配置されたので、データ バインディング式を使用してナビゲーション ツール バーが作成されます。 これは、リスト 3 に示されています。

リスト 3: SiteMapDataSource コントロールを使用してナビゲーション ツール バーを作成する

<asp:Repeater ID="TopNavRepeat" runat="server" 
 DataSourceID="SiteMapDataSource1">
   <HeaderTemplate>
      <ul>
   </HeaderTemplate>
   <ItemTemplate>
      <li>
      <asp:HyperLink ID="HyperLink1" runat="server" 
       Text='<%# Eval("Title") %>' NavigateUrl='<%# Eval("Url") %>'
       ToolTip='<%# Eval("Description") %>' />
      </li>
   </ItemTemplate>
   <FooterTemplate>
      </ul>
   </FooterTemplate>
</asp:Repeater>

ページは Default.master 、SiteMapDataSource コントロールから取得した結果セットに、ヘッダー ナビゲーション用に 1 つ、フッター ナビゲーション用に 1 つという 2 つの場所にバインドされます。

リスト 3 から、 Repeater サーバー コントロールを使用して、順序指定されていないハイパーリンクの一覧を作成していることがわかります。 ハイパーリンクは、 HyperLink サーバー コントロールを使用して構築されます。 SiteMapDataSource コントロールからデータを取得することは、同じページの SiteMapDataSource コントロールの と等しいID属性を指定DataSourceIDするのと同じくらい簡単です。 これが設定されたら、バインド式を使用するだけで、SiteMapDataSource コントロールから取得される特定の項目を Eval 取得できます。 その例を次に示します。

<%# Eval("Title") %>

この式は、ファイルで使用された title 属性に web.sitemap 関連付けられています。

<siteMapNode url="default.aspx" title="Home"  
 description="Welcome page"  />

ここでは、各ページ (要素で<siteMapNode>定義) に、 の 3 つの属性urltitledescriptionが含まれていることがわかります。 これらの 3 つの属性はすべて、 Repeater サーバー コントロールで使用されます。

興味深いことに、Club Web サイト スターター キットに示されているように、式を使用して Eval ナビゲーション システムを完全に構築する必要はありません。 ASP.NET 2.0 には、 SiteMapDataSource コントロールと、アプリケーションのナビゲーションをエンド ユーザーに表示するためにファイルに web.sitemap 表示される基になるデータを操作するように特別に設計された新しいサーバー コントロールがいくつか含まれています。 たとえば、 SiteMapPath、 TreeView、または Menu サーバー コントロールを使用して、ファイルからも機能する堅牢なナビゲーション システムを web.sitemap 構築する必要があります。

サイト アクセス制限について

ファイルの web.sitemap 内容とナビゲーション ツール バーを見ると、ナビゲーション ツール バーに表示されないページがファイルに web.sitemap 定義されていることがわかります。 ブラウザーで Club Web サイト スターター キットを初めてプルすると、[メンバー] ページが表示されません。

ただし、サイト管理者としてアプリケーションにログインすると、ナビゲーション ツール バーに表示されるページの一覧に [メンバー] ページが表示されます (図 10 を参照)。

図 10: ツール バーに追加されたメンバー

パフォーマンスが低下しているのはなぜですか。 アプリケーションのすべてのページがファイルに web.sitemap 定義されており、 SiteMapDataSource コントロールがこの XML ファイルの基になるデータと連動しますが、ファイル内で web.config 発生する動作定義は、アプリケーションのナビゲーション システムに影響を与えます。 これは、リスト 4 に示されています。

リスト 4: web.configでのページ承認要件の提供

<location path="member_list.aspx" >
   <system.web>
      <authorization >
         <deny users="?" />
      </authorization>
   </system.web>
</location>

ファイルの web.config この部分ビューでは、認証されていないすべてのユーザーが Member_List.aspx ページへのアクセスを許可されないように、ページがロックダウンされていることがわかります。 つまり、管理者のロールまたはアプリケーションで作成した他のロールでアプリケーションにログインしたユーザーは、ページに移動できます。

ただし、興味深いのは、認証されたユーザーがページへの Member_List.aspx 移動を許可されることを定義することだけでなく、アプリケーション内の認証済みユーザーのみが 、SiteMapDataSource コントロールを使用して取得されたアプリケーションのナビゲーション システムでそのページへのリンクを表示できることをさらに示すことです。

最初のコンテンツ ページ: Default.aspx

ページを Default.aspx 見ると、使用している可能性のある標準 .aspx ページではないことに気付きます。 この Default.aspx ページは 、コンテンツ ページと呼ばれます。 コンテンツ ページでは、ASP.NET 2.0 によって提供される新しいページ テンプレート システムが使用されます。 この記事で前に説明したように、ページの作成でテンプレートが Default.master 定義されました。 このテンプレート ページ (マスター ページ) は、任意の数のコンテンツ ページで使用できます。 実際、ページのDefault.aspx上部にある @Page ディレクティブを見ると、マスター ページが実際に使用されていることがわかります。

<%@ Page Language="VB" MasterPageFile="~/Default.master" 
    Title="Untitled Page" %>

ディレクティブで 属性をMasterPageFile使用すると、この.aspxページはコンテンツ ページであり、使用するテンプレートが Default.master ページであることを宣言@Pageします。 これは、マスター ページをテンプレートとして使用しているコンテンツ ページであるため、ページのフレームワークとして使用される HTML タグ (、、タグ<form>など<html><body>) を含めないことを意味します。 その理由は、これらの項目が既にページに Default.master 含まれていることが原因です。

マスター ページを振り返ると、コンテンツ ページにアイテムを配置するために割り当てられた 1 つの場所がページ上にありました。 これは 、ContentPlaceHolder サーバー コントロールを使用して行われました。 コンテンツ ページを操作する場合は、コンテンツ サーバー コントロールを使用して、マスター ページ上の ContentPlaceHolder コントロールのこのインスタンスに関連付けます。 ページを Default.aspx 見ると、1 つの コンテンツ コントロールがあることがわかります。

<asp:Content ID="Content1" 
 ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
   <!-- Content removed for clarity -->
</asp:Content>

Content コントロールを見ると、ContentPlaceHolder コントロールへの関連付けは、マスター ページで使用される ContentPlaceHolder のContentPlaceHolderID値 ID として を使用する属性を使用して行われることがわかります。 コンテンツ コントロール内に配置された コンテンツ は、結合されたページに表示されます。

コンテンツ ページの操作に関する興味深い点の 1 つは、Visual Studio でのこれらのページの表現方法です。 ここまでは、ページのコードを操作してきました。 ページの [ デザイン ] タブを Default.aspx クリックすると、この特定のページが視覚的に表示されます。 これを図 11 に示します。

図 11: マスター ページ内のコンテンツ ページ

この図から、コンテンツ ページ自体で使用されているコンテンツがページのデザイン ビューに表示されるだけでなく、マスター ページで指定されたコンテンツもページのビューに表示されることがわかります。 これは最高のページ継承です。

ページのコードを Default.aspx 振り返ると、ここで注目に値するいくつかの興味深いことが起こっています。このページには、コントロールの 2 つの列が含まれています。 左側の列を見ると、自分のクラブ用にカスタマイズされたテキストに置き換える必要があるウェルカム テキストが表示されます。 ウェルカム テキストの下には、 LoginView コントロール ASP.NET 2.0 の新しいコントロールがあります。

ユーザーがアプリケーションにログインできるようにするアプリケーションを操作しているため、このページには、認証された承認されたユーザーと見なされるビューアーが表示されます (つまり、アプリケーションにログインし、特定のロールに対して承認された可能性があります)。 このページには、認証と承認プロセスを経なかった閲覧者も表示されます。 これらのダイナミクスにより、認証されていないユーザーに他のコンテンツを表示しながら、認証されたユーザーの特定のデータを表示することが必要になる場合があります。 LoginView コントロールを使用すると、この種の動作を実行できます。

LoginView コントロールには、 と <LoggedInTemplate>の 2 つのテンプレートがあります<AnonymousTemplate>。 の Default.aspxコードを見ると、AnonymousTemplate セクションに、エンド ユーザーがアプリケーションへのログインを試みることができるフォームが含まれていることがわかります。 ユーザーがアプリケーションにログインした後に認証された場合は、セクションに LoggedInTemplate 記載されている内容が表示されます。 このセクションには、一部のテキストと LoginName コントロールのみが含まれています。 LoginName コントロールは、認証されたユーザーの名前を表示するために使用されます。 これらの両方のビューの例を図 12 に示します。

図 12. ログイン コントロール

AnonymousTemplate を介して表示されるフォームには、カスタム コントロールも含まれています。 このコントロールは、 のページで次のように定義されています。

<Club:RolloverButton runat="server" ValidationGroup="Login1" 
Text="Login" ID="LoginButton" CommandName="Login" />

ソリューションの App_Code フォルダー内を見ると、このカスタム コントロールのコードを含む または .cs ファイルが見RolloverButtons.vbつかります。

ログイン フォームとカスタム コントロールの使用に加えて、ページの右側の Default.aspx 列では、2 つの SqlDataSource コントロールを使用して、プレゼンテーション用の上位 5 つのアナウンスとイベントの両方をプルします。 まず、これらの SqlDataSource コントロールの 1 つ目を見てみましょう。

<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
 ProviderName="System.Data.SqlClient" 
 ConnectionString="<%$ ConnectionStrings:ClubSiteDB %>" 
 SelectCommand="SELECT top 5 [id], [itemdate], [title], [description], 
    [photo] FROM [Announcements] order by itemdate desc">
</asp:SqlDataSource>

SqlDataSource コントロールは、任意の SQL データベースから情報をプルするためにユーザーに代わって機能します。 この場合、接続文字列で指定されているため、 SqlDataSource コントロールのこのインスタンスは SQL Express から情報をプルします。 使用されている SQL Express ファイルは、プロジェクトの App_Data フォルダーにあります。 このフォルダー内に、 ファイル clubsite.mdfが表示されます。 サイトのお知らせ、イベント、写真が保存される場所です。

SqlDataSource コントロールの ConnectionString 属性の値として、 の値ClubSiteDBを指していることがわかります。 この参照は、実際には、アプリケーション web.config のファイルで行われた宣言を指しています。 ファイルの <connectionStrings> セクションを web.config 見ると、次の定義が表示されます。

<add name="ClubSiteDB" 
 connectionString="Data Source=.\SQLExpress;Integrated 
    Security=true;AttachDBFileName=|DataDirectory|clubsite.mdf;
    User Instance=True" providerName="System.Data.SqlClient"/>

この接続文字列を使用すると、 SqlDataSource は 属性で指定されたものを SelectCommand 使用して、SQL Express ファイルから値をプルします。

これで SqlDataSource コントロールから値が取得され始めるので、 などの <%# Eval("photo") %>単純なバインド構文を使用してそれらの値にバインドできます。

ページでDefault.aspx見つかったコードは、ステートメントが振りかざされた EvalRepeater コントロールを使用して、ページに表示される最近のアナウンスとイベントの一覧を設定します。 この例を見ると、データ ストアから情報のプルを開始し、その情報を表示するのがいかに簡単であるかを確認できます。 実際には、あまり多くの手順は必要ありません。

次に、アプリケーションの他のページで提供される機能をいくつか見てみましょう。

クラブイベントの登録: Events_Calendar.aspx

ナビゲーション ツール バーの [ イベント ] リンクをクリックして、ページを Events_Calendar.aspx 開きます。 このページには、これらのイベントが発生するイベントと場所の一覧が表示されます。 図 13 に示すように、イベントは月次カレンダーで表示できます。

図 13. クラブイベントカレンダービュー

イベントを一覧で表示することもできます (図 14)。 この一覧には、発生したばかりのイベントと、発生しようとしているイベントが表示されます。 このビューに切り替えると、ページが に Events_List.aspx変わります。

図 14: クラブイベントリストビュー

最後のページは、イベント リスト ページとよく似た場所リスト ページです。 [場所リスト] リンクをクリックして、 というLocations_List.aspx名前の新しいページを開きます。 これを図 15 に示します。

図 15: 場所

Administrators ロールの登録済みユーザーとしてアプリケーションにログインしている場合は、ページに [ 新しいイベントの追加] ボタンまたは [ 新しい場所の追加] ボタンが表示されます。 これらのボタンをクリックすると、すべてのユーザーのアプリケーションに表示されるイベントと場所を追加できるページが表示されます。 これを図 16 に示します。

図 16: イベントの詳細

アプリケーションにログインしていて、管理者ロールを持っている場合、さまざまな管理ボタンがページにどのように表示されるかに注目してください。 のコード Events_Calendar.aspxを見ると、イベントにいくつかの単純なコードが Page_Load 表示されます。 これは、リスト 5 に示されています。

リスト 5: events_calendar.aspx のPage_Load イベント

[VB]

Protected Sub Page_Load(ByVal sender As Object, _
   ByVal e As System.EventArgs)
        Dim isAdmin As Boolean
        isAdmin = User.IsInRole("Administrators")
        panel1.Visible = isAdmin
        panel2.Visible = isAdmin
End Sub

[C#]

protected void Page_Load(object sender, System.EventArgs e)
{
   bool isAdmin = User.IsInRole("Administrators");
   panel1.Visible = isAdmin;
   panel2.Visible = isAdmin;
}

リスト 5 のこの例では、ここではあまり起こっていないことがわかります。 最初に というBooleanisAdmin値が作成されます。 ASP.NET 2.0 で使用可能な新しいUserオブジェクトを使用すると、チェックして、ユーザーが特定のロールに含まれているかどうかを確認できます。 この場合、ページにアクセスしたユーザーが Administrators ロールにあるかどうかを確認します。 これらのロールがこの特定のロールにある場合は、変数にTrueisAdmin値が割り当てられます。 この値は、ページで使用される 2 つの Panel サーバー コントロールのオンとオフを切り替えるために使用されます。

<asp:Panel ID="panel1" runat="server" CssClass="fullwidth">
   <div class="actionbuttons">
      <Club:RolloverLink ID="Addbtn" runat="server" Text="Add New Event" 
         NavigateURL="Events_edit.aspx?Action=New" />
   </div>
</asp:Panel>

次に、ユーザーがナビゲーション ツール バーの [ ニュース ] リンクをクリックしたときに開くページを見てみましょう。

ニュース記事: News_List.aspx

ナビゲーションの [ ニュース ] リンクをクリックして、ページを News_List.aspx 開きます。 このページでは、アプリケーション管理者がアプリケーションに発行するニュース記事の一覧をユーザーに提供します。 記事はページングされ、1 ページにつき 10 個の記事のみが表示されます。 図 17 に、ニュース ページの例の例を示します。

図 17: ニュース ページ

管理者としてアプリケーションにログインすると、ニュース記事を追加できるようになります。 これは、ニュース ページに表示される [ 新しい記事の追加] ボタンを押すと、管理者ロールに属しているユーザーに対してのみ可能になります。 このボタンを押すと、新しい記事の完全な詳細を入力できる新しいページ (News_Edit.aspx) が表示されます。 これは図 18 に示されています。

図 18: ニュース アイテムの追加

この画像からわかるように、記事のタイトル、別のリソースへのリンク、記事の説明、記事が表示される日付、ニュース記事に関連付ける画像を追加できます。 システムに配置するニュース記事に画像を関連付けないことを選択した場合は、画像がまったく表示されず、既定の画像が表示されます。

ニュース記事がシステムに配置されると、これらの記事はニュース ページに表示されるだけでなく、最後の 5 つの記事もアプリケーションのホーム ページに表示されます。

リンクをクリックすると、個々のニュース記事を read more >> 表示できます。 これにより、ニュース記事全体が 1 ページ (News_View.aspx) に表示されます。 ニュース記事の見出しをクリックして、このページにアクセスすることもできます。

管理者は、記事の内容を編集するオプションがあります。 1 つの記事を表示するときに管理者としてアプリケーションにログインしている場合は、[ 記事の編集 ] ボタンをクリックしてこれを行うことができます。

ページのコードをNews_List.aspx見ると、すべてのアーティクルが SqlDataSource コントロールをclubsite.mdf使用してファイルから取得されていることがわかります。 このコントロールは、リスト 6 に示されています。

リスト 6: ニュース記事の表示に使用される SqlDataSource コントロール

<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
 ConnectionString="<%$ ConnectionStrings:ClubSiteDB %>"
 SelectCommand="PagedAnnouncementList" SelectCommandType="StoredProcedure" 
 OnSelected="SqlDataSource1_Selected">
   <SelectParameters>
      <asp:ControlParameter Name="pageNum" ControlID="pn1" 
       PropertyName="SelectedPage" />
      <asp:Parameter DefaultValue="10" Name="pageSize" Type="Int32" />
      <asp:Parameter Name="pageCount" Direction="ReturnValue" 
       Type="Int32" />
   </SelectParameters>
</asp:SqlDataSource>

この一覧から、この SqlDataSource コントロールが接続文字列を取得していることがわかります。これは、前に示した SqlDataSource コントロールの場合と同様です。 ファイルの セクションから接続文字列を<connectionStrings>web.config取得しています。 この SqlDataSource コントロールでは、インライン Select ステートメントを使用する代わりにストアド プロシージャを使用しています。 ストアド プロシージャを使用するには、 SqlDataSource コントロールで 属性を SelectCommandType 使用し、 の StoredProcedure値を指定します。 ストアド プロシージャが使用される select 操作の種類として宣言されたら、上記の例のように、ストアド プロシージャに属性の SelectCommand 値として名前を付けます。 この場合、この SqlDataSource コントロールでは、コマンドの Select 場合、コントロールは SQL Express ファイル内の PagedAnnouncementList ストアド プロシージャを検索する必要があることを示しています。

Visual Studio でフォルダーを clubsite.mdf 表示すると、そのサブフォルダーを開き、ストアド プロシージャ フォルダーを識別できます。 これを行うには、Visual Studio の [データベース エクスプローラー] タブを使用します。 これは図 19 に示されています。

図 19: ストアド プロシージャ フォルダーの表示

ストアド プロシージャを PagedAnnouncementList ダブルクリックして、Visual Studio のドキュメント ウィンドウで直接開きます。 これは図 20 に示されています。

図 20: PagedAnnouncementList ストアド プロシージャ

リスト 6 に示されている SqlDataSource コントロールのコードから、ストアド プロシージャに返されるパラメーターがいくつかあることがわかります。 注意すべき 1 つのパラメーターは、 pageSize パラメーターです。

<asp:Parameter DefaultValue="10" Name="pageSize" Type="Int32" />

このパラメーターは、既定でニュース ページに表示されるストーリーの数を定義するために使用されます。 ページ上のニュース記事の選択を小さくまたは大きくしたい場合は、この番号を自由に変更してください。

SqlDataSource コントロールが必要な SQL Express ファイルからニュース記事をプルすると、News_List.aspxページはバインド構文と共Evalに Repeater コントロールを使用して記事をページにプッシュします。

次のページ (フォト アルバム ページ) に移動してみましょう。

フォト アルバム ページ: PhotoAlbum_List.aspx

アプリケーションのナビゲーション ツール バーの [ 写真 ] リンクをクリックすると、[フォト アルバム] ページを表示できます。 このページには、ニュース記事が掲載されたのとほぼ同じ方法でフォト アルバムが一覧表示されます。 ページの例を図 21 に示します。

図 21: フォト アルバム ページ

フォト アルバムには、アルバムに配置された最初の画像の小さなサムネイルが表示され、エンド ユーザーにフォト アルバム全体を表示するためのリンクが表示されます。 アルバムのタイトルをクリックすると、アルバム全体が表示される別のページ (PhotoAlbum_Contents.aspx) にユーザーが転送されます。

ページのコードを PhotoAlbum_List.aspx 見ると、実際にはページと同じ方法 News_List.aspx で構築されていることがわかります。 実際、フォト アルバム情報を取り出す作業を行うページの SqlDataSource コントロールを見ると、この SqlDataSource コントロールと、この記事で前に確認したコントロールに大きな違いはありません。 でPhotoAlbum_List.aspx使用される SqlDataSource コントロールは、リスト 7 に示されています。

リスト 7: PhotoAlbum_List.aspx で使用される SqlDataSource コントロール

<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
 ConnectionString="<%$ ConnectionStrings:ClubsiteDB %>"
 SelectCommand="PagedAlbumList" SelectCommandType="StoredProcedure" 
 OnSelected="SqlDataSource1_Selected"
 OnSelecting="SqlDataSource1_Selecting">
   <SelectParameters>
      <asp:ControlParameter Name="pageNum" ControlID="pn1" 
       PropertyName="SelectedPage" />
      <asp:Parameter DefaultValue="16" Name="pageSize" Type="Int32" />
      <asp:Parameter Name="pageCount" Direction="ReturnValue" 
       Type="Int32" />
      <asp:Parameter Name="ownerid" />
   </SelectParameters>
</asp:SqlDataSource>

この一覧から、ページに 1 ページあたり 16 枚のフォト アルバムが表示されることがわかります PhotoAlbum_List.aspx 。 これを編集するには、このデータソース コントロールで使用される入力パラメーターを変更します。

エンド ユーザーがアルバムを選択して表示すると、アルバムに含まれるすべての画像のサムネイルとアルバムの最初の画像の大きなビューが表示されるページが表示されます。 これを図 22 に示します。

図 22: フォト アルバム

このページから、ユーザーはアルバムの画像をスクロールするか、任意の画像をダウンロードすることもできます。 画像をダウンロードするために、Club Web Site Starter Kit は http ハンドラー (ImageFetch.ashx) を使用して、イメージをデータベースからプルし、ダウンロードのためにストリーミングします。

アプリケーションの登録済みメンバーの表示: Member_List.aspx

この次のページは、アプリケーションに登録されているユーザーの場合にのみ表示されます。 アプリケーションの管理者として登録する必要はありませんが、何らかの方法で登録する必要があります。 ナビゲーション ツール バーの [メンバーシップ ] リンクをクリックし、指定したフォームに入力するだけで、すべてのユーザーがアプリケーションに実際に登録できます。 これを行うと、自動的にアプリケーションの登録済みメンバーに変わります。

ユーザーがアプリケーションに登録されると、そのユーザーの個人情報が [メンバー] ページに表示されます。 このページを図 23 に示します。

図 23: メンバー リスト

メンバー リストを使用すると、リストされたメンバーを [すべて表示] ビューまたは姓で表示できます。

このページのコードを見るとき、いくつかの興味深い点に注意してください。 最初に、メンバーのリストの上にあるアルファベットのリンクは 、SqlDataSource コントロールから駆動されます。 このコントロールと、このリンクリストの表示に使用されるコードは、リスト 8 に示されています。

リスト 8: アルファベットリストで使用可能なメンバーを取得する

<asp:LinkButton ID="showall" runat="server" Text="Show All" 
 OnClick="showall_Click" />
<asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:ClubSiteDB %>" 
 ID="SqlDataSource1" runat="server" SelectCommand="MemberCountByLetter" 
 SelectCommandType="StoredProcedure" />
<asp:Repeater DataSourceID="SqlDataSource1" ID="Repeater1" runat="server">
   <ItemTemplate>
      <asp:LinkButton ID="hp1" runat="server" Text='<%#Eval("letter")%>' 
       Visible='<%# CInt(Eval("num"))>0 %>' OnClick="hp1_Click" 
       CssClass='<%# LinkClass(CSTR(EVAL("letter")))%>' />
      <asp:Label ID="LinkButton1" runat="server" 
       Text='<%#Eval("letter")%>' Visible='<%# CInt(Eval("num"))=0 %>' />
   </ItemTemplate>
</asp:Repeater>

この場合、 SqlDataSource コントロールはストアド プロシージャを使用して、アルファベットの文字でメンバーの一覧を取得します。 取得されると、この情報は、Repeater コントロール内のデータ バインド構文ステートメントを使用してEvalページに表示されます。 Repeater コントロールの実際<ItemTemplate>のセクションには 2 つのコントロールがありますが、一度に表示されるのは 1 つだけです。 姓が特定の文字で始まるメンバーがある場合、 LinkButton コントロールの可視性は True に変わります。特定の文字で始まる姓を持つメンバーがない場合、文字は単純な Label コントロールでのみ表示されます。

メンバーの実際のリストは、このアプリケーションで取得される他の項目とは異なる方法で取得されます。 このページの場合、メンバーは、前に見た SqlDataSource コントロールではなく ObjectDataSource コントロールを使用して取得されます。

ObjectDataSource コントロールは、中間層コンポーネントからデータを取得するためのものです。 この場合、 ObjectDataSource1 このコントロールでは、 属性を TypeName 使用して、 という名前のクラスと、 という MemberDetails 名前のこのクラス内に含まれるメソッドを Getmembers指します。 このクラスは、アプリケーションの App_Code フォルダー内にあります。 ページが News_List.aspx 要求されると、 MemberDetails クラスは ObjectDataSource コントロールによって呼び出され、 などの <% Eval("PhotoURL") %>単純なバインディング構文を使用して指定された情報をバインドします。 これは、リスト 9 に示されています。

リスト 9: ObjectDataSource コントロールを使用してメンバー情報を取得する

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" 
 SelectMethod="Getmembers" TypeName="MemberDetails">
   <SelectParameters>
      <asp:Parameter DefaultValue="" Name="Filter" Type="String" />
   </SelectParameters>
</asp:ObjectDataSource>

次に、[メンバーシップ] ページを確認してみましょう。

メンバーシップ ページ: Member_Register.aspx

このページには、2 つのビューが表示されます。 エンド ユーザーがサイトに登録されていない場合は、登録フォームが表示されます (図 24)。

図 24: 新しいユーザー登録

このフォームには実際にはいくつかの手順があり、これらの各手順は、新しい ASP.NET 2.0 コントロールである CreateUserWizard コントロールを使用して制御されます。 このコントロールを使用すると、さまざまな種類の WizardStep コントロールを使用して定義された複数のステップ を実行 できます。

ユーザーがアプリケーションにログインしている場合は、個人情報を含むフォームが表示され、基になるデータを変更できます。 これは図 25 に示されています。

図 25: 連絡先の詳細を変更する

この図から、このページでは、エンド ユーザーが自分の個人情報を変更したり、自分の写真を追加したり、パスワードを変更したりする機会が提供されていることがわかります。

エンド ユーザーが移動する特定のページ ( Member_Register.aspx または Member_Details.aspx ページ) は、 というページ Member_Redirect.aspxによって決定されます。 これは、アプリケーションで認証されているかどうかに応じて、ユーザーを新しいページに誘導する単純なページです。 このページを見ると、イベントに含まれるページのすべてのロジックが Page_Load 表示されます。 これは、リスト 10 に記載されています。

一覧 10: ログイン状態に基づいてユーザーをリダイレクトする

[VB]

Protected Sub Page_Load(ByVal sender As Object, 
  ByVal e As System.EventArgs)
        If Page.User.Identity.IsAuthenticated Then
            Response.Redirect("member_details.aspx")
        Else
            Response.Redirect("member_register.aspx")
        End If
End Sub

[C#]

protected void Page_Load(object sender, System.EventArgs e)
{
   if (Page.User.Identity.IsAuthenticated)
   {
      Response.Redirect("member_details.aspx");
   }
   else
   {
      Response.Redirect("member_register.aspx");
   }
}

エンド ユーザーをリダイレクトするには、 オブジェクトを使用 Page.User.Identity.IsAuthenticated するだけです。 これにより、 True または False の値が提供され、ステートメントに If Then 適用できます。

静的ページ: Links.aspx と Contact.aspx

最後に見る 2 つのページは と Contact.aspxですLinks.aspx。 これらは、(すべてのページと同様に) ページを Default.master テンプレートとして使用する単純なコンテンツ ページです。 これら 2 つのページを図 26 に示します。

図 26: リンクと連絡先情報ページ

どちらのページも、カスタマイズするために変更する必要があるハードコーディングされたテキストで構成されています。

まとめ

クラブウェブサイトスターターキットは、いくつかの理由で有用で貴重です。 まず、クラブやorganizationのWebサイトをすばやく簡単に立ち上げることができます。 次に、さらに重要なのは、このスターター キットでは、ASP.NET 2.0 で見つかった新機能の一部と、基になる .NET Framework 2.0 によって提供される新機能の一部を示しています。

マスター ページから新しいコントロールまで、このアプリケーションから学ぶことがたくさんあります。 注意すべき重要な項目の一部は、ASP.NET 2.0 が提供する新しいメンバーシップとロール管理システムです。 これらの新しいセキュリティ システムを使用すると、アプリケーションへのアクセスを簡単に管理でき、一般的な方法でユーザーを認証するだけでなく、認証されたユーザーを異なるアクセス権を持つ特定のロールに配置することもできます。

●スターターキットは徹底的にカスタマイズしていただければと思って作られました。 カスタマイズは 、単に lorem ipsum テキストを変更するだけでなく、ロール、特権、新しいページ、新機能を追加する方法を確認する必要があります。 Club Web サイト スターター キットのカスタマイズの詳細については、補足記事「 Club Web サイト スターター キットの拡張」を参照してください。 楽しさと幸せなコーディングを持っています!

© Microsoft Corporation. All rights reserved.