Пошаговое руководство. Руководства по специальным возможностям использования элемента управления GridView

В данном пошаговом руководстве описаны способы использования элемента управления GridView таким образом, чтобы сделать веб-страницу доступной для пользователей программ чтения с экрана. Эти способы позволяют выполнять следующие требования руководства по специальным возможностям для веб-содержимого (WCAG) версии 2.0:

  • Отделение структуры от представления (рекомендация WCAG 1.3).

Дополнительные сведения о специальных возможностях и WCAG 2.0 см. в разделе Специальные возможности Visual Studio и ASP.NET.

Для работы с этим пошаговым руководством необходимы следующие компоненты:

Это второе пошаговое руководство в серии, демонстрирующей способы обеспечения соответствия веб-сайта ASP.NET требованиям по предоставлению специальных возможностей. В данной серии пошаговых руководств создается веб-приложение, которое можно использовать для просмотра параметров конфигурации ASP.NET. Если требуется запустить все пошаговые руководства, перейдите к разделу Пошаговое руководство. Руководства по специальным возможностям использования элементов управления Image, Menu и AutoPostBack. Чтобы не проходить другие пошаговые руководства из этой серии, выполните альтернативные инструкции, приведенные для некоторых шагов. Одни и те же функции специальных возможностей будут показаны как при прохождении пошагового руководства в рамках серии, так и при его независимом прохождении.

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

Примечание о безопасностиПримечание по безопасности

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

Проект веб-сайта Visual Studio с исходным кодом этого примера, прилагаемый к этому разделу, доступен на следующей странице: загрузка.

Данные для отображения в элементе управления GridView поступают из системы конфигурации ASP.NET. При выполнении следующей процедуры будет создан класс, получающий указанный объект Configuration, выбрана группа разделов в этом объекте и возвращен список разделов, содержащихся в данной группе.

ПримечаниеПримечание

Этот раздел пошагового руководства не касается собственно функций специальных возможностей. Он просто содержит сведения для работы с элементом управления GridView.

Создание класса, который возвращает список разделов конфигурации

  1. Если веб-сайт не содержит папку App_Code, то в Обозревателе решений щелкните правой кнопкой мыши имя проекта и последовательно выберите пункты Добавить папку ASP.NET и App_Code.

  2. Щелкните правой кнопкой мыши пункт App_Code и выберите команду Добавить новый элемент.

  3. В разделе Установленные шаблоны нажмите Visual Basic или Visual C#, а затем выберите Класс.

  4. В текстовом поле Имя введите SectionGroupDataSource.vb или SectionGroupDataSource.cs, а затем нажмите кнопку ОК.

  5. Удалите весь код в созданном файле класса.

  6. Вместо этого вставьте следующий код:

    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Configuration;
    using System.Configuration;
    
    /// <summary>
    /// Retrieves a list of sections in a section group. 
    /// </summary>
    public class SectionGroupDataSource
    {
        public SectionGroupDataSource()
        {
        }
    
        public List<SectionInfo> GetSections(
            string sectionGroupName, 
            string virtualPath, 
            string site, 
            string locationSubPath, 
            string server)
        {
            List<SectionInfo> sectionList = new List<SectionInfo>();
    
            Configuration config = WebConfigurationManager.OpenWebConfiguration(
                virtualPath, site, locationSubPath, server);
    
            ConfigurationSectionGroup csg = 
                config.GetSectionGroup(sectionGroupName);
    
            foreach (ConfigurationSection section in csg.Sections)
            {
                SectionInfo si = new SectionInfo();
                si.Name = section.SectionInformation.Name;
                si.NameUrl = "Section.aspx?Section=" + 
                    section.SectionInformation.SectionName;
    
                int i = section.SectionInformation.Type.IndexOf(",");
                si.TypeName = section.SectionInformation.Type.Substring(0, i);
                sectionList.Add(si);
            }
    
            foreach (ConfigurationSectionGroup group in csg.SectionGroups)
            {
                SectionInfo si = new SectionInfo();
                si.Name = group.Name;
                si.NameUrl = 
                    "SectionGroup.aspx?SectionGroup=" + group.SectionGroupName;
                si.TypeName = 
                    "System.Configuration.ConfigurationSectionGroup";
                sectionList.Add(si);
            }
            return sectionList;
        }
    }
    
    public class SectionInfo
    {
        public string Name { get; set; }
        public string NameUrl { get; set; }
        public string TypeName { get; set; }
        public string TypeNameUrl
        {
            get
            {
                return "http://msdn.microsoft.com/en-us/library/" + 
                    TypeName + ".aspx";
            }
        }
    }
    
    
    

    Класс SectionGroupDataSource содержит метод GetSections, принимающий параметры, которые определяют, какой объект Configuration следует получить, и какую группу разделов выбрать. Метод возвращает коллекцию объектов SectionInfo. Класс SectionInfo определяется сразу после класса SectionGroupDataSource.

    ПримечаниеПримечание

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

