Адаптеры элементов управления ASP.NET

Адаптеры элементов управления ASP.NET дают возможность изменять HTML-код, генерируемый стандартными элементами управления, такими как <asp:Menu>.


Стандартный HTML-вывод серверных элементов управления ASP.NET оставляет желать лучшего. Так например элемент управления <asp:Menu> преобразуется в ужасный HTML-код на основе таблиц:

<table id="ctl00_menuTop" class="ctl00_menuTop_2"
       cellpadding="0" cellspacing="0" border="0">
  <tr onmouseover="Menu_HoverStatic(this)"
      onmouseout="Menu_Unhover(this)"
      onkeyup="Menu_Key(this)" id="ctl00_menuTopn0">
    <td>
      <table cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
          <td style="white-space:nowrap;width:100%;">
            <a class="ctl00_menuTop_1"
               href="http://Msdn.WebStandards/Default.aspx">Main Page</a>
          </td>
          <td style="width:0;">
            <img src="/Msdn.WebStandards/WebResource.axd?d=hnH9bjBrxucw46WA5Xha0Kh9gZ-YF67wSyd4b51QsEc1&amp;t=632962190992968750"
                 alt="Expand Main Page"
                 style="border-style:none;vertical-align:middle;" />
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
 

Верстать меню таблицами не есть правильно - таблицы должны быть для табличных данных, а не для вёрстки дизайна. Кроме того стили должны храниться в CSS, а не в атрибутах style. Это есть принцип отделения данных от оформления при веб-разработке. Статья в тему Принудительное применение веб-стандартов для повышения доступности. В общем, моему проекту, свёрстанному по всем "хорошим" правилам на div'ах и CSS, такое меню подходит, как Венере Милосской подходит шапка-ушанка.



Однако, ребята из Майкрософта оказались предусмотрительными и дали программистам возможность управлять HTML-выводом элементов управления ASP.NET с помощью специального интерфейса. Интерфейс этот называется Адаптеры элементов управления ASP.NET (ASP.NET Control Adapters).

Также эти ребята начали проект по улучшению HTML-представления элементов управления. Проект называется ASP.NET 2.0 CSS Friendly Control Adapters 1.0 (http://asp.net/CSSAdapters/) и сейчас он полностью передан на управление сообществу. Этот проект интересен тем, что добавив в References одну dll-библиотеку и скопировав пару файлов и папок мы получаем на выходе гораздо более качественный HTML-код. Например, для меню он будет таким:

<div class="AspNet-Menu-Horizontal">
  <ul class="AspNet-Menu">
    <li class="AspNet-Menu-WithChildren">
    <a href="http://Default.aspx" class="AspNet-Menu-Link">Web Standards</a>
      <ul>
        <li class="AspNet-Menu-Leaf">
          <a href="http://ControlAdapters.aspx">Control Adapters Sample</a>
        </li>
        <li class="AspNet-Menu-Leaf">
          <a href="http://AccessibleForm.aspx">Accessible Form</a>
                    </li>
                </ul>
            </li>
        </ul>
</div>
 

CSS Friendly Control Adapters - проект с открытым исходным текстом. Он содержит адаптеры, которые изменяют HTML-вывод для ряда стандартных элементов управления: Menu, TreeView, DetailsView, FormView, GridView, DataList, Login, ChangePassword, PasswordRecovery, CreateUserWizard, LoginStatus. При желании, можно изменить любой адаптер "под себя". Например сделать так, чтобы меню генерировалось не списками <ul>, а слоями <div>. Но это уже для гурманов.

Подключить CSSFriendly адаптеры к существующему ASP.NET проекту достаточно просто. Для этого проект должен использовать темы [3].
1. Скачиваем отсюда 3 файла: CSSFriendly_1.0.zip, CSSFriendly.dll и CSSFriendlyAdapters.browser.
2. Копируем файл CSSFriendlyAdapters.browser в специальную папку App_Browsers проекта.
3. Добавляем CSSFriendly.dll в References проекта
4. Копируем папки CSSFriendly_1.0.zip\CSSFriendly_1.0\CSSFriendly\CSS и CSSFriendly_1.0.zip\CSSFriendly_1.0\CSSFriendly\JavaScript в папку темы проекта.
Теперь читаем руководство, разбираем примеры и делаем свой CSS-файл, например, для меню.

Материалы:
[1] Официальный сайт проекта ASP.NET 2.0 CSS Friendly Control Adapters
[2] Принудительное применение веб-стандартов для повышения доступности
[3] Скринкаст по применению тем: Оформление интерфейса веб-приложений ASP.NET