Share via

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

  • [アーティクル]

作成者: Scott Mitchell

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、データベース (フォルダー内App_Data)、構成ファイル (NORTHWND.MDF)、CSS スタイルシート ファイル (Web.configStyles.css) のみで構成されています。 最初の 2 つのチュートリアルから DAL と BLL を使用してデモを行うページとファイルをクリーンアップしました。今後のチュートリアルでこれらの例を詳しく説明します。

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

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

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

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

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

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

Site.master

<%@ 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 コントロールが含まれており、コントロールの Content コントロールは特定の ContentPlaceHolderID ContentPlaceHolder にマッピングされます。 Content コントロールは、対応する ContentPlaceHolder に表示するマークアップを配置する場所です。 ディレクティブの Title 属性を @Page 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 ページは、次回要求されたときに新しいマスター ページ コンテンツでコンテンツが再表示されます。 つまり、マスター ページ モデルを使用すると、1 つのページ レイアウト テンプレート (マスター ページ) を定義し、その変更がサイト全体にすぐに反映されます。

その他の ASP.NET ページを Web サイトに追加する

しばらく時間を取って、最終的にさまざまなレポート デモを保持する 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 の記事「待っている SQL サイト マップ プロバイダー」では、サイト マップをSQL Server データベースに格納するサイト マップ プロバイダーを作成する方法を示しています。

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

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

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

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

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

Web.sitemap

<?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 サイトのナビゲーション構造を定義します。 のWeb.sitemap各<siteMapNode>要素は、サイトのナビゲーション構造のセクションを表します。

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

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

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

手順 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 つのコントロールのいずれかにバインドするには、SiteMapDataSource を、それに応じてプロパティが設定された TreeView コントロールまたは Menu コントロール DataSourceID と共にページに追加するだけです。 たとえば、次のマークアップを使用して、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 にバインドすると、返された最初のレベルが列挙され、その最初のレベルの各SiteMapNodeインスタンスの がインスタンス化ItemTemplateされます。 の特定のプロパティにSiteMapNodeアクセスするには、 を使用Eval(propertyName)できます。これは、HyperLink コントロールの Url 各 SiteMapNodeプロパティと 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 の に別の ItemTemplateRepeater を追加します。 この 2 番目の Repeater は、次のようにインスタンスの ChildNodes プロパティにSiteMapNodeバインドされます。

<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 スタイルを使用して、 要素と <li> 要素のスタイルを設定すると、<ul>マークアップによって次の視覚的出力が生成されます。

2 つのリピーターと一部の CSS で構成されたメニュー

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

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

ViewState の無効化

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

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

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

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

ページの表示状態を小さくするには、Repeater コントロールの EnableViewState プロパティを に False設定します。 これは、Designerのプロパティ ウィンドウを使用するか、ソース ビューで宣言によって行うことができます。 この変更を行った後、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.aspxDeclarativeParams.aspxProgrammaticParams.aspxリンクがあります。 ここでも、 クラスとデータ Web コントロールを SiteMap 使用して、 で Web.sitemap定義されているサイト マップに基づいてこの情報を表示できます。

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

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

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

SectionLevelTutorialListing.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>エントリを持たないページで使用されている場合、 は を返Nothingし、SiteMap.CurrentNodeデータは Repeater にバインドされません。 があると仮定して、 CurrentNodeコレクションを ChildNodes Repeater にバインドします。 このサイト マップは、各セクションのページがそのセクション内のすべてのチュートリアルの親ノードになるように Default.aspx 設定されているため、このコードでは、次のスクリーン ショットに示すように、セクションのすべてのチュートリアルへのリンクと説明が表示されます。

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

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

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

基本的なレポートチュートリアルの一覧

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

まとめ

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

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

幸せなプログラミング!

もっと読む

このチュートリアルで説明するトピックの詳細については、次のリソースを参照してください。

著者について

7 冊の ASP/ASP.NET 書籍の著者であり、 4GuysFromRolla.com の創設者である Scott Mitchell は、1998 年から Microsoft Web テクノロジと協力しています。 Scott は、独立したコンサルタント、トレーナー、ライターとして働いています。 彼の最新の本は サムズは24時間で2.0 ASP.NET 自分自身を教えています。 にアクセスするか、ブログを使用して にアクセスmitchell@4GuysFromRolla.comできます。これは でhttp://ScottOnWriting.NET見つけることができます。

特別な感謝

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

[戻る]