Эталонные страницы и структура навигации веб-сайта (C#)

  • Статья

Скотт Митчелл

Загрузить PDF-файл

Одной из общих характеристик удобных веб-сайтов является то, что они имеют согласованный макет страницы на уровне сайта и схему навигации. В этом руководстве рассматривается, как создать согласованный внешний вид на всех страницах, которые можно легко обновить.

Введение

Одной из общих характеристик удобных веб-сайтов является то, что они имеют согласованный макет страницы на уровне сайта и схему навигации. в ASP.NET 2.0 представлены две новые функции, которые значительно упрощают реализацию макета страницы на уровне сайта и схемы навигации: master страниц и навигации по сайту. Главные страницы позволяют разработчикам создавать шаблон для всего сайта с назначенными редактируемыми регионами. Затем этот шаблон можно применить к ASP.NET страницам сайта. Такие ASP.NET страницы должны предоставлять содержимое только для указанных редактируемых областей master страницы. Все остальные разметки на странице master идентичны на всех ASP.NET страницах, использующих страницу master. Эта модель позволяет разработчикам определять и централизировать макет страницы на уровне сайта, тем самым упрощая создание единообразного внешнего вида на всех страницах, которые можно легко обновить.

Система навигации сайта предоставляет разработчикам страниц как механизм определения карты сайта, так и API для программного запроса этой карты сайта. Новый веб-интерфейс навигации управляет Menu, TreeView и SiteMapPath, что упрощает отрисовку всей карты сайта или ее части в общем элементе пользовательского интерфейса навигации. Мы будем использовать поставщик навигации по умолчанию, то есть карта сайта будет определена в XML-файле.

Чтобы проиллюстрировать эти понятия и сделать наш веб-сайт учебников более пригодным для использования, давайте проведем этот урок, определим макет страницы на уровне сайта, реализуем карту сайта и добавляем пользовательский интерфейс навигации. К концу этого руководства у нас будет отточеный дизайн веб-сайта для создания веб-страниц учебника.

Конечный результат работы с этим руководством

Рис. 1. Конечный результат этого руководства (щелкните, чтобы просмотреть полноразмерное изображение)

Шаг 1. Создание главной страницы

Первым шагом является создание страницы master для сайта. Сейчас наш веб-сайт состоит только из типизированного набора данных (Northwind.xsdв App_Code папке), классов BLL (ProductsBLL.cs, CategoriesBLL.csи т. д.), App_Code базы данных (NORTHWND.MDFв App_Data папке), файла конфигурации (Web.config) и файла таблицы стилей CSS (Styles.css). Я очистил эти страницы и файлы, демонстрирующие использование DAL и BLL из первых двух учебников, так как мы будем повторно рассматривать эти примеры более подробно в будущих учебниках.

Файлы в нашем проекте

Рис. 2. Файлы в нашем проекте

Чтобы создать страницу master, щелкните правой кнопкой мыши имя проекта в Обозреватель решений и выберите пункт Добавить новый элемент. Затем выберите тип главной страницы из списка шаблонов и назовите его Site.master.

Добавление новой главной страницы на веб-сайт

Рис. 3. Добавление новой главной страницы на веб-сайт (щелкните для просмотра полноразмерного изображения)

Определите макет страницы на уровне сайта на странице master. Вы можете использовать режим конструктора и добавить любые необходимые элементы управления макетом или веб-сайтом или вручную добавить разметку в представлении источника. На странице master я использую каскадные таблицы стилей для размещения и стилей с параметрами CSS, определенными во внешнем файле Style.css. Хотя вы не можете определить из приведенной ниже разметки, правила CSS определяются таким образом, чтобы содержимое навигации <div>было абсолютно расположено так, чтобы оно отображалось слева и имеет фиксированную ширину 200 пикселей.

Site.master

<%@ Master Language="C#" AutoEventWireup="true"
    CodeFile="Site.master.cs" 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>

Страница master определяет как статический макет страницы, так и регионы, которые могут быть изменены ASP.NET страницами, которые используют страницу master. Эти редактируемые области содержимого указываются элементом управления ContentPlaceHolder, который можно увидеть в содержимом <div>. Наша master страница имеет один ContentPlaceHolder (MainContent), но master страницы может иметь несколько ContentPlaceHolders.

Если ввести разметку выше, при переключении в режим конструктора отображается макет страницы master. Все ASP.NET страницы, использующие эту master страницу, будут иметь такой унифицированный макет с возможностью указать разметку MainContent для региона.

Эталонная страница при просмотре в режиме конструктора

Рис. 4. Эталонная страница при просмотре в режиме конструктора (щелкните, чтобы просмотреть полноразмерное изображение)

Шаг 2. Добавление домашней страницы на веб-сайт

Определив страницу master, мы готовы добавить страницы ASP.NET для веб-сайта. Начнем с добавления Default.aspxдомашней страницы нашего веб-сайта. Щелкните правой кнопкой мыши имя проекта в Обозреватель решений и выберите команду Добавить новый элемент. Выберите параметр Веб-форма в списке шаблонов и назовите файл Default.aspx. Кроме того, проверка флажок "Выбрать страницу master".

Добавление новой веб-формы, установка флажка

Рис. 5. Добавление новой веб-формы, установка флажка Выбрать страницу master (щелкните для просмотра полноразмерного изображения)

После нажатия кнопки ОК нам будет предложено выбрать, какую страницу master должна использовать эта новая страница ASP.NET. Хотя в проекте может быть несколько master страниц, у нас есть только одна.

Выберите главную страницу, ASP.NET страницу, для использования

Рис. 6. Выбор главной страницы ASP.NET страницы( Щелкните для просмотра полноразмерного изображения)

После выбора страницы master новые страницы ASP.NET будут содержать следующую разметку:

Default.aspx

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

В директиве @Page есть ссылка на используемый файл master страницы (MasterPageFile="~/Site.master"), а разметка страницы ASP.NET содержит элемент управления Контентом для каждого элемента управления ContentPlaceHolder, определенного на странице master, при этом элемент управления ContentPlaceHolderID сопоставляет элемент управления Контент с определенным ContentPlaceHolder. Элемент управления Содержимое — это место, где вы размещаете разметку, которую вы хотите отображать в соответствующем ContentPlaceHolder. @Page Задайте для атрибута директивы Title значение Home и добавьте в элемент управления Содержимое некоторое приветственное содержимое:

Default.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" 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 позволяет задать заголовок страницы с ASP.NET страницы, даже если <title> элемент определен на странице master. Мы также можем задать заголовок программным способом с помощью Page.Title. Также обратите внимание, что ссылки страницы master на таблицы стилей (напримерStyle.css, ) автоматически обновляются, чтобы они работали на любой странице ASP.NET независимо от того, в каком каталоге находится страница ASP.NET относительно страницы master.

Переключившись в режим конструктора, можно увидеть, как будет выглядеть наша страница в браузере. Обратите внимание, что в режиме конструктора для страницы ASP.NET, что только редактируемые области содержимого являются редактируемыми, разметка, не относясь к ContentPlaceHolder, определенная на странице master, неактивна.

В режиме конструктора для страницы ASP.NET отображаются редактируемые и нередактируемые области

Рис. 7. В режиме конструктора для страницы ASP.NET показаны редактируемые и нередактируемые области (щелкните, чтобы просмотреть полноразмерное изображение)

При посещении Default.aspx страницы браузером подсистема ASP.NET автоматически объединяет содержимое страницы master страницы и ASP. Содержимое NET и отображает объединенное содержимое в окончательном HTML-коде, который отправляется в запрашивающий браузер. При обновлении содержимого страницы master все ASP.NET страницы, использующие эту master страницу, при следующем запросе будут повторно объединены с новым содержимым страницы master. Короче говоря, модель master страницы позволяет определить один шаблон макета страницы (master страницу), изменения которого немедленно отражаются на всем сайте.

Добавление дополнительных страниц ASP.NET на веб-сайт

Давайте уйдем на некоторое время, чтобы добавить на сайт дополнительные ASP.NET заглушки страницы, которые в конечном итоге будут содержать различные демонстрации отчетов. Всего будет более 35 демонстраций, поэтому вместо создания всех страниц заглушки давайте просто создадим первые несколько. Так как будет также много категорий демонстраций, для лучшего управления демонстрациями добавьте папку для категорий. Добавьте следующие три папки:

  • BasicReporting
  • Filtering
  • CustomFormatting

Наконец, добавьте новые файлы, как показано в Обозреватель решений на рис. 8. При добавлении каждого файла не забудьте проверка флажок "Выбрать страницу master".

Добавьте следующие файлы

Рис. 8. Добавление следующих файлов

Шаг 2. Создание карты сайта

Одной из проблем управления веб-сайтом, состоящим из более чем горстка страниц, является предоставление простого способа для посетителей, чтобы перемещаться по сайту. Для начала необходимо определить структуру навигации сайта. Затем эту структуру необходимо преобразовать в доступные для навигации элементы пользовательского интерфейса, такие как меню или навигация. Наконец, весь этот процесс необходимо поддерживать и обновлять, так как новые страницы добавляются на сайт и удаляются существующие. До ASP.NET 2.0 разработчики самостоятельно создавали структуру навигации сайта, поддерживали ее и превратили в элементы навигационного пользовательского интерфейса. Однако с ASP.NET 2.0 разработчики могут использовать очень гибкую встроенную систему навигации по сайту.

Система навигации по сайту ASP.NET 2.0 предоставляет разработчикам средства для определения карты сайта и последующего доступа к этой информации через программный API. ASP.NET поставляется с поставщиком карт сайта, который ожидает, что данные карты сайта будут храниться в XML-файле, отформатированный определенным образом. Но так как система навигации по сайту построена на модели поставщика , ее можно расширить для поддержки альтернативных способов сериализации данных карты сайта. В статье Джеффа Prosise The SQL Site Map Provider You've Been Wait for (Поставщик карты сайта SQL, который вы ждали), показано, как создать поставщика карты сайта, который хранит карту сайта в базе данных SQL Server. Другой вариант — создать поставщика карты сайта на основе структуры файловой системы.

Однако в этом руководстве давайте воспользуемся поставщиком карты сайта по умолчанию, который поставляется с ASP.NET 2.0. Чтобы создать карту сайта, просто щелкните правой кнопкой мыши имя проекта в Обозреватель решений, выберите Добавить новый элемент и выберите вариант Карта сайта. Оставьте имя Web.sitemap и нажмите кнопку Добавить.

Добавление карты сайта в проект

Рис. 9. Добавление карты сайта в проект (щелкните, чтобы просмотреть полноразмерное изображение)

Файл карты сайта является XML-файлом. Обратите внимание, что Visual Studio предоставляет IntelliSense для структуры карты сайта. В файле карты сайта должен быть узел в качестве корневого <siteMap> узла, который должен содержать только один <siteMapNode> дочерний элемент. Этот первый <siteMapNode> элемент может содержать произвольное количество элементов-потомков <siteMapNode> .

Определите карту сайта, чтобы имитировать структуру файловой системы. То есть добавьте <siteMapNode> элемент для каждой из трех папок и дочерние <siteMapNode> элементы для каждой из ASP.NET страниц в этих папках следующим образом:

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>

Карта сайта определяет структуру навигации веб-сайта, которая представляет собой иерархию, описывающую различные разделы сайта. Каждый <siteMapNode> элемент в Web.sitemap представляет раздел в структуре навигации сайта.

Карта сайта представляет иерархическую структуру навигации

Рис. 10. Карта сайта представляет иерархическую структуру навигации (щелкните для просмотра полноразмерного изображения)

ASP.NET предоставляет структуру карты сайта с помощью класса SiteMap платформа .NET Framework. Этот класс имеет CurrentNode свойство , которое возвращает сведения о разделе, который пользователь в настоящее время посещает; RootNode свойство возвращает корень карты сайта (Home, в нашей карте сайта). CurrentNode Свойства и RootNode возвращают экземпляры SiteMapNode, которые имеют такие свойства, как ParentNode, ChildNodes, NextSibling, PreviousSiblingи т. д., которые позволяют выполнять обход иерархии карты сайта.

Шаг 3. Отображение меню на основе карты сайта

Доступ к данным в ASP.NET 2.0 можно осуществлять программно, например в ASP.NET 1.x, или декларативно с помощью новых элементов управления источником данных. Существует несколько встроенных элементов управления источником данных, таких как элемент управления SqlDataSource для доступа к данным реляционной базы данных, элемент управления ObjectDataSource, для доступа к данным из классов и другие. Вы даже можете создать собственные пользовательские элементы управления источником данных.

Элементы управления источником данных служат прокси-сервером между страницей ASP.NET и базовыми данными. Чтобы отобразить полученные данные в элементе управления источником данных, мы обычно добавляем другой веб-элемент управления на страницу и привязываем его к элементу управления источником данных. Чтобы привязать веб-элемент управления к элементу управления источником данных, просто задайте для свойства веб-элемента управления DataSourceID значением свойства элемента управления ID источником данных.

Чтобы упростить работу с данными карты сайта, ASP.NET включает элемент управления SiteMapDataSource, который позволяет привязать веб-элемент управления к карте сайта нашего веб-сайта. Два веб-элемента управления TreeView и Menu обычно используются для предоставления пользовательского интерфейса навигации. Чтобы привязать данные карты сайта к одному из этих двух элементов управления, просто добавьте SiteMapDataSource на страницу вместе с элементом управления TreeView или Menu, свойство которого DataSourceID задано соответствующим образом. Например, можно добавить элемент управления Меню на страницу master с помощью следующей разметки:

<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 возвращает иерархию карты сайта на один уровень за раз, начиная с корневого узла карты сайта (Главная, в нашей карте сайта), затем следующего уровня (базовые отчеты, отчеты о фильтрации и настраиваемое форматирование) и т. д. При привязке SiteMapDataSource к repeater он перечисляет первый возвращаемый уровень и создает экземпляр для каждого SiteMapNode экземпляра ItemTemplate на этом первом уровне. Чтобы получить доступ к определенному свойству SiteMapNodeобъекта , можно использовать Eval(propertyName)метод , который позволяет получить свойства SiteMapNodeUrl и Title для элемента управления HyperLink.

В приведенном выше примере 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>

Эти узлы карты сайта (базовые отчеты, отчеты о фильтрации и настраиваемое форматирование) составляют второй уровень отображаемой карты сайта, а не первый. Это связано с тем, что свойству SiteMapDataSource присвоено ShowStartingNode значение False, в результате чего SiteMapDataSource будет обходить корневой узел карты сайта и вместо этого возвращать второй уровень в иерархии карты сайта.

Чтобы отобразить дочерние элементы для базовых отчетов, отчетов о фильтрации и настраиваемого форматирования SiteMapNode , мы можем добавить еще один ретранслятор в исходный ItemTemplateретранслятор . Этот второй 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='<%# ((SiteMapNode) Container.DataItem).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>

Эти два повторителя приводят к следующей разметке (некоторые исправления были удалены для краткости):

<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>

С помощью стилей CSS, выбранных из книги Рэйчел ЭндрюАнтология CSS: 101 Основные советы, рекомендации, & Hacks, элементы и <li> имеют стиль таким образом, <ul> что разметка создает следующие визуальные выходные данные:

Меню, состоящее из двух ретрансляторов и некоторых CSS

Рис. 11. Меню, состоящее из двух ретрансляторов и некоторых css

Это меню находится на странице master и привязано к карте сайта, определенной в Web.sitemap, что означает, что любое изменение карты сайта будет немедленно отражено на всех страницах, использующих страницу Site.master master.

Отключение ViewState

Все ASP.NET элементы управления могут при необходимости сохранять свое состояние в состоянии представления, которое сериализуется в виде скрытого поля формы в отрисованном HTML-коде. Состояние просмотра используется элементами управления для запоминания программно измененного состояния при обратной отправке, например данных, привязанных к веб-элементу управления данными. Хотя состояние представления позволяет запоминать информацию во время обратной передачи, оно увеличивает размер разметки, которая должна быть отправлена клиенту, и может привести к серьезному раздуву страницы, если ее не тщательно отслеживать. Элементы управления Data Web, особенно GridView, особенно известны тем, что добавляют десятки дополнительных килобайт разметки на страницу. Хотя такое увеличение может быть незначительным для пользователей широкополосной сети или интрасети, состояние просмотра может добавить несколько секунд к круговой поездке для пользователей с телефонным подключением.

Чтобы увидеть влияние состояния просмотра, перейдите на страницу в браузере и просмотрите источник, отправленный веб-страницей (в Интернете Обозреватель перейдите в меню Вид и выберите параметр Источник). Вы также можете включить трассировку страницы , чтобы увидеть выделение состояния представления, используемое каждым из элементов управления на странице. Сведения о состоянии представления сериализуются в скрытом поле формы с именем __VIEWSTATE, расположенном в элементе <div> сразу после открывающем <form> тега. Состояние представления сохраняется только при использовании веб-формы; Если страница ASP.NET не содержит <form runat="server"> в декларативном синтаксисе, в отображаемой __VIEWSTATE разметке не будет скрытого поля формы.

Поле __VIEWSTATE формы, созданное страницей master, добавляет примерно 1800 байт к созданной разметке страницы. Это дополнительное раздуение в основном связано с элементом управления Repeater, так как содержимое элемента управления SiteMapDataSource сохраняется для просмотра состояния. Хотя дополнительные 1800 байт могут показаться не очень интересной, при использовании GridView со множеством полей и записей состояние представления может легко раздуться в 10 или более раз.

Состояние просмотра можно отключить на уровне страницы или элемента управления, задав свойству EnableViewState значение false, тем самым уменьшая размер отображаемой разметки. Так как состояние представления веб-элемента управления данными сохраняет данные, привязанные к веб-элементу управления данными, через обратные передачи, при отключении состояния представления для веб-элемента управления данными данные должны быть привязаны к каждой обратной связи. В ASP.NET версии 1.x эта ответственность легла на плечи разработчика страницы; Однако с ASP.NET 2.0 веб-элементы управления данными при необходимости будут повторно привязываться к элементу управления источником данных при каждой обратной отправке.

Чтобы уменьшить состояние просмотра страницы, присвойте свойству элемента управления EnableViewState Repeater значение 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 % экономит размер состояния представления. В руководствах этой серии мы отключаем состояние просмотра веб-элементов управления данными по умолчанию, чтобы уменьшить размер отображаемой разметки. В большинстве примеров свойству EnableViewState будет присвоено значение false и это делается без упоминание. Единственное состояние представления времени будет обсуждаться в сценариях, где оно должно быть включено, чтобы веб-элемент управления данными предоставлял ожидаемые функциональные возможности.

Шаг 4. Добавление навигации по панели навигации

Чтобы завершить master страницу, давайте добавим элемент навигации навигации навигации на каждую страницу. Навигация быстро показывает пользователям их текущее положение в иерархии сайта. Добавить навигацию в 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.sitemap.

Давайте снова отобразим неупорядоченный список с помощью ретранслятора, но на этот раз мы отобразим заголовок и описание учебников. Так как разметку и код для этого потребуется повторить для каждой Default.aspx страницы, эту логику пользовательского интерфейса можно инкапсулировать в пользовательском элементе управления. Создайте на веб-сайте папку с именем UserControls и добавьте в нее новый элемент пользовательского веб-элемента управления с именем SectionLevelTutorialListing.ascxи добавьте следующую разметку:

Добавление нового пользовательского веб-элемента управления в папку UserControls

Рис. 13. Добавление нового пользовательского веб-элемента управления в папку UserControls (щелкните для просмотра полноразмерного изображения)

SectionLevelTutorialListing.ascx

<%@ Control Language="CS" AutoEventWireup="true"
    CodeFile="SectionLevelTutorialListing.ascx.cs"
    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.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class UserControls_SectionLevelTutorialListing : UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // If SiteMap.CurrentNode is not null,
        // bind CurrentNode ChildNodes to the GridView
        if (SiteMap.CurrentNode != null)
        {
            TutorialList.DataSource = SiteMap.CurrentNode.ChildNodes;
            TutorialList.DataBind();
        }
    }
}

