次の方法で共有

マスター ページとサイト ナビゲーション (VB)

スコット・ミッチェル著

PDF をダウンロードする

ユーザー フレンドリな Web サイトの一般的な特徴の 1 つは、サイト全体のページ レイアウトとナビゲーション スキームが一貫していることです。 このチュートリアルでは、簡単に更新できるすべてのページで一貫した外観を作成する方法について説明します。

イントロダクション

ユーザー フレンドリな Web サイトの一般的な特徴の 1 つは、サイト全体のページ レイアウトとナビゲーション スキームが一貫していることです。 ASP.NET 2.0 では、サイト全体のページ レイアウトとナビゲーション スキームの実装を大幅に簡略化する 2 つの新機能 (マスター ページとサイト ナビゲーション) が導入されています。 マスター ページを使用すると、開発者は、指定された編集可能なリージョンを含むサイト全体のテンプレートを作成できます。 このテンプレートは、サイト内の ASP.NET ページに適用できます。 このような ASP.NET ページでは、マスター ページで指定された編集可能な領域のコンテンツのみを提供する必要があります。マスター ページ内の他のすべてのマークアップは、マスター ページを使用するすべての ASP.NET ページで同じです。 このモデルを使用すると、開発者はサイト全体のページ レイアウトを定義して一元化できるため、簡単に更新できるすべてのページで一貫した外観を簡単に作成できます。

サイト ナビゲーション システムには、ページ開発者がサイト マップを定義するためのメカニズムと、プログラムでクエリを実行するサイト マップ用の API の両方が用意されています。 新しいナビゲーション Web は、Menu、TreeView、SiteMapPath を制御するため、サイト マップのすべてまたは一部を共通のナビゲーション ユーザー インターフェイス要素に簡単にレンダリングできます。 既定のサイト ナビゲーション プロバイダーを使用します。つまり、サイト マップは XML 形式のファイルで定義されます。

これらの概念を説明し、チュートリアル Web サイトをより使いやすくするために、このレッスンでは、サイト全体のページ レイアウトの定義、サイト マップの実装、ナビゲーション UI の追加について説明します。 このチュートリアルの終わりまでに、チュートリアルの Web ページを構築するための洗練された Web サイトデザインが作成されます。

このチュートリアルの最終結果

図 1: このチュートリアルの最後の結果 (フルサイズの画像を表示する をクリックします)

手順 1: マスター ページの作成

最初の手順では、サイトのマスター ページを作成します。 現在、Web サイトは、Typed DataSet (Northwind.xsd、 App_Code フォルダー内)、BLL クラス (ProductsBLL.vb、 CategoriesBLL.vb など)、すべて App_Code フォルダー内)、データベース (NORTHWND.MDF、 App_Data フォルダー内)、構成ファイル (Web.config)、CSS スタイルシート ファイル (Styles.css) のみで構成されています。 最初の 2 つのチュートリアルから DAL と BLL を使用してデモを行うページとファイルをクリーンアップしました。今後のチュートリアルでこれらの例をさらに詳しく説明するためです。

プロジェクト内のファイル

図 2: プロジェクト内のファイル

マスター ページを作成するには、ソリューション エクスプローラーでプロジェクト名を右クリックし、[新しい項目の追加] を選択します。 次に、テンプレートの一覧からマスター ページの種類を選択し、 Site.master名前を付けます。

Web サイトに新しいマスター ページを追加する

図 3: Web サイトに新しいマスター ページを追加する (フルサイズの画像を表示する をクリックします)

マスター ページで、サイト全体のページ レイアウトを定義します。 デザイン ビューを使用して、必要なレイアウト コントロールや Web コントロールを追加したり、ソース ビューで手動でマークアップを追加したりできます。 私のマスターページでは、外部ファイルで定義されたCSS設定を使用して、配置とスタイルにStyle.cssを使用します。 以下に示すマークアップからは見分けられませんが、CSS ルールは、ナビゲーション <div>のコンテンツが絶対に配置され、左側に表示され、固定幅が 200 ピクセルになるように定義されています。

サイトマスター