В рамках этого раздела создается веб-страница, использующая элемент управления ObjectDataSource для предоставления данных элементу управления GridView. Элемент управления ObjectDataSource вызывает метод GetSections объекта SectionGroupDataSource, созданного при выполнении предыдущей процедуры.

ПримечаниеПримечание

При использовании элемента управления ObjectDataSource или некоторых других методов для получения данных (например, при отправке запроса в базу данных с помощью элемента управления SqlDataSource или LinqDataSource), применяются аналогичные методы настройки элемента управления GridView.

Элемент управления GridView создает таблицу HTML table, в которой каждой строке соответствует отображаемый раздел конфигурации. Каждая строка имеет имя раздела в первом столбце и имя класса, используемого для сохранения параметров, во втором столбце.

Чтобы облегчить доступ к таблице пользователей программ чтения с экрана, будет настроен элемент управления GridView, добавляющий в создаваемую им таблицу HTML следующие возможности:

  • Элемент caption, который описывает назначение таблицы в коротком заголовке.

  • Элемент summary, который содержит более длинное описание назначения таблицы.

  • Элементы thead и tbody, которые служат для различения заголовка и основных разделов таблицы.

  • Элементы th имеют атрибуты scope="col", которые определяют ячейки заголовков столбцов.

При выполнении следующей процедуры будет создана веб-страница и добавлена разметка, отображающая список разделов в элементе управления GridView.