В предыдущем примере Repeater мы привязали SiteMap данные к repeater декларативно. SectionLevelTutorialListing Однако пользовательский элемент управления делает это программным способом. В обработчике Page_Load событий выполняется проверка, чтобы убедиться, что URL-адрес этой страницы сопоставляется с узлом в карте сайта. Если этот пользовательский элемент управления используется на странице без соответствующей <siteMapNode> записи, SiteMap.CurrentNode возвращается null и никакие данные не будут привязаны к ретранслятору. При условии CurrentNode, что у нас есть , мы привязываем его ChildNodes коллекцию к repeater. Так как наша карта сайта настроена таким образом, что Default.aspx страница в каждом разделе является родительским узлом всех учебников в этом разделе, этот код будет отображать ссылки и описания всех учебников раздела, как показано на снимке экрана ниже.

После создания этого ретранслятор откройте Default.aspx страницы в каждой из папок, перейдите в представление Конструктор и просто перетащите элемент управления "Пользовательский элемент управления" из Обозреватель решений в область Конструктор, где должен появиться список учебников.

Пользовательский элемент управления добавлен в Default.aspx

Рис. 14. Пользовательский элемент управления добавлен в Default.aspx (щелкните для просмотра полноразмерного изображения)

Перечислены базовые руководства по созданию отчетов