<%@ Master Language="VB" AutoEventWireup="true"
    CodeFile="Site.master.vb" Inherits="Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Working with Data Tutorials</title>
    <link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="wrapper">

        <form id="form1" runat="server">

            <div id="header">
                <span class="title">Working with Data Tutorials</span>
                <span class="breadcrumb">
                 TODO: Breadcrumb will go here...</span>
            </div>

            <div id="content">
                <asp:contentplaceholder id="MainContent"
                  runat="server">
                  <!-- Page-specific content will go here... -->
                </asp:contentplaceholder>
            </div>

            <div id="navigation">
                TODO: Menu will go here...
            </div>
        </form>
    </div>
</body>
</html>

マスター ページは、静的ページ レイアウトと、マスター ページを使用する ASP.NET ページで編集できる領域の両方を定義します。 これらのコンテンツ編集可能な領域は ContentPlaceHolder コントロールによって示され、コンテンツ <div>内で表示できます。 マスター ページには 1 つの ContentPlaceHolder (MainContent) がありますが、マスター ページには複数の ContentPlaceHolder が含まれる場合があります。

上記のマークアップを入力すると、デザイン ビューに切り替えると、マスター ページのレイアウトが表示されます。 このマスター ページを使用する ASP.NET ページには、この均一なレイアウトが設定され、 MainContent 領域のマークアップを指定できます。

デザイン ビューで表示されるマスター ページ

図 4: マスター ページ、デザイン ビューで表示する場合 (フルサイズの画像を表示する をクリックします)。

手順 2: ホームページを Web サイトに追加する

マスター ページが定義されたら、Web サイトの ASP.NET ページを追加する準備ができました。 まず、web サイトのホームページである Default.aspx を追加します。 ソリューション エクスプローラーでプロジェクト名を右クリックし、[新しい項目の追加] を選択します。 テンプレートの一覧から [Web フォーム] オプションを選択し、ファイルに Default.aspx名前を付けます。 また、[マスター ページの選択] チェック ボックスをオンにします。

[マスター ページの選択] チェック ボックスをオンにして、新しい Web フォームを追加する

図 5: [マスター ページの選択] チェック ボックスをオンにして、新しい Web フォームを追加する (フルサイズの画像を表示する] をクリックします)

[OK] ボタンをクリックすると、この新しい ASP.NET ページで使用するマスター ページを選択するように求められます。 プロジェクトには複数のマスター ページを含めることができますが、1 つだけです。

この ASP.NET ページで使用するマスター ページを選択する

図 6: この ASP.NET ページで使用するマスター ページを選択する (フルサイズの画像を表示する] をクリックします)

マスター ページを選択すると、新しい ASP.NET ページに次のマークアップが含まれます。

Default.aspx

<%@ Page Language="VB" MasterPageFile="~/Site.master"
    AutoEventWireup="true" CodeFile="Default.aspx.vb"
    Inherits="_Default" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent"
  Runat="Server">
</asp:Content>

@Page ディレクティブには、使用されるマスター ページ ファイルへの参照 (MasterPageFile="~/Site.master") があり、ASP.NET ページのマークアップには、マスター ページで定義された各 ContentPlaceHolder コントロールの Content コントロールが含まれており、コントロールのContentPlaceHolderIDは Content コントロールを特定の ContentPlaceHolder にマッピングします。 Content コントロールは、対応する ContentPlaceHolder に表示するマークアップを配置する場所です。 @Page ディレクティブの Title 属性を Home に設定し、コンテンツ コントロールにいくつかのウェルカム コンテンツを追加します。

Default.aspx

<%@ Page Language="VB" MasterPageFile="~/Site.master"
    AutoEventWireup="true" CodeFile="Default.aspx.vb"
    Inherits="_Default" Title="Home" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent"
    Runat="Server">
    <h1>Welcome to the Working with Data Tutorial Site</h1>

    <p>This site is being built as part of a set of tutorials
      that illustrate some of the new data access and databinding
      features in ASP.NET 2.0 and Visual Web Developer.</p>

    <p>Over time, it will include a host of samples that
     demonstrate:</p>

    <ul>
        <li>Building a DAL (data access layer),</li>
        <li>Using strongly typed TableAdapters and DataTables</li>
        <li>Master-Detail reports</li>
        <li>Filtering</li>
        <li>Paging,</li>
        <li>Two-way databinding,</li>
        <li>Editing,</li>
        <li>Deleting,</li>
        <li>Inserting,</li>
        <li>Hierarchical data browsing,</li>
        <li>Hierarchical drill-down,</li>
        <li>Optimistic concurrency,</li>
        <li>And more!</li>
    </ul>