Создание веб-страницы, на которой отображается список разделов конфигурации

  1. В обозревателе решений щелкните правой кнопкой мыши имя проекта и выберите команду Добавить новый элемент.

    Откроется диалоговое окно Добавление нового элемента.

  2. В разделе Установленные шаблоны нажмите Visual Basic или Visual C#, а затем выберите пункт Веб-форма.

  3. В текстовом поле Имя введите SectionGroup.aspx.

    Файл SectionGroup.aspx будет открыт в представлении Источник.

  4. Установите флажок Поместить код в отдельный файл.

  5. Если данная страница добавляется в приложение браузера системы конфигурации, убедитесь, что флажок Выбрать главную страницу установлен. (Если эта страница не добавляется в веб-сайт, созданный в разделе Пошаговое руководство. Руководства по специальным возможностям использования элементов управления Image, Menu и AutoPostBack, то главная страница может отсутствовать.)

  6. В диалоговом окне Добавление нового элемента нажмите кнопку ОК.

  7. Если откроется диалоговое окно Выберите главную страницу, нажмите кнопку ОК. Имеется только одна главная страница, и она уже будет выбрана.

  8. В директиве на данной странице присвойте свойству Title значение Браузер системы конфигурации — разделы в группе разделов, как показано в следующем примере:

    
    <%@ Page Language="C#" AutoEventWireup="true" 
        Title="Configuration System Browser - Sections in a Section Group"
        CodeFile="SectionGroup.aspx.cs" MasterPageFile="~/Site.master"
        Inherits="SectionGroup" %>
    
    
    

    Данный заголовок определяет сайт и страницу на сайте. Задание заголовка страницы является обязательным в соответствии с требованиями специальных возможностей.

  9. В элемент Content, который предназначен для элемента управления MainContentContentPlaceHolder, вставьте следующую разметку:

    
    <h2>
        <asp:Label ID="HeadingLabel" runat="server" 
            Text="Sections in Section Group [name]">
        </asp:Label>
    </h2> 
    
    
    

    (Если создается веб-страница, которая не является частью приложения браузера системы конфигурации, вставьте разметку между тегами <div> и </div>.)

    Данная разметка добавляет в элемент управления Label заголовок, чтобы этот заголовок можно было изменять программным образом. Метод Page_Load в составе кода страницы заменит строку "[name]" в заголовке фактическим именем группы разделов, которая отображается на странице.

  10. Под разметкой, вставленной на предыдущем этапе, добавьте следующую разметку:

    
    <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" 
        SelectMethod="GetSections" TypeName="SectionGroupDataSource">
        <SelectParameters>
            <asp:QueryStringParameter Name="sectionGroupName" 
                QueryStringField="SectionGroup" Type="String" 
                DefaultValue="system.web" />
            <asp:SessionParameter Name="virtualPath" 
                SessionField="Path" Type="String" 
                DefaultValue="" />
            <asp:SessionParameter Name="site" 
                SessionField="Site" Type="String" 
                DefaultValue="" />
            <asp:SessionParameter Name="locationSubPath" 
                SessionField="SubPath" Type="String" 
                DefaultValue="" />
            <asp:SessionParameter Name="server" 
                SessionField="Server" Type="String" 
                DefaultValue="" />
        </SelectParameters>
    </asp:ObjectDataSource>
    
    
    

    Эта разметка обеспечивает создание элемента управления ObjectDataSource, который вызывает метод GetSections объекта SectionGroupDataSource. Параметры, переданные методу GetSections, определяют имя группы разделов и специальный объект Configuration, который является источником получения группы разделов.

    Значение параметра для имени группы разделов поступает из поля строки запроса с именем "SectionGroup". Если строка запроса отсутствует, группой разделов по умолчанию является "system.web". Значения других четырех параметров получаются из состояния сеанса. Значения помещаются в состояние сеанса другой страницей в приложении браузера системы конфигурации. Поэтому при создании данной страницы без запуска всех пошаговых руководств этой серии будут использованы только значения, установленные по умолчанию.

  11. Вставьте следующую разметку под элементом управления ObjectDataSource:

    
    <div class="dataTable">
        <asp:GridView ID="SectionGroupGridView" runat="server" 
            AutoGenerateColumns="False" 
            DataSourceID="ObjectDataSource1"
            Caption="Sections in Section Group [name]"
            summary="This table shows sections that are 
                contained in the specified section group."
             Width="100%">
            <Columns>
                <asp:TemplateField HeaderText="Name" 
                    SortExpression="Name" >
                    <ItemTemplate>
                        <asp:HyperLink ID="HyperLink1" runat="server" 
                            Text='<%# Bind("Name") %>' 
                            NavigateUrl='<%# Bind("NameUrl") %>'>
                        </asp:HyperLink>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="TypeName" 
                    SortExpression="TypeName">
                    <ItemTemplate>
                        <asp:HyperLink ID="HyperLink2" runat="server" 
                            Text='<%# Bind("TypeName") %>' 
                            NavigateUrl='<%# Bind("TypeNameUrl") %>'>
                        </asp:HyperLink>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
    
    
    

    Эта разметка создает элемент управления GridView. К специальным возможностям относятся следующие возможности этой разметки:

    • Свойство Caption задается таким образом, чтобы создать элемент caption.

    • Атрибут expando summary задается таким образом, чтобы создать атрибут summary в элементе table. (При указании атрибутов в разметке, которые не сопоставлены свойствам элементов управления, атрибуты передаются при отображении элемента управления; такие атрибуты называются атрибутами expando).

    Поскольку каждая строка представляет данные для раздела, а первый столбец содержит имя раздела, ячейки в этой строке логически действуют в качестве заголовков строк. Такое поведение можно сделать явным, добавив атрибуты scope="row" к элементам td, при этом дополнительно можно использовать элементы th вместо td. При использовании полей шаблонов можно применить элемент управления GridView для создания элементов th, содержащих атрибуты scope="row". Для этого присвойте свойству RowHeaderColumn имя поля, содержащего идентификатор для строки. Однако свойство RowHeaderColumn будет пропущено при использовании связанных полей. В данном пошаговом руководстве применяются связанные поля в элементе управления GridView. Поэтому элемент управления GridView не создает элементов th для заголовков строк. Если требуется подобным образом определить заголовки строк, можно использовать связанные поля или другой элемент управления данными, например элемент управления ListView.