Рис. 15. Перечислены базовые руководства по созданию отчетов (щелкните, чтобы просмотреть полноразмерное изображение)

Сводка

Определив карту сайта и master страницу, мы теперь имеем согласованную схему макета страницы и схему навигации для наших учебников, связанных с данными. Независимо от того, сколько страниц мы добавляем на наш сайт, обновление макета страниц на уровне сайта или сведений о навигации по сайту является быстрым и простым процессом, так как эта информация является централизованной. В частности, сведения о макете страницы определяются на странице Site.master master, а карта сайта — в Web.sitemap. Нам не нужно было писать код для реализации этого макета страницы на уровне сайта и механизма навигации, и мы сохраняем полную поддержку конструктора WYSIWYG в Visual Studio.

Завершив уровень доступа к данным и уровень бизнес-логики и определив согласованный макет страницы и навигацию по сайту, мы готовы приступить к изучению распространенных шаблонов отчетов. В следующих трех руководствах мы рассмотрим основные задачи создания отчетов, отображающие данные, полученные из BLL, в элементах управления GridView, DetailsView и FormView.

Счастливого программирования!

Дополнительные материалы

Дополнительные сведения о темах, рассмотренных в этом руководстве, см. в следующих ресурсах:

Об авторе

Скотт Митчелл( Scott Mitchell), автор семи книг ASP/ASP.NET и основатель 4GuysFromRolla.com, работает с веб-технологиями Майкрософт с 1998 года. Скотт работает независимым консультантом, тренером и писателем. Его последняя книга Sams Teach Yourself ASP.NET 2.0 в 24 часах. Он может быть доступен в mitchell@4GuysFromRolla.com. или через его блог, который можно найти по адресу http://ScottOnWriting.NET.

Особая благодарность

Эта серия учебников была рассмотрена многими полезными рецензентами. Ведущими рецензентами этого руководства были Лиз Шулок, Деннис Паттерсон и Хилтон Гизенов. Хотите просмотреть предстоящие статьи MSDN? Если да, опустите мне строку на mitchell@4GuysFromRolla.com.

НазадВперед