</asp:Content>

Title ディレクティブの@Page属性を使用すると、<title>要素がマスター ページで定義されている場合でも、ASP.NET ページからページのタイトルを設定できます。 Page.Titleを使用して、プログラムでタイトルを設定することもできます。 また、マスター ページのスタイルシートへの参照 ( Style.css など) は、マスター ページに対する ASP.NET ページの相対ディレクトリに関係なく、任意の ASP.NET ページで動作するように自動的に更新されることに注意してください。

デザイン ビューに切り替えると、ブラウザーでページがどのように表示されるかを確認できます。 ASP.NET ページのデザイン ビューでは、編集可能なコンテンツ領域のみが編集可能であることに注意してください。マスター ページで定義されている ContentPlaceHolder 以外のマークアップは淡色表示されます。

ASP.NET ページのデザイン ビューには、編集可能な領域と編集できない領域の両方が表示されます

図 7: ASP.NET ページのデザイン ビューには、編集可能な領域と編集できない領域の両方が表示されます (フルサイズの画像を表示する をクリックします)。

Default.aspx ページがブラウザーからアクセスされると、ASP.NET エンジンによって、ページのマスターページのコンテンツとASP.NETのコンテンツが自動的に統合され、マージされたコンテンツが要求したブラウザーに送信される最終的なHTMLとしてレンダリングされます。 マスター ページのコンテンツが更新されると、このマスター ページを使用するすべての ASP.NET ページは、次回要求されたときに新しいマスター ページ コンテンツでコンテンツが再表示されます。 つまり、マスター ページ モデルを使用すると、変更がサイト全体にすぐに反映される単一ページ レイアウト テンプレート (マスター ページ) を定義できます。

WebサイトへASP.NETページを追加する

さまざまなレポートデモを最終的に保持するサイトに ASP.NET ページ スタブを追加してみましょう。 合計で 35 を超えるデモがあるため、すべてのスタブ ページを作成するのではなく、最初の数ページを作成してみましょう。 デモの多くのカテゴリも存在するため、デモをより適切に管理するために、カテゴリのフォルダーを追加します。 ここでは、次の 3 つのフォルダーを追加します。

  • BasicReporting
  • Filtering
  • CustomFormatting

最後に、図 8 のソリューション エクスプローラーに示すように、新しいファイルを追加します。 各ファイルを追加するときは、必ず [マスター ページの選択] チェック ボックスをオンにします。

次のファイルを追加する

図 8: 次のファイルを追加する

手順 2: サイト マップの作成

少数のページで構成される Web サイトを管理する際の課題の 1 つは、訪問者がサイト内を移動するための簡単な方法を提供することです。 最初に、サイトのナビゲーション構造を定義する必要があります。 次に、この構造体をナビゲーション可能なユーザー インターフェイス要素 (メニューや階層リンクなど) に変換する必要があります。 最後に、新しいページがサイトに追加され、既存のページが削除されたら、このプロセス全体を維持および更新する必要があります。 ASP.NET 2.0 より前のバージョンでは、開発者はサイトのナビゲーション構造を作成し、維持し、ナビゲーション可能なユーザー インターフェイス要素に変換していました。 ただし、ASP.NET 2.0 では、開発者は非常に柔軟な組み込みのサイト ナビゲーション システムを利用できます。

ASP.NET 2.0 サイト ナビゲーション システムは、開発者がサイト マップを定義し、プログラム API を使用してこの情報にアクセスするための手段を提供します。 ASP.NET、サイト マップ データが特定の方法で書式設定された XML ファイルに格納されることを想定するサイト マップ プロバイダーに付属しています。 ただし、サイト ナビゲーション システムは プロバイダー モデル に基づいて構築されているため、サイト マップ情報をシリアル化する別の方法をサポートするように拡張できます。 Jeff Prosise の記事「 The SQL Site Map Provider You've Been Waiting For 」では、サイト マップを SQL Server データベースに格納するサイト マップ プロバイダを作成する方法を示しています。

ただし、このチュートリアルでは、ASP.NET 2.0 に付属する既定のサイト マップ プロバイダーを使用してみましょう。 サイト マップを作成するには、ソリューション エクスプローラーでプロジェクト名を右クリックし、[新しい項目の追加] を選択し、[サイト マップ] オプションを選択します。 名前は Web.sitemap のままにして、[追加] ボタンをクリックします。