При выполнении следующей процедуры будет добавлен код, задающий свойство элемента управления GridView, которое вызывает создание элементов thead,tbody и th, что, в свою очередь, обеспечивает задание заголовка страницы.

Настройка элемента управления GridView и обновление заголовка страницы

  1. Откройте файл SectionGroup.aspx.vb или SectionGroup.aspx.cs.

  2. Добавьте в метод Page_Load следующий код:

    
    SectionGroupGridView.HeaderRow.TableSection =
        TableRowSection.TableHeader;
    
    
    

    Этот код позволяет элементу управления GridView создать элементы thead,tbody и th.

  3. Под кодом, вставленным на предыдущем этапе, поместите следующий код:

    
    string s = ObjectDataSource1.SelectParameters["sectionGroupName"].DefaultValue.ToString();
    if (Request.QueryString["SectionGroup"] != null)
    {
        s = Request.QueryString["SectionGroup"];
    }
    HeadingLabel.Text = HeadingLabel.Text.Replace("[name]", s);
    SectionGroupGridView.Caption =
        SectionGroupGridView.Caption.Replace("[name]", s);
    
    
    

    Этот код определяет, какая группа разделов будет отображаться на странице, и добавляет имя выбранной группы разделов в заголовок страницы и таблицы.

Следующая процедура выполняется по выбору и будет применена только в случае создания этой страницы в составе приложения браузера системы конфигурации. Поскольку таблица является единственным элементом на странице, ее заголовок соответствует заголовку страницы. Поэтому в рамках этой процедуры добавляется разметка CSS, блокирующая отображение заголовка таблицы. При этом заголовок будет по-прежнему добавлен в HTML-код и может объявляться программами чтения с экрана.

Предотвращение отображения заголовка таблицы

  1. Откройте файл Site.css, расположенный в папке стилей.

  2. Ниже определения элемента body добавьте следующее определение для элементов caption:

    
    caption
    {
        display: none;
    }
    
    
    

Теперь можно проверить, что таблица отображается правильно, и что для нее создается доступный HTML-код.

Тестирование страницы

  1. В Обозревателе решений щелкните правой кнопкой мыши файл SectionGroup.aspx и выберите команду Просмотр в обозревателе.

    Будет отображена таблица, перечисляющая разделы в группе разделов system.web. Имена разделов отображаются в виде гиперссылок, указывающих на страницу, которая будет создана при запуске других пошаговых руководств в этой серии (Пошаговое руководство. Руководства по специальным возможностям использования элемента управления ListView). Имена типов групп разделов отображаются в виде гиперссылок, указывающих на документацию MSDN для определенного типа, как показано на следующем рисунке:

    Страница группы разделов браузера системы настройки
    ПримечаниеПримечание

    При этом может потребоваться нажать в браузере кнопку перезагрузки или обновления, чтобы просмотреть результат применения новых параметров CSS, добавленных в рамках предыдущей процедуры.

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

  2. Просмотрите исходный код страницы в браузере.

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

    <table cellspacing="0" rules="all" 
      summary="This table shows sections that are
      contained in the specified section group." border="1"
      id="ctl00_MainContent_SectionGroupGridView"
      style="width:100%;border-collapse:collapse;">
      <caption>
        Sections in Section Group system.web
      </caption>
      <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">TypeName</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <a id="..." href="...">
              webParts
            </a>
          </td>
          <td>
            <a id="..." href="...">
              System.Web.Configuration.WebPartsSection
            </a>
          </td>
        </tr>
        [remaining rows of table]
      <tbody>
    </table>
    

В данном пошаговом руководстве использовался элемент управления GridView для создания таблицы HTML, содержащей элементы и атрибуты, которые облегчают доступ к табличным данным пользователям программ чтения с экрана. В остальных пошаговых руководствах этой серии демонстрируются другие подходы по обеспечению соответствия веб-сайта требованиям специальных возможностей. Следующим пошаговым руководством данной серии является Пошаговое руководство. Руководства по специальным возможностям использования элемента управления ListView. Ниже перечислены другие пошаговые руководства данной серии.

Показ: