Базовые страницы ASP.NET Web Parts

181

ASP.NET --- Веб-сайты ASP.NET --- Базовые страницы

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

Ниже перечислены основные шаги по созданию страницы веб-частей:

Создание страницы.

Создайте в Visual Studio простую страницу ASP.NET обычным образом. Какой-то специальный тип страниц не понадобится - это должна быть просто страница .aspx, подобная любой другой. Прежде чем продолжить, можно структурировать компоновку страницы, используя таблицы HTML, чтобы создать, например, страницу с областью навигации, главной областью и боковой панелью для дополнительной информации (подобно странице MSN, показанной в предыдущей статье). Эта страница может быть мастер-страницей для обеспечения согласованного внешнего вида во всех страницах.
Добавление элемента управления WebPartManager.

Далее добавьте на страницу элемент управления WebPartManager. Он доступен в панели инструментов Web Parts среды Visual Studio, когда открыт визуальный конструктор страниц ASP.NET. Это невидимый элемент управления, который осведомлен обо всех доступных веб-частях на странице и управляет персонализацией. WebPartManager должен быть первым элементом управления, создаваемым на странице веб-частей, поскольку от него зависят все остальные элементы управления, имеющие отношение к веб-частям.
Добавление элементов управления WebPartZone.

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

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

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

После завершения всех этих шагов страница веб-частей готова к использованию. Чтобы платформа могла сохранять персонализованную информацию для каждого пользователя отдельно, в приложении должна быть включена аутентификация (либо с помощью форм, либо Windows). По умолчанию эта информация хранится в файловой базе данных ASPNETDB.MDF, которая автоматически создается в каталоге App_Data, если установлена версия SQL Server Express. В противном случае понадобится создать базу данных в полной версии SQL Server с помощью утилиты aspnet_regsql.exe, информация о персонализации сохраняется в той же базе данных, что и информация о пользователях.

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

Разработка дизайна страницы

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

<body>
    <form id="form1" runat="server">
        <div>
            <table style="width: 100%">
                <tr style="background: #00ccff; vertical-align:middle">
                    <td colspan="2">
                        <span style="font-size: 24px; font-family: Verdana">
                            <strong>Добро пожаловать на страницу Web Parts!</strong>
                        </span>
                    </td>
                    <td style="height: 22px">
                        Меню
                    </td>
                </tr>
                <tr style="vertical-align:top">
                    <td style="width: 20%">
                        
                    </td>
                    <td style="width: 60%">
                        
                    </td>
                    <td style="width: 20%">
                        
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>

Первая строка таблицы - это простой заголовок приложения. Во второй строке таблица содержит три столбца: левый будет использоваться в качестве столбца конфигурации элементов управления (таких как элемент управления для выбора доступных веб-частей), центральный столбец будет служить для отображения главной информации, а правый - для небольших веб-частей с дополнительной информацией. Обратите внимание, что первая строка содержит второй столбец для меню; это меню будет использоваться позже для переключения между режимами страницы (например, из режима Browse (Обзор), который просто отображает информацию, в режим Design (Проектирование), который дает возможность пользователю перемещать веб-части из одной зоны в другую).

Компоновка страницы показана на рисунке ниже:

Элементы управления WebPartManager и WebPartZones

После определения дизайна веб-страницы можно приступать к добавлению первых элементов управления - веб-частей. Эти элементы собраны в разделе Web Parts панели инструментов Visual Studio. В данном примере первым элементом, добавленным в верхнюю часть страницы, будет WebPartManager. Элемент WebPartManager работает со всеми добавленными н веб-странице зонами и знает обо всех доступных веб-частях страницы. Он управляет персонализацией и обеспечивает настройку веб-страницы для текущего зарегистрированного пользователя. В следующем фрагменте кода показана модифицированная часть кода страницы:

<form id="form1" runat="server">
    <div>
        <asp:WebPartManager ID="WebPartManager1" runat="server" />
        <table style="width: 100%">
        ...
        </table>
    </div>
</form>

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

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

<table style="width: 100%">
    <tr style="background: #00ccff; vertical-align:middle">
        <td colspan="2">
            <span style="font-size: 24px; font-family: Verdana">
                <strong>Добро пожаловать на страницу Web Parts!</strong>
            </span>
        </td>
        <td style="height: 22px">
            Меню
        </td>
    </tr>
    <tr style="vertical-align:top">
        <td style="width: 20%">
            <asp:CatalogZone ID="SimpleCatalog" runat="server"></asp:CatalogZone>
        </td>
        <td style="width: 60%">
            <asp:WebPartZone ID="MainZone" runat="server"></asp:WebPartZone>
        </td>
        <td style="width: 20%">
            <asp:WebPartZone ID="HelpZone" runat="server"></asp:WebPartZone>
        </td>
    </tr>
</table>

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

Страница веб-частей в визуальном конструкторе Visual Studio

Добавление веб-частей на страницу

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

Добавление элементов управления к странице с веб-частями столь же просто, как их добавление к базовой странице. Единственное отличие состоит в том, что вместо непосредственного помещения на страницу они добавляются к одной из ранее добавленных зон WebPartZone. Для этой цели WebPartZone использует шаблоны. Концепция та же, что и с GridView, где можно указывать шаблон, который создается для каждой строки сетки. Шаблон определяет внешний вид веб-части. Существующие серверные элементы управления можно добавлять к зоне следующим образом:

<asp:WebPartZone ID="HelpZone" runat="server">
    <ZoneTemplate>
        <asp:Calendar runat="server" ID="MyCalendar" />
        <asp:FileUpload runat="server" ID="FileUpload1" />
    </ZoneTemplate>
</asp:WebPartZone>

В предыдущем примере показана зона веб-частей (WebPartZone), которая была добавлена ранее для правого раздела страницы. Эта зона теперь содержит два элемента управления: стандартный элемент управления Calendar и элемент управления FileUpload. На рисунке ниже можно видеть страницу в визуальном конструкторе Visual Studio после добавления этого шаблона зоны:

Зона WebPartZone с добавленными элементами управления

Можно создать один или более пользовательских элементов управления и добавить их к одной из зон веб-частей. Например, добавьте новый пользовательский элемент управления к решению (Website --> Add New Item --> Web User Control), откройте тестовую базу данных Northwind в проводнике Server Explorer и перетащите таблицу Customer из Server Explorer на элемент управления ASP.NET. Визуальный конструктор автоматически создает источник данных, а также элемент управления GridView, отображающий данные. (Не включайте автоматическое форматирование GridView; это произойдет автоматически позже, на основе элементов управления WebPartZone.)

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

<%@ Register Src="~/MyDataControl.ascx" TagName="MyDataControl" TagPrefix="control" %>
...
    <asp:WebPartZone ID="MainZone" runat="server">
        <ZoneTemplate>
            <control:MyDataControl ID="MyDataControl1" runat="server" />
        </ZoneTemplate>
    </asp:WebPartZone>

В конце можно добавить особую веб-часть к ранее добавленному элементу управления CatalogZone. Поскольку эта зона служит для отображения каталогов веб-частей, в нее можно помещать только особые элементы управления, такие как PageCatalogPart. Особые элементы управления добавляются точно так же, как и обычные элементы управления WebPartZone - через ZoneTemplate:

<asp:CatalogZone ID="SimpleCatalog" runat="server">
    <ZoneTemplate>
        <asp:PageCatalogPart ID="PageCatalogPart1" runat="server" />
    </ZoneTemplate>
</asp:CatalogZone>

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

Вы увидите, что это форматирование применяется автоматически к каждому элементу управления, который помещен непосредственно в зону. Также обратите внимание, что все действия по форматированию, которые выполняются на самой веб-части, переопределяют форматирование, выбранное в зоне веб-части. Затем протестируйте приложение, запустив страницу с веб-частями, и после этого приступайте к ее отладке. При запуске решения для отладки страницы вы увидите экран, показанный на рисунке ниже (в зависимости от установок автоформатирования):

Страница веб-частей, отображаемая в браузере

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

Поскольку метод аутентификации пока еще не конфигурировался, по умолчанию приложение использует аутентификацию Windows. Таким образом, можно настроить страницу веб-частей в отношении сворачивания и закрытия отдельных частей. Без каких-либо дополнительных усилий то же касается и аутентификации с помощью форм (как с использованием API-интерфейса Membership, так и без него). Пока что нет возможности перемещать веб-части из одной зоны в другую. Чтобы сделать это, необходимо переключиться в специальный режим страницы, о котором речь пойдет в следующем разделе. Когда вы закрываете браузер и запускаете другой его сеанс, страница появляется в той же компоновке, в которой она была оставлена. Это объясняется тем, что WebPartManager сохраняет изменения в хранилище персонализации.

Опять-таки, по умолчанию эти настройки сохраняются в базе данных ASPNETDB.MDF для SQL Server Express, которая находится в каталоге App_Data, если параметры конфигурации не изменились. Такое поведение по умолчанию можно поменять, создав базу данных на сервере по своему выбору с помощью утилиты aspnet_regsql.exe, (Этот инструмент работает только с SQL Server; для других баз данных потребуется создать собственный поставщик.) Сконфигурировать поставщика с этой базой данных можно следующим образом:

<configuration>
  <system.web>
    <webParts>
      <personalization defaultProvider="MyProvider">
        <providers>
          <add name="MyProvider" 
               type="System.Web.UI.WebControls.WebParts.SqlPersonalizationProvider"
               connectionStringName="aspnetdb"/>
        </providers>
      </personalization>
    </webParts>
    ...
  </system.web>
  ...
  <connectionStrings>
    <add name="aspnetdb" connectionString="Data Source=.\SQLEXPRESS;Initial Catalog=aspnetdb;Integrated Security=True"/>
  </connectionStrings>
</configuration>

В раздел <connectionStrings> конфигурационного файла понадобится добавить строну соединения (в рассматриваемом примере - "aspnetdb"), которая должна указывать на базу данных, созданную aspnet_regsql.exe.

Настройка страницы

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

Причина в том, что страница с веб-частями поддерживает множество режимов отображения, и определенные действия требуют находиться в корректном режиме. Режимы отображения можно конфигурировать через свойство DisplayMode класса WebPartManager. В таблице ниже приведен список доступных режимов отображения, которые реализованы как статические свойства класса WebPartManager:

Режимы отображения DisplayMode страницы веб-частей
Режим	Описание
BrowseDisplayMode	Режим по умолчанию; используется для отображения содержимого страницы веб-частей
DesignDisplayMode	При активизации этого режима пользователь может изменять позицию веб-частей, перетаскивая их с помощью мыши
CatalogDisplayMode	При активизации этого режима WebPartManager отображает каталог веб-частей, который дает возможность пользователю добавлять веб-части на страницу
ConnectDisplayMode	При активизации этого режима пользователь может конфигурировать соединения между подключаемыми веб-частями
EditDisplayMode	Позволяет пользователю редактировать свойства веб-частей. Этот режим отображает веб-части редактора. Элемент управления EditorZone - одна из готовых зон веб-частей, которая позволяет отображать элементы управления редактора веб-частей, предоставляющие пользователю возможность модификации веб-частей

Теперь добавим в первую строку таблицы компоновки элемент управления Menu, как показано ниже:

<td style="height: 22px">
    <asp:Menu ID="PartsMenu" runat="server" OnMenuItemClick="PartsMenu_MenuItemClick">
    </asp:Menu>
</td>

Затем внутри страницы можно написать код, который наполняет меню доступными режимами отображения для WebPartManager. Для этого необходимо выполнить итерацию по свойству DisplayModes, которое представляет собой коллекцию элементов WebPartDisplayMode, и проверить, включен ли каждый из режимов. Это необходимо, потому что определенные режимы доступны только при включенной персонализации. Если же персонализация отключена, а режим требует ее включения, это свойство возвращает false, и такой режим отображения использовать нельзя.

Вдобавок можно запросить свойство RequiresPersonalization коллекции WebPartDisplayMode, чтобы увидеть, требует режим включенной персонализации или нет. И, наконец, если режим отображения включен, его нужно просто добавить в меню:

protected void Page_Load(object sender, EventArgs e)
{
        if (!this.IsPostBack)
        {
            MenuItem Root = new MenuItem("Режим SelectMode");

            foreach (WebPartDisplayMode mode in WebPartManager1.DisplayModes)
            {
                Root.ChildItems.Add(new MenuItem(mode.Name));
            }

            PartsMenu.Items.Add(Root);
        }
}

Вспомните, что меню должно наполняться только при первом запросе, т.к. при включенным состоянии представления оно запоминает свое состояние, а, следовательно, и свои дочерние пункты меню. Когда пользователь щелкает на пункте меню, необходимо переключиться в соответствующий режим страницы веб-частей. Это делается установкой свойства DisplayMode из WebPartManager в выбранное значение WebPartDisplayMode, как показано ниже:

protected void PartsMenu_MenuItemClick(object sender, MenuEventArgs e)
{
        foreach (WebPartDisplayMode mode in WebPartManager1.DisplayModes)
        {
            if (mode.Name.Equals(e.Item.Text))
            {
                WebPartManager1.DisplayMode = mode;
            }
        }
}

Теперь, когда пользователь выберет в меню режим Catalog, зона CatalogZone с веб-частью PageCatalogPart станет видимой, и к странице снова можно будет добавлять ранее закрытые веб-части:

Зона Catalog Zone отображается в режиме Catalog

Настройка страницы посредством перетаскивания использует специальные средства DHTML браузера Internet Explorer и потому работает только в этом браузере. Все прочие средства, такие как добавление персонализации, сворачивание и разворачивание окон, а также добавление веб-частей из каталога в определенные зоны, работают с любыми другими браузерами.

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