プロジェクトにサイト マップを追加する

図 9: プロジェクトにサイト マップを追加する (フルサイズの画像を表示する をクリックします)

サイト マップ ファイルは XML ファイルです。 Visual Studio では、サイト マップ構造に IntelliSense が提供されることに注意してください。 サイト マップ ファイルにはルート ノードとして <siteMap> ノードが必要です。このノードには、 <siteMapNode> 子要素が正確に 1 つ含まれている必要があります。 その最初の <siteMapNode> 要素には、任意の数の子孫 <siteMapNode> 要素を含めることができます。

ファイル システム構造を模倣するサイト マップを定義します。 つまり、次のように、3 つのフォルダーごとに <siteMapNode> 要素を追加し、それらのフォルダー内の各 ASP.NET ページの子 <siteMapNode> 要素を追加します。

ウェブサイト.サイトマップ

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

  <siteMapNode url="~/Default.aspx" title="Home" description="Home">
      <siteMapNode title="Basic Reporting"
        url="~/BasicReporting/Default.aspx"
        description="Basic Reporting Samples">
        <siteMapNode url="~/BasicReporting/SimpleDisplay.aspx"
         title="Simple Display"
         description="Displays the complete contents
          of a database table." />
        <siteMapNode url="~/BasicReporting/DeclarativeParams.aspx"
          title="Declarative Parameters"
          description="Displays a subset of the contents
            of a database table using parameters." />
        <siteMapNode url="~/BasicReporting/ProgrammaticParams.aspx"
         title="Setting Parameter Values"
         description="Shows how to set parameter values
          programmatically." />
      </siteMapNode>

      <siteMapNode title="Filtering Reports"
       url="~/Filtering/Default.aspx"
       description="Samples of Reports that Support Filtering">
        <siteMapNode url="~/Filtering/FilterByDropDownList.aspx"
          title="Filter by Drop-Down List"
          description="Filter results using a drop-down list." />
        <siteMapNode url="~/Filtering/MasterDetailsDetails.aspx"
         title="Master-Details-Details"
         description="Filter results two levels down." />
        <siteMapNode url="~/Filtering/DetailsBySelecting.aspx"
          title="Details of Selected Row"
          description="Show detail results for a selected item in a GridView." />
      </siteMapNode>

      <siteMapNode title="Customized Formatting"
         url="~/CustomFormatting/Default.aspx"
         description="Samples of Reports Whose Formats are Customized">
        <siteMapNode url="~/CustomFormatting/CustomColors.aspx"
         title="Format Colors"
         description="Format the grid s colors based
           on the underlying data." />
        <siteMapNode
          url="~/CustomFormatting/GridViewTemplateField.aspx"
          title="Custom Content in a GridView"
          description="Shows using the TemplateField to
          customize the contents of a field in a GridView." />
        <siteMapNode
          url="~/CustomFormatting/DetailsViewTemplateField.aspx"
          title="Custom Content in a DetailsView"
          description="Shows using the TemplateField to customize
           the contents of a field in a DetailsView." />
        <siteMapNode url="~/CustomFormatting/FormView.aspx"
          title="Custom Content in a FormView"
          description="Illustrates using a FormView for a
           highly customized view." />
        <siteMapNode url="~/CustomFormatting/SummaryDataInFooter.aspx"
          title="Summary Data in Footer"
          description="Display summary data in the grids footer." />
      </siteMapNode>

  </siteMapNode>

</siteMap>

サイト マップは、Web サイトのナビゲーション構造を定義します。これは、サイトのさまざまなセクションを記述する階層です。 <siteMapNode>の各Web.sitemap要素は、サイトのナビゲーション構造のセクションを表します。

サイト マップは階層ナビゲーション構造を表します

図 10: サイト マップは階層ナビゲーション構造を表します (フルサイズの画像を表示する をクリックします)。

ASP.NET は、.NET Framework の SiteMap クラスを介してサイト マップの構造を公開します。 このクラスには、ユーザーが現在アクセスしているセクションに関する情報を返す CurrentNode プロパティがあります。 RootNode プロパティは、サイト マップのルート (ホーム、サイト マップ内) を返します。 CurrentNodeプロパティとRootNode プロパティの両方が SiteMapNode インスタンスを返します。SiteMapNode インスタンスには、サイト マップ階層のウォークを可能にする、ParentNode、ChildNodes、NextSibling、PreviousSiblingなどのプロパティがあります。

手順 3: サイト マップに基づいてメニューを表示する

ASP.NET 2.0 のデータへのアクセスは、ASP.NET 1.x のようにプログラムで、または新しい データ ソース コントロールを使用して宣言によって実行できます。 リレーショナル データベース データにアクセスするための SqlDataSource コントロール、ObjectDataSource コントロール、クラスからのデータへのアクセス用など、いくつかの組み込みのデータ ソース コントロールがあります。 独自の カスタム データ ソース コントロールを作成することもできます。

データ ソース コントロールは、ASP.NET ページと基になるデータの間のプロキシとして機能します。 データ ソース コントロールの取得したデータを表示するために、通常は別の Web コントロールをページに追加し、データ ソース コントロールにバインドします。 Web コントロールをデータ ソース コントロールにバインドするには、Web コントロールの DataSourceID プロパティをデータ ソース コントロールの ID プロパティの値に設定するだけです。

サイト マップのデータの操作を支援するために、ASP.NET には SiteMapDataSource コントロールが含まれており、Web コントロールを Web サイト マップにバインドできます。 TreeView と Menu の 2 つの Web コントロールは、ナビゲーション ユーザー インターフェイスを提供するために一般的に使用されます。 サイト マップ データをこれら 2 つのコントロールのいずれかにバインドするには、それに応じて DataSourceID プロパティが設定されている TreeView コントロールまたは Menu コントロールと共に SiteMapDataSource をページに追加するだけです。 たとえば、次のマークアップを使用して、Menu コントロールをマスター ページに追加できます。

<div id="navigation">
    <asp:Menu ID="Menu1" runat="server"
      DataSourceID="SiteMapDataSource1">
    </asp:Menu>

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

出力された HTML をより細かく制御するには、次のように SiteMapDataSource コントロールを Repeater コントロールにバインドします。

<div id="navigation">
    <ul>
        <li><asp:HyperLink runat="server" ID="lnkHome"
         NavigateUrl="~/Default.aspx">Home</asp:HyperLink></li>

        <asp:Repeater runat="server" ID="menu"
          DataSourceID="SiteMapDataSource1">
            <ItemTemplate>
                <li>
                    <asp:HyperLink runat="server"
                    NavigateUrl='<%# Eval("Url") %>'>
                    <%# Eval("Title") %></asp:HyperLink>
                </li>
            </ItemTemplate>
        </asp:Repeater>
    </ul>

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

SiteMapDataSource コントロールは、ルート サイト マップ ノード (ホーム、サイト マップ内)、次のレベル (基本レポート、フィルター レポート、およびカスタマイズされた書式設定) から始まる、サイト マップ階層を一度に 1 レベルずつ返します。 SiteMapDataSource を Repeater にバインドすると、返された最初のレベルが列挙され、その第 1 レベルの各ItemTemplate インスタンスのSiteMapNodeがインスタンス化されます。 SiteMapNodeの特定のプロパティにアクセスするには、hyperLink コントロールの各Eval(propertyName)のSiteMapNodeプロパティとUrlプロパティを取得する方法であるTitleを使用します。

上記の Repeater の例では、次のマークアップがレンダリングされます。

<li>
    <a href="/Code/BasicReporting/Default.aspx">Basic Reporting</a>
</li>

<li>
    <a href="/Code/Filtering/Default.aspx">Filtering Reports</a>
</li>

<li>
    <a href="/Code/CustomFormatting/Default.aspx">
      Customized Formatting</a>
</li>

これらのサイト マップ ノード (基本レポート、フィルター レポート、およびカスタマイズされた書式設定) は、最初ではなく、レンダリングされるサイト マップの 2 番目 のレベルで構成されます。 これは、SiteMapDataSource の ShowStartingNode プロパティが False に設定されているためです。これにより、SiteMapDataSource はルート サイト マップ ノードをバイパスし、代わりにサイト マップ階層内の第 2 レベルを返します。

基本レポート、フィルター レポート、およびカスタマイズされた書式設定 SiteMapNode の子を表示するには、最初の Repeater の ItemTemplateに別の Repeater を追加します。 この 2 番目の Repeater は、次のように、 SiteMapNode インスタンスの ChildNodes プロパティにバインドされます。

<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1">
    <ItemTemplate>
        <li>
            <asp:HyperLink runat="server"
             NavigateUrl='<%# Eval("Url") %>'>
             <%# Eval("Title") %></asp:HyperLink>

            <asp:Repeater runat="server"
             DataSource="<%# CType(Container.DataItem,
             SiteMapNode).ChildNodes %>">
                <HeaderTemplate>
                    <ul>
                </HeaderTemplate>

                <ItemTemplate>
                    <li>
                        <asp:HyperLink runat="server"
                         NavigateUrl='<%# Eval("Url") %>'>
                         <%# Eval("Title") %></asp:HyperLink>
                    </li>
                </ItemTemplate>

                <FooterTemplate>
                    </ul>
                </FooterTemplate>
            </asp:Repeater>
        </li>
    </ItemTemplate>
</asp:Repeater>

これら 2 つの Repeaters は、次のマークアップになります (簡潔にするために一部のマークアップが削除されています)。

<li>
    <a href="/Code/BasicReporting/Default.aspx">Basic Reporting</a>
    <ul>
       <li>
          <a href="/Code/BasicReporting/SimpleDisplay.aspx">
           Simple Display</a>
       </li>
       <li>
          <a href="/Code/BasicReporting/DeclarativeParams.aspx">
           Declarative Parameters</a>
       </li>
       <li>
          <a href="/Code/BasicReporting/ProgrammaticParams.aspx">
           Setting Parameter Values</a>
       </li>
    </ul>
</li>

<li>
    <a href="/Code/Filtering/Default.aspx">Filtering Reports</a>
    ...
</li>

<li>
    <a href="/Code/CustomFormatting/Default.aspx">
        Customized Formatting</a>
    ...
</li>

Rachel Andrew の書籍「CSS Anthology: 101 Essential Tips, Tricks, & Hacks」から選択された CSS スタイルを使用して、<ul>要素と<li>要素は、マークアップが次の視覚的出力を生成するようにスタイル付けされています。

2 つのリピーターといくつかの CSS から構成されたメニュー

図 11: 2 つのリピーターと一部の CSS から構成されるメニュー

このメニューはマスター ページにあり、 Web.sitemapで定義されているサイト マップにバインドされます。つまり、サイト マップへの変更は、 Site.master マスター ページを使用するすべてのページに直ちに反映されます。

ViewState の無効化

すべての ASP.NET コントロールは、必要に応じて、表示された HTML の非表示フォーム フィールドとしてシリアル化される ビューステートに状態を保持できます。 ビューステートは、データ Web コントロールにバインドされたデータなど、ポストバック間でプログラムによって変更された状態を記憶するためにコントロールによって使用されます。 ビューステートはポストバック間で情報を記憶することを許可しますが、クライアントに送信する必要があるマークアップのサイズが増加し、厳密に監視しないとページの肥大化が深刻化する可能性があります。 データ Web コントロール、特に GridView は、ページに数十キロバイトのマークアップを追加する場合に特に悪名高い機能です。 このような増加はブロードバンド またはイントラネット ユーザーにはごくわずかですが、ビューステートはダイヤルアップ ユーザーのラウンド トリップに数秒を追加できます。

ビューステートの影響を確認するには、ブラウザーでページにアクセスし、Web ページによって送信されたソースを表示します (Internet Explorer で、[表示] メニューに移動し、[ソース] オプションを選択します)。 ページ トレースを有効にして、ページ上の各コントロールによって使用されるビューステートの割り当てを確認することもできます。 ビュー ステート情報は、__VIEWSTATEという名前の非表示のフォーム フィールドでシリアル化され、開始<div> タグの直後の<form>要素に配置されます。 ビューステートは、使用されている Web フォームがある場合にのみ保持されます。ASP.NET ページの宣言構文に <form runat="server"> が含まれていない場合、レンダリングされたマークアップに __VIEWSTATE 非表示のフォーム フィールドはありません。

マスター ページによって生成された __VIEWSTATE フォーム フィールドは、ページの生成されたマークアップに約 1,800 バイトを追加します。 この余分な肥大化は、主に Repeater コントロールに起因します。SiteMapDataSource コントロールの内容はビューステートに保持されるためです。 追加の 1,800 バイトはそれほど大したことには見えないかもしれませんが、多くのフィールドとレコードを含むGridViewを使用すると、ビュー状態が10 倍以上に簡単に膨れ上がる可能性があります。

