Поделиться через

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

  • Статья

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

Загрузить 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.vb, CategoriesBLL.vbи т. д.), 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="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>

Страница 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="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 есть ссылка на используемый файл master страницы (MasterPageFile="~/Site.master"), а разметка страницы ASP.NET содержит элемент управления Контентом для каждого элемента управления ContentPlaceHolder, определенного на странице master, при этом элемент управления ContentPlaceHolderID сопоставляет элемент управления Контент с определенным ContentPlaceHolder. Элемент управления Содержимое — это место, где вы размещаете разметку, которую вы хотите отображать в соответствующем 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 позволяет задать заголовок страницы с 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 Waiting 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 свойство возвращает корень карты сайта (Главная, в нашей карте сайта). 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 он перечисляет первый возвращенный уровень и создает экземпляр для каждого экземпляра ItemTemplate на этом SiteMapNode первом уровне. Чтобы получить доступ к определенному свойству 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="<%# 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>

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

<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 Anthology: 101 Essential Tips, Tricks, & Hacks<ul>, элементы и <li> стили создаются таким образом, что разметка создает следующие визуальные выходные данные:

Меню, состоящее из двух ретрансляторов и некоторых 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.

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

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

Рис. 13. Добавление нового пользовательского веб-элемента управления в папку 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. Перечислены учебники по базовым отчетам (щелкните, чтобы просмотреть полноразмерное изображение)

Сводка

После определения карты сайта и завершения 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.

Назад