EnableViewState プロパティを False に設定することで、ページまたはコントロール レベルでビューステートを無効にして、レンダリングされるマークアップのサイズを縮小できます。 データ Web コントロールのビューステートはポストバック間でデータ Web コントロールにバインドされたデータを保持するため、データ Web コントロールのビューステートを無効にする場合は、各ポストバックでデータをバインドする必要があります。 ASP.NET バージョン1.xでは、この責任はページ開発者の肩に落ちました。ただし、ASP.NET 2.0 では、必要に応じて、データ Web コントロールは各ポストバックのデータ ソース コントロールに再バインドされます。

ページの表示状態を減らすには、Repeater コントロールの EnableViewState プロパティを Falseに設定します。 これを行うには、デザイナーの [プロパティ] ウィンドウを使用するか、ソース ビューで宣言を使用します。 この変更を行った後、Repeater の宣言型マークアップは次のようになります。

<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1"
    EnableViewState="False">
    <ItemTemplate>
        ... <i>ItemTemplate contents omitted for brevity</i> ...
    </ItemTemplate>
</asp:Repeater>

この変更後、ページのレンダリングされたビューステートサイズはわずか52バイトに縮小され、ビューステートサイズが97% 節約されます。 このシリーズ全体のチュートリアルでは、レンダリングされるマークアップのサイズを小さくするために、既定でデータ Web コントロールのビューステートを無効にします。 ほとんどの例では、 EnableViewState プロパティは False に設定され、言及せずに行われます。 説明する唯一の時間ビューステートは、データ Web コントロールが期待される機能を提供するために有効にする必要があるシナリオです。

手順 4: 階層リンク ナビゲーションを追加する

マスター ページを完成させるために、各ページに階層リンク ナビゲーション UI 要素を追加しましょう。 階層リンクは、ユーザーがサイト階層内の現在の位置をすばやく表示します。 ASP.NET 2.0 に階層リンクを追加するのは、SiteMapPath コントロールをページに追加するだけで簡単です。コードは必要ありません。

このサイトでは、ヘッダー <div>にこのコントロールを追加します。

<span class="breadcrumb">
    <asp:SiteMapPath ID="SiteMapPath1" runat="server">
    </asp:SiteMapPath>
</span>

パンくずリストには、ユーザーが訪れているサイトマップ階層内の現在のページと、そのサイトマップノードの上位階層がルート（サイトマップ内のホームページ）まで表示されます。

パンくずリストは、サイトマップ階層の中の現在のページとその親ページを表示します。

図 12: パンくずリストは、サイトマップ階層内の現在のページとその先祖を示します。

手順 5: 各セクションの既定のページを追加する

このサイトのチュートリアルは、基本レポート、フィルター処理、カスタム書式設定などのさまざまなカテゴリに分類され、各カテゴリのフォルダーと、そのフォルダー内の ASP.NET ページとして対応するチュートリアルが含まれています。 さらに、各フォルダーには Default.aspx ページが含まれています。 この既定のページでは、現在のセクションのすべてのチュートリアルを表示しましょう。 つまり、Default.aspx フォルダー内のBasicReportingには、SimpleDisplay.aspx、DeclarativeParams.aspx、およびProgrammaticParams.aspxへのリンクがあります。 ここでも、 SiteMap クラスとデータ Web コントロールを使用して、 Web.sitemapで定義されているサイト マップに基づいてこの情報を表示できます。

リピータを使用して順序付けされていないリストをもう一度表示してみましょうが、今回はチュートリアルのタイトルと説明を表示します。 これを実現するためのマークアップとコードは Default.aspx ページごとに繰り返す必要があるため、この UI ロジックを ユーザー コントロールにカプセル化できます。 web サイトに UserControls という名前のフォルダーを作成し、その新しいアイテムに SectionLevelTutorialListing.ascx という名前の Web ユーザー コントロール型の新しい項目を追加し、次のマークアップを追加します。

UserControls フォルダーに新しい Web ユーザー コントロールを追加する

図 13: UserControls フォルダーに新しい Web ユーザー コントロールを追加します (フルサイズの画像を表示する をクリックします)。

セクションレベルチュートリアルリスト.ascx

<%@ Control Language="VB" AutoEventWireup="true"
    CodeFile="SectionLevelTutorialListing.ascx.vb"
    Inherits="UserControls_SectionLevelTutorialListing" %>
<asp:Repeater ID="TutorialList" runat="server" EnableViewState="False">
    <HeaderTemplate><ul></HeaderTemplate>
    <ItemTemplate>
        <li><asp:HyperLink runat="server"
         NavigateUrl='<%# Eval("Url") %>'
         Text='<%# Eval("Title") %>'></asp:HyperLink>
                - <%# Eval("Description") %></li>
    </ItemTemplate>
    <FooterTemplate></ul></FooterTemplate>
</asp:Repeater>

SectionLevelTutorialListing.ascx.vb

Partial Class UserControls_SectionLevelTutorialListing 
    Inherits UserControl

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If SiteMap.CurrentNode IsNot Nothing Then
            TutorialList.DataSource = SiteMap.CurrentNode.ChildNodes
            TutorialList.DataBind()
        End If
    End Sub
End Class

前の Repeater の例では、 SiteMap データを宣言によって Repeater にバインドしました。ただし、 SectionLevelTutorialListing ユーザー コントロールはプログラムによってバインドします。 Page_Load イベント ハンドラーでは、このページの URL がサイト マップ内のノードにマップされていることを確認するチェックが行われます。 対応する <siteMapNode> エントリがないページでこのユーザー コントロールが使用されている場合、 SiteMap.CurrentNode は Nothing を返し、データは Repeater にバインドされません。 CurrentNodeがあると仮定すると、そのChildNodesコレクションを Repeater にバインドします。 このサイト マップは、各セクションの Default.aspx ページがそのセクション内のすべてのチュートリアルの親ノードになるように設定されているため、次のスクリーン ショットに示すように、このコードには、セクションのすべてのチュートリアルへのリンクと説明が表示されます。

この Repeater が作成されたら、各フォルダーの Default.aspx ページを開き、[デザイン] ビューに移動し、ソリューション エクスプローラーからチュートリアルリストを表示するデザイン画面にユーザー コントロールをドラッグします。

ユーザー コントロールがDefault.aspxに追加されました

図 14: ユーザー コントロールが Default.aspx に追加されました (フルサイズの画像を表示する をクリックします)。

基本的なレポート作成チュートリアルが一覧表示されます

図 15: 基本的なレポートのチュートリアルが一覧表示されます (フルサイズの画像を表示する をクリックします)。

概要

サイト マップが定義され、マスター ページが完成したので、データ関連のチュートリアルで一貫したページ レイアウトとナビゲーション スキームを使用できるようになりました。 サイトに追加するページの数に関係なく、サイト全体のページ レイアウトまたはサイト ナビゲーション情報を更新することは、この情報が一元化されるため、迅速かつ簡単なプロセスです。 具体的には、ページ レイアウト情報はマスター ページ Site.master で定義され、サイト マップは Web.sitemapで定義されます。 このサイト全体のページ レイアウトとナビゲーション メカニズムを実現 するためにコードを 記述する必要はありませんでした。また、Visual Studio では WYSIWYG デザイナーの完全なサポートを保持しています。

データ アクセス層とビジネス ロジック層を完了し、一貫性のあるページ レイアウトとサイト ナビゲーションを定義したので、一般的なレポート パターンの調査を開始する準備ができました。 次の 3 つのチュートリアルでは、GridView、DetailsView、FormView コントロールの BLL から取得したデータを表示する基本的なレポート タスクについて説明します。

プログラミングに満足!

もっと読む

この記事で説明したトピックの詳細については、次のリソースを参照してください。

著者について

7 冊の ASP/ASP.NET 書籍の著者であり、4GuysFromRolla.com の創設者である Scott Mitchell は、1998 年から Microsoft Web テクノロジを使用しています。 Scott は、独立したコンサルタント、トレーナー、ライターとして働いています。 彼の最新の本は サムズ・ティーチ・セルフ ASP.NET 24時間で2.0です。 彼には mitchell@4GuysFromRolla.comで連絡できます。

特別な感謝

このチュートリアル シリーズは、多くの役に立つ校閲者によってレビューされました。 このチュートリアルのリード レビュー担当者は、Liz Shulok、Dennis Patterson、Hilton Giesenow でした。 今後の MSDN の記事を確認することに関心がありますか? その場合は、mitchell@4GuysFromRolla.comにメッセージを送ってください。

前の