Профили, темы и веб-части

  • Статья

от Корпорации Майкрософт

В ASP.NET 2.0 произошли значительные изменения в конфигурации и инструментировании. Новый API конфигурации ASP.NET позволяет вносить изменения в конфигурацию программным способом. Кроме того, существует множество новых параметров конфигурации, которые позволяют использовать новые конфигурации и инструментирование.

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

Профили ASP.NET

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

Профиль определяется либо в файле конфигурации компьютеров, либо в файле web.config для приложения. (Невозможно определить профиль во вложенных папках web.config файле.) Приведенный ниже код определяет профиль для хранения имени и фамилии посетителей веб-сайта.

<profile>
    <properties>
        <add name="FirstName" />
        <add name="LastName" />
    </properties>
</profile>

Тип данных по умолчанию для свойства профиля — System.String. В приведенном выше примере тип данных не указан. Поэтому свойства FirstName и LastName имеют тип String. Как упоминалось ранее, свойства профиля строго типизированы. Приведенный ниже код добавляет новое свойство для age типа Int32.

<profile>
    <properties>
        <add name="FirstName" />
        <add name="LastName" />
        <add name="Age" type="Int32"/>
    </properties>
</profile>

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

<anonymousIdentification enabled="true" />
<profile>
    <properties>
        <add name="FirstName" allowAnonymous="true" />
        <add name="LastName" allowAnonymous="true" />
    </properties>
</profile>

Когда анонимный пользователь просматривает сайт, ASP.NET создает экземпляр ProfileCommon для пользователя. Этот профиль использует уникальный идентификатор, хранящийся в файле cookie в браузере, чтобы идентифицировать пользователя как уникального посетителя. Таким образом, вы можете хранить данные профиля для пользователей, просматривающих анонимные страницы.

Группы профилей

Свойства профилей можно группировать. Группируя свойства, можно имитировать несколько профилей для определенного приложения.

Следующая конфигурация настраивает свойства FirstName и LastName для двух групп. Покупатели и перспективы.

<profile>
    <properties>
        <group name="Buyers">
            <add name="FirstName" />
            <add name="Lastname" />
            <add name="NumberOfPurchases" type="Int32" />
        </group>
        <group name="Prospects">
            <add name="FirstName" />
            <add name="Lastname" />
        </group>
    </properties>
</profile>

Затем можно задать свойства для определенной группы следующим образом:

Profile.Buyers.NumberOfPurchases += 1;

Хранение сложных объектов

До сих пор в примерах, которые мы рассмотрели, простые типы данных хранятся в профиле. Можно также сохранить сложные типы данных в профиле, указав метод сериализации с помощью атрибута serializeAs следующим образом:

<add name="PurchaseInvoice"
     type="PurchaseInvoice"
     serializeAs="Binary"
/>

В этом случае используется тип PurchaseInvoice. Класс PurchaseInvoice должен быть помечен как сериализуемый и может содержать любое количество свойств. Например, если у PurchaseInvoice есть свойство NumItemsPurchased, вы можете сослаться на это свойство в коде следующим образом:

Profile.PurchaseInvoice.NumItemsPurchased

Наследование профиля

Можно создать профиль для использования в нескольких приложениях. Создав класс профиля, производный от ProfileBase, вы можете повторно использовать профиль в нескольких приложениях с помощью атрибута inherits , как показано ниже:

<profile inherits="PurchasingProfile" />

В этом случае класс PurchasingProfile будет выглядеть следующим образом:

using System;
using System.Web.Profile;
public class PurchasingProfile : ProfileBase {
    private string _ProductName;
    private Int32 _ProductID;
    public string ProductName {
        get { return _ProductName; }
        set { _ProductName = value; }
    }
    public Int32 ProductID {
        get { return _ProductID; }
        set { _ProductID = value; }
    }
}

Поставщики профилей

ASP.NET профилях используется модель поставщика. Поставщик по умолчанию сохраняет сведения в базе данных SQL Server Express в папке App_Data веб-приложения с помощью поставщика SqlProfileProvider. Если база данных не существует, ASP.NET автоматически создаст ее при попытке профиля сохранить информацию.

Однако в некоторых случаях может потребоваться разработать собственный поставщик профилей. Функция профиля ASP.NET позволяет легко использовать различных поставщиков.

Вы создаете настраиваемый поставщик профилей, когда:

  • Необходимо хранить данные профиля в источнике данных, например в базе данных FoxPro или в базе данных Oracle, которая не поддерживается поставщиками профилей, включенными в платформа .NET Framework.
  • Необходимо управлять сведениями профиля с помощью схемы базы данных, отличной от схемы базы данных, используемой поставщиками, включенными в платформа .NET Framework. Типичным примером является интеграция данных профиля с пользовательскими данными в существующей базе данных SQL Server.

Обязательные классы

Чтобы реализовать поставщик профилей, создайте класс, который наследует абстрактный класс System.Web.Profile.ProfileProvider. Абстрактный класс ProfileProvider , в свою очередь, наследует абстрактный класс System.Configuration.SettingsProvider, который наследует абстрактный класс System.Configuration.ProviderBase. Из-за этой цепочки наследования помимо обязательных членов класса ProfileProvider необходимо реализовать необходимые члены классов SettingsProvider и ProviderBase .

В следующих таблицах описаны свойства и методы, которые необходимо реализовать из абстрактных классов ProviderBase, SettingsProvider и ProfileProvider .

Члены ProviderBase

Член Описание
Initialize - метод Принимает в качестве входных данных имя экземпляра поставщика и коллекцию NameValueCollection параметров конфигурации. Используется для задания параметров и значений свойств для экземпляра поставщика, включая конкретные значения реализации и параметры, указанные в файле конфигурации компьютера или Web.config.

SettingsProvider Members

Член Описание
Свойство ApplicationName Имя приложения, которое хранится в каждом профиле. Поставщик профилей использует имя приложения для хранения сведений о профиле отдельно для каждого приложения. Это позволяет нескольким приложениям ASP.NET использовать один и тот же источник данных без конфликтов, если в разных приложениях создается одно и то же имя пользователя. Кроме того, несколько ASP.NET приложений могут совместно использовать источник данных профиля, указав одно и то же имя приложения.
Метод GetPropertyValues Принимает в качестве входных данных объекты SettingsContext и SettingsPropertyCollection. SettingsContext предоставляет сведения о пользователе. Сведения можно использовать в качестве первичного ключа для получения сведений о свойствах профиля для пользователя. Используйте объект SettingsContext , чтобы получить имя пользователя и определить, прошел ли пользователь проверку подлинности или аноним. SettingsPropertyCollection содержит коллекцию объектов SettingsProperty. Каждый объект SettingsProperty предоставляет имя и тип свойства, а также дополнительные сведения, такие как значение по умолчанию для свойства и то, доступно ли свойство только для чтения. Метод GetPropertyValues заполняет SettingsPropertyValueCollection объектами SettingsPropertyValue на основе объектов SettingsProperty, предоставленных в качестве входных данных. Значения из источника данных для указанного пользователя назначаются свойствам PropertyValue для каждого объекта SettingsPropertyValue , и возвращается вся коллекция. Вызов метода также обновляет значение LastActivityDate для указанного профиля пользователя до текущей даты и времени.
Метод SetPropertyValues Принимает в качестве входных данных объекты SettingsContext и SettingsPropertyValueCollection . SettingsContext предоставляет сведения о пользователе. Сведения можно использовать в качестве первичного ключа для получения сведений о свойствах профиля для пользователя. Используйте объект SettingsContext , чтобы получить имя пользователя и определить, прошел ли пользователь проверку подлинности или аноним. Коллекция SettingsPropertyValueCollection содержит коллекцию объектов SettingsPropertyValue. Каждый объект SettingsPropertyValue предоставляет имя, тип и значение свойства, а также дополнительные сведения, такие как значение по умолчанию для свойства и указывает, доступно ли свойство только для чтения. Метод SetPropertyValues обновляет значения свойств профиля в источнике данных для указанного пользователя. Вызов метода также обновляет значения LastActivityDate и LastUpdatedDate для указанного профиля пользователя до текущей даты и времени.

Элементы ProfileProvider

Член Описание
Метод DeleteProfiles Принимает в качестве входных данных массив строк имен пользователей и удаляет из источника данных все сведения о профиле и значения свойств для указанных имен, где имя приложения соответствует значению свойства ApplicationName . Если источник данных поддерживает транзакции, рекомендуется включить в транзакцию все операции удаления, а также выполнить откат транзакции и создать исключение в случае сбоя любой операции удаления.
Метод DeleteProfiles Принимает в качестве входных данных коллекцию объектов ProfileInfo и удаляет из источника данных все сведения о профиле и значения свойств для каждого профиля, в котором имя приложения соответствует значению свойства ApplicationName . Если источник данных поддерживает транзакции, рекомендуется включить все операции удаления в транзакцию и выполнить откат транзакции и создать исключение в случае сбоя любой операции удаления.
Метод DeleteInactiveProfiles Принимает в качестве входных данных значение ProfileAuthenticationOption и объект DateTime и удаляет из источника данных все сведения о профиле и значения свойств, где дата последнего действия меньше или равна указанной дате и времени, а имя приложения соответствует значению свойства ApplicationName . Параметр ProfileAuthenticationOption указывает, нужно ли удалять только анонимные профили, только профили, прошедшие проверку подлинности, или все профили. Если источник данных поддерживает транзакции, рекомендуется включить все операции удаления в транзакцию и выполнить откат транзакции и создать исключение в случае сбоя любой операции удаления.
Метод GetAllProfiles Принимает в качестве входных данных значение ProfileAuthenticationOption , целое число, указывающее индекс страницы, целое число, указывающее размер страницы, и ссылку на целое число, которое будет иметь общее количество профилей. Возвращает объект ProfileInfoCollection, содержащий объекты ProfileInfo для всех профилей в источнике данных, где имя приложения соответствует значению свойства ApplicationName . Параметр ProfileAuthenticationOption указывает, должны ли быть возвращены только анонимные профили, только профили, прошедшие проверку подлинности, или все профили. Результаты, возвращаемые методом GetAllProfiles , ограничены индексом страницы и значениями размера страницы. Значение размера страницы указывает максимальное количество объектов ProfileInfo , возвращаемых в ProfileInfoCollection. Значение индекса страницы указывает, какую страницу результатов следует вернуть, где 1 определяет первую страницу. Параметр для общего числа записей является параметром out (вы можете использовать ByRef в Visual Basic), для которых задано общее количество профилей. Например, если хранилище данных содержит 13 профилей для приложения и значение индекса страницы равно 2 с размером страницы 5, то возвращаемый объект ProfileInfoCollection содержит профили с шестого по десятый. При возврате метода для общего значения записей устанавливается значение 13.
Метод GetAllInactiveProfiles Принимает в качестве входных данных значение ProfileAuthenticationOption , объект DateTime , целое число, указывающее индекс страницы, целое число, указывающее размер страницы, и ссылку на целое число, которое будет присвоено общему количеству профилей. Возвращает объект ProfileInfoCollection , содержащий объекты ProfileInfo для всех профилей в источнике данных, где дата последнего действия меньше или равна указанному значению DateTime и где имя приложения соответствует значению свойства ApplicationName . Параметр ProfileAuthenticationOption указывает, должны ли быть возвращены только анонимные профили, только профили, прошедшие проверку подлинности, или все профили. Результаты, возвращаемые методом GetAllInactiveProfiles , ограничены индексом страницы и значениями размера страницы. Значение размера страницы указывает максимальное количество объектов ProfileInfo , возвращаемых в ProfileInfoCollection. Значение индекса страницы указывает, какую страницу результатов следует вернуть, где 1 определяет первую страницу. Параметр для общего числа записей является параметром out (вы можете использовать ByRef в Visual Basic), для которых задано общее количество профилей. Например, если хранилище данных содержит 13 профилей для приложения и значение индекса страницы равно 2 с размером страницы 5, то возвращаемый объект ProfileInfoCollection содержит профили с шестого по десятый. При возврате метода для общего значения записей устанавливается значение 13.
Метод FindProfilesByUserName Принимает в качестве входных данных значение ProfileAuthenticationOption , строку, содержащую имя пользователя, целое число, указывающее индекс страницы, целое число, указывающее размер страницы, и ссылку на целое число, которое будет присвоено общему количеству профилей. Возвращает объект ProfileInfoCollection , содержащий объекты ProfileInfo для всех профилей в источнике данных, где имя пользователя соответствует указанному имени пользователя, а имя приложения соответствует значению свойства ApplicationName . Параметр ProfileAuthenticationOption указывает, должны ли быть возвращены только анонимные профили, только профили, прошедшие проверку подлинности, или все профили. Если источник данных поддерживает дополнительные возможности поиска, такие как подстановочные знаки, можно предоставить более широкие возможности поиска по именам пользователей. Результаты, возвращаемые методом FindProfilesByUserName , ограничиваются индексом страницы и значениями размера страницы. Значение размера страницы указывает максимальное количество объектов ProfileInfo , возвращаемых в ProfileInfoCollection. Значение индекса страницы указывает, какую страницу результатов следует вернуть, где 1 определяет первую страницу. Параметр для общего числа записей является параметром out (вы можете использовать ByRef в Visual Basic), для которых задано общее количество профилей. Например, если хранилище данных содержит 13 профилей для приложения и значение индекса страницы равно 2 с размером страницы 5, то возвращаемый объект ProfileInfoCollection содержит профили с шестого по десятый. При возврате метода для общего значения записей устанавливается значение 13.
Метод FindInactiveProfilesByUserName Принимает в качестве входных данных значение ProfileAuthenticationOption , строку, содержащую имя пользователя, объект DateTime , целое число, указывающее индекс страницы, целое число, указывающее размер страницы, и ссылку на целое число, которое будет присвоено общему количеству профилей. Возвращает объект ProfileInfoCollection , содержащий объекты ProfileInfo для всех профилей в источнике данных, где имя пользователя соответствует указанному имени пользователя, где дата последнего действия меньше или равна заданному значению DateTime и где имя приложения совпадает со значением свойства ApplicationName . Параметр ProfileAuthenticationOption указывает, должны ли быть возвращены только анонимные профили, только профили, прошедшие проверку подлинности, или все профили. Если источник данных поддерживает дополнительные возможности поиска, такие как подстановочные знаки, можно предоставить более широкие возможности поиска по именам пользователей. Результаты, возвращаемые методом FindInactiveProfilesByUserName , ограничиваются индексом страницы и значениями размера страницы. Значение размера страницы указывает максимальное количество объектов ProfileInfo , возвращаемых в ProfileInfoCollection. Значение индекса страницы указывает, какую страницу результатов следует вернуть, где 1 определяет первую страницу. Параметр для общего числа записей является параметром out (вы можете использовать ByRef в Visual Basic), для которых задано общее количество профилей. Например, если хранилище данных содержит 13 профилей для приложения и значение индекса страницы равно 2 с размером страницы 5, то возвращаемый объект ProfileInfoCollection содержит профили с шестого по десятый. При возврате метода для общего значения записей устанавливается значение 13.
Метод GetNumberOfInActiveProfiles Принимает в качестве входных данных значение ProfileAuthenticationOption и объект DateTime и возвращает количество всех профилей в источнике данных, где дата последнего действия меньше или равна указанному значению DateTime и где имя приложения соответствует значению свойства ApplicationName . Параметр ProfileAuthenticationOption указывает, будут ли учитываться только анонимные профили, только профили, прошедшие проверку подлинности, или все профили.

ApplicationName

Так как поставщики профилей хранят сведения о профиле отдельно для каждого приложения, необходимо убедиться, что схема данных содержит имя приложения, а запросы и обновления также включают имя приложения. Например, следующая команда используется для получения значения свойства из базы данных на основе имени пользователя и анонимности профиля и гарантирует, что значение ApplicationName будет включено в запрос.

SELECT Property
FROM PropertyTable
WHERE Username = 'user1'
AND IsAnonymous = False
AND ApplicationName = 'MyApplication'

Темы ASP.NET

Что такое темы ASP.NET 2.0?

Одним из наиболее важных аспектов веб-приложения является единообразный внешний вид сайта. ASP.NET 1.x разработчики обычно используют каскадные таблицы стилей (CSS) для реализации единообразного внешнего вида. ASP.NET 2.0 темы значительно улучшают css, так как они дают разработчику ASP.NET возможность определять внешний вид серверных элементов управления ASP.NET, а также html-элементов. ASP.NET темы можно применять к отдельным элементам управления, определенной веб-странице или ко всему веб-приложению. Темы используют сочетание CSS-файлов, необязательных файлов обложки и необязательного каталога Images, если требуются изображения. Файл обложки управляет внешним видом серверных элементов управления ASP.NET.

Где хранятся темы?

Расположение, в котором хранятся темы, зависит от их область. Темы, которые можно применить к любому приложению, хранятся в следующей папке:

C:\WINDOWS\Microsoft.NET\Framework\v2.x.xxxxx\ASP.NETClientFiles\Themes\<Theme_Name>

Тема, относящуюся к конкретному приложению, хранится в App\_Themes\<Theme\_Name> каталоге в корневом каталоге веб-сайта.

Примечание

Файл обложки должен изменять только свойства элементов управления сервера, влияющие на внешний вид.

Глобальная тема — это тема, которую можно применить к любому приложению или веб-сайту, работающему на веб-сервере. Эти темы по умолчанию хранятся в ASP. NETClientfiles\Themes, который находится в каталоге v2.x.xxxxx. Кроме того, можно переместить файлы темы в папку aspnet_client/system_web/[версия]/Themes/[theme_name] в корне веб-сайта.

Темы, относящиеся к конкретному приложению, могут применяться только к приложению, в котором находятся файлы. Эти файлы хранятся в каталоге App\_Themes/<theme\_name> в корне веб-сайта.

Компоненты темы

Тема состоит из одного или нескольких CSS-файлов, необязательного файла обложки и необязательной папки Images. Css-файлы могут иметь любое имя (например, default.css, theme.css и т. д.) и должны находиться в корне папки тем. Css-файлы используются для определения обычных классов CSS и атрибутов для определенных селекторов. Для применения одного из классов CSS к элементу страницы используется свойство CSSClass .

Файл обложки — это XML-файл, содержащий определения свойств для ASP.NET серверных элементов управления. Приведенный ниже код является примером файла обложки.

<asp:TextBox runat="server"
    BackColor="#FFC080"
    BorderColor="Black"
    BorderStyle="Solid"
    BorderWidth="1px"
    Font-Names="Tahoma, Verdana, Arial"
    Font-Size="Smaller" />

<asp:Button runat="server"
    BackColor="#C04000"
    BorderColor="Maroon"
    BorderStyle="Solid"
    BorderWidth="2px"
    Font-Names="Tahoma,Verdana,Arial"
    Font-Size="Smaller"
    ForeColor="#FFFFC0" />

На рисунке 1 ниже показана небольшая ASP.NET страница, просматриваемая без применения темы. На рисунке 2 показан тот же файл с примененной темой. Цвет фона и цвет текста настраиваются с помощью CSS-файла. Внешний вид кнопки и текстового поля настраивается с помощью файла обложки, указанного выше.

Нет темы

Рис. 1. Без темы

Примененная тема

Рис. 2. Примененная тема

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

Приведенный ниже код определяет обложку для элемента управления Button. Внешний вид кожи будут принимать только элементы управления Button со свойством SkinIDgoButton .

<asp:Button runat="server"
    BackColor="#C04000"
    BorderColor="Maroon"
    BorderStyle="Solid"
    BorderWidth="2px"
    Font-Names="Tahoma,Verdana,Arial"
    Font-Size="Smaller"
    ForeColor="#FFFFC0"
    Text=go
    SkinID=goButton
    Width="95px" />

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

Применение тем к страницам

Тему можно применить с помощью любого из следующих методов:

  • В элементе <pages> файла web.config
  • В директиве @Page страницы
  • Программным образом

Применение темы в файле конфигурации

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

<system.web>
    <pages theme="CoolTheme" />
    ...
</system.web>

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

Применение темы в директиве page

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

Чтобы применить тему в директиве @Page , используйте следующий синтаксис:

<%@ Page Language="C#" Theme=CoolTheme CodeFile="Default.aspx.cs" ... %>

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

Применение темы программным способом

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

Чтобы применить тему программным способом, используйте следующий синтаксис:

Page.Theme = CoolTheme;

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

Упражнение 1. Применение темы

В этом упражнении вы примените тему ASP.NET к веб-сайту.

Важно!

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

  1. Создание нового веб-сайта ASP.NET.

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

  3. Выберите Файл веб-конфигурации в списке файлов и нажмите кнопку Добавить.

  4. Щелкните правой кнопкой мыши проект в Обозреватель решений и выберите Добавить новый элемент.

  5. Выберите Файл обложки и нажмите кнопку Добавить.

  6. При появлении запроса на размещение файла в папке App_Themes нажмите кнопку Да.

  7. Щелкните правой кнопкой мыши папку SkinFile в папке App_Themes в Обозреватель решений и выберите Добавить новый элемент.

  8. Выберите Таблицу стилей в списке файлов и нажмите кнопку Добавить. Теперь у вас есть все файлы, необходимые для реализации новой темы. Однако Visual Studio назвал папку тем SkinFile. Щелкните правой кнопкой мыши папку и измените ее имя на CoolTheme.

  9. Откройте файл SkinFile.skin и добавьте следующий код в конец файла:

    <asp:TextBox runat="server"
    BackColor="#FFC080"
    BorderColor="Black"
    BorderStyle="Solid"
    BorderWidth="1px"
    Font-Names="Tahoma, Verdana, Arial"
    Font-Size="Smaller"
/>

<asp:Button runat="server"
    BackColor="#C04000"
    BorderColor="Maroon"
    BorderStyle="Solid"
    BorderWidth="2px"
    Font-Names="Tahoma,Verdana,Arial"
    Font-Size="Smaller"
    ForeColor="#FFFFC0"
/>

<asp:Button runat="server"
    BackColor="#C04000"
    BorderColor="Maroon"
    BorderStyle="Solid"
    BorderWidth="2px"
    Font-Names="Tahoma,Verdana,Arial"
    Font-Size="Smaller"
    ForeColor="#FFFFC0"
    Text="go"
    SkinID="goButton"
    Width="95px"
/>

  10. Сохраните файл SkinFile.skin.

  11. Откройте StyleSheet.css.

  12. Замените весь текст в нем следующим:

    body {
    background-color: #FFDEAD;
}

  13. Сохраните файл StyleSheet.css.

  14. Откройте страницу Default.aspx.

  15. Добавьте элементы управления TextBox и Button.

  16. Сохраните страницу. Теперь перейдите на страницу Default.aspx. Он должен отображаться как обычная веб-форма.

  17. Откройте файл web.config.

  18. Добавьте следующий код непосредственно под открывающим <system.web> тегом:

    <pages theme="CoolTheme" />

  19. Сохраните файл web.config. Теперь перейдите на страницу Default.aspx. Он должен отображаться с примененной темой.

  20. Если он еще не открыт, откройте страницу Default.aspx в Visual Studio.

  21. Нажмите кнопку.

  22. Измените свойство SkinID на goButton. Обратите внимание, что Visual Studio предоставляет раскрывающийся список с допустимыми значениями SkinID для элемента управления Кнопка.

  23. Сохраните страницу. Теперь снова просмотрите страницу в браузере. Теперь кнопка должна говорить "go" и должна быть шире по внешнему виду.

С помощью свойства SkinID можно легко настроить разные обложки для разных экземпляров определенного типа серверного элемента управления.

Свойство StyleSheetTheme

До сих пор мы говорили только о применении тем с помощью свойства Theme. При использовании свойства Theme файл обложки переопределяет все декларативные параметры для серверных элементов управления. Например, в упражнении 1 вы указали SkinID "goButton" для элемента управления Button и изменили текст Button на "go". Возможно, вы заметили, что свойству Text элемента Button в конструкторе присвоено значение "Кнопка", но тема переопределила это. Тема всегда переопределяет любые параметры свойств в конструкторе.

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

Чтобы увидеть это в действии, откройте файл web.config из проекта в упражнении 1 и измените <pages> элемент на следующий:

<pages styleSheetTheme="CoolTheme" />

Теперь перейдите на страницу Default.aspx, и вы увидите, что элемент управления Button снова имеет свойство Text "Кнопка". Это связано с тем, что явный параметр свойства в конструкторе переопределяет свойство Text, заданное goButton SkinID.

Переопределение тем

Глобальную тему можно переопределить, применив тему с тем же именем в папке App_Themes приложения. Однако тема не применяется в сценарии истинного переопределения. Если среда выполнения обнаруживает файлы темы в папке App_Themes, она будет применять тему с помощью этих файлов и игнорировать глобальную тему.

Свойство StyleSheetTheme переопределяется и может быть переопределено в коде следующим образом:

const String THEME_NAME = "CoolTheme";
public override string StyleSheetTheme {
    get { return THEME_NAME; }
    set { Page.StyleSheetTheme = THEME_NAME; }
}

веб-части

ASP.NET веб-части — это интегрированный набор элементов управления для создания веб-сайтов, которые позволяют конечным пользователям изменять содержимое, внешний вид и поведение веб-страниц непосредственно из браузера. Изменения могут применяться ко всем пользователям сайта или к отдельным пользователям. Когда пользователи изменяют страницы и элементы управления, параметры можно сохранить, чтобы сохранить личные предпочтения пользователя в будущих сеансах браузера, что называется персонализацией. Эти возможности веб-частей означают, что разработчики могут предоставить конечным пользователям возможность динамически персонализировать веб-приложение без вмешательства разработчика или администратора.

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

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

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

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

Разработчики страниц могут использовать средства визуального дизайна, такие как Microsoft Visual Studio 2005, для создания страниц, использующих веб-части. Одним из преимуществ использования такого средства, как Visual Studio, является то, что набор элементов управления веб-частей предоставляет функции для создания и настройки элементов управления веб-частей в визуальном конструкторе. Например, с помощью конструктора можно перетащить зону веб-частей или элемент управления редактора веб-частей в область конструктора, а затем настроить элемент управления прямо в конструкторе с помощью пользовательского интерфейса, предоставленного набором элементов управления веб-частей. Это может ускорить разработку приложений веб-частей и сократить объем кода, который требуется написать.

Разработка элементов управления

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

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

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

Структурные компоненты пользовательского интерфейса зависят от персонализации и предоставляют базовую структуру и службы, необходимые для всех элементов управления веб-частей. На каждой странице веб-частей требуется один структурный компонент пользовательского интерфейса — это элемент управления WebPartManager. Хотя этот элемент управления никогда не отображается, он имеет критическую задачу координации всех элементов управления веб-частей на странице. Например, он отслеживает все отдельные элементы управления веб-частей. Он управляет зонами веб-частей (регионами, содержащими элементы управления веб-частей на странице) и элементами управления, в которых находятся зоны. Он также отслеживает и управляет различными режимами отображения страницы, такими как просмотр, подключение, изменение или каталог, а также то, применяются ли изменения персонализации ко всем пользователям или к отдельным пользователям. Наконец, он инициирует и отслеживает подключения и обмен данными между элементами управления веб-частей.

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

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

Основные элементы управления веб-частей

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

Элемент управления веб-частей Описание
Webpartmanager Управляет всеми элементами управления веб-частей на странице. Для каждой страницы веб-частей требуется один (и только один) элемент управления WebPartManager .
Catalogzone Содержит элементы управления CatalogPart. Эта зона используется для создания каталога элементов управления веб-частей, из которого пользователи могут выбирать элементы управления для добавления на страницу.
Editorzone Содержит элементы управления EditorPart. Используйте эту зону, чтобы пользователи могли изменять и персонализировать элементы управления веб-частей на странице.
Webpartzone Содержит и предоставляет общий макет для элементов управления WebPart, которые составляют main пользовательского интерфейса страницы. Используйте эту зону при создании страниц с элементами управления веб-частей. Страницы могут содержать одну или несколько зон.
Connectionszone Содержит элементы управления WebPartConnection и предоставляет пользовательский интерфейс для управления подключениями.
WebPart (GenericWebPart) Отрисовывает основной пользовательский интерфейс; Большинство элементов управления пользовательского интерфейса веб-частей относятся к этой категории. Для максимального программного управления можно создать настраиваемые элементы управления веб-частей, производные от базового элемента управления WebPart . Вы также можете использовать существующие серверные элементы управления, пользовательские элементы управления или пользовательские элементы управления в качестве элементов управления веб-частей. Всякий раз, когда любой из этих элементов управления помещается в зону, элемент управления WebPartManager автоматически заключает их в оболочку с элементами управления GenericWebPart во время выполнения, чтобы их можно было использовать с функциональными возможностями веб-частей.
Catalogpart Содержит список доступных элементов управления веб-частей, которые пользователи могут добавлять на страницу.
Webpartconnection Создает соединение между двумя элементами управления веб-частей на странице. Соединение определяет один из элементов управления веб-частей в качестве поставщика (данных), а другой как потребителя.
Editorpart Служит базовым классом для специализированных элементов управления редактора.
Элементы управления EditorPart (AppearanceEditorPart, LayoutEditorPart, BehaviorEditorPart и PropertyGridEditorPart) Разрешить пользователям персонализировать различные аспекты элементов управления пользовательского интерфейса веб-частей на странице

Задание. Создание страницы веб-частей

В этом задании вы создадите страницу веб-части, которая будет сохранять сведения через ASP.NET профили.

Создание простой страницы с веб-частями

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

Примечание

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

Создание страницы для элементов управления веб-частей

  1. Закройте страницу по умолчанию и добавьте новую страницу на сайт с именем WebPartsDemo.aspx.

  2. Перейдите в режим конструктора .

  3. В меню Вид убедитесь, что выбраны параметры Невизуемые элементы управления и Сведения , чтобы вы могли видеть теги макета и элементы управления, у которых нет пользовательского интерфейса.

  4. Поместите точку вставки перед <div> тегами в области конструктора и нажмите клавишу ВВОД, чтобы добавить новую строку. Поместите точку вставки перед новым символом строки, щелкните элемент управления раскрывающимся списком Формат блоков в меню и выберите заголовок 1 . В заголовке добавьте текст Демонстрационная страница веб-частей.

  5. На вкладке Веб-части панели элементов перетащите элемент управления WebPartManager на страницу, расположив его сразу после нового символа <div>строки и перед тегами.

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

  6. Поместите точку вставки в <div> теги.

  7. В меню Макет выберите команду Вставить таблицу и создайте новую таблицу с одной строкой и тремя столбцами. Нажмите кнопку Свойства ячейки , выберите сверху в раскрывающемся списке Вертикальное выравнивание , нажмите кнопку ОК и нажмите кнопку ОК еще раз, чтобы создать таблицу.

  8. Перетащите элемент управления WebPartZone в левый столбец таблицы. Щелкните правой кнопкой мыши элемент управления WebPartZone , выберите Пункт Свойства и задайте следующие свойства:

    Идентификатор: SidebarZone

    HeaderText: боковая панель

  9. Перетащите второй элемент управления WebPartZone в столбец средней таблицы и задайте следующие свойства:

    Идентификатор: MainZone

    HeaderText: Main

  10. Сохраните файл.

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

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

Создание содержимого для зоны main

  1. В режиме конструктора перетащите элемент управления Метка со вкладки Стандартный панели элементов в область содержимого зоны , для которой задано значение MainZone.

  2. Переключитесь в представление источника . Обратите внимание, что <элемент zonetemplate> был добавлен для упаковки элемента управления Label в MainZone.

  3. Добавьте атрибут с именем title в <элемент asp:label> и присвойте ей значение Content. Удалите атрибут Text="Label" из <элемента asp:label> . Между открывающим и закрывающим тегами <элемента asp:label> добавьте текст, например Добро пожаловать на домашнюю страницу , в пару тегов <элементов h2> . Код должен выглядеть следующим образом.

    <asp:webpartzone id="MainZone" runat="server" headertext="Main">
    <zonetemplate>
        <asp:label id="Label1" runat="server" title="Content">
            <h2>Welcome to My Home Page</h2>
        </asp:label>
    </zonetemplate>
</asp:webpartzone>

  4. Сохраните файл.

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

Создание пользовательского элемента управления

  1. Добавьте на сайт новый пользовательский веб-элемент управления, который будет использоваться в качестве элемента управления поиска. Снимите флажок Разместить исходный код в отдельном файле. Добавьте его в тот же каталог, что и страница WebPartsDemo.aspx, и назовите его SearchUserControl.ascx.

    Примечание

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

  2. Перейдите в режим конструктора . На вкладке Стандартный панели элементов перетащите элемент управления TextBox на страницу.

  3. Поместите точку вставки после только что добавленного текстового поля и нажмите клавишу ВВОД, чтобы добавить новую строку.

  4. Перетащите элемент управления Кнопка на страницу в новой строке под только что добавленным текстовым полем.

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

    <%@ control language="C#"
    classname="SearchUserControl" %>
<asp:textbox runat="server"
  id=" TextBox1"></asp:textbox>
<br />
<asp:button runat="server"
  id=" Button1" text="Search" />

  6. Сохраните файл и закройте его.

Теперь вы можете добавлять элементы управления веб-частей в зону боковой панели. Вы добавляете два элемента управления в зону боковой панели, один из которых содержит список ссылок, а другой — пользовательский элемент управления, созданный в предыдущей процедуре. Ссылки добавляются в качестве стандартного серверного элемента управления Метка , аналогично тому, как вы создали статический текст для зоны Main. Однако, хотя отдельные серверные элементы управления, содержащиеся в пользовательском элементе управления, могут содержаться непосредственно в зоне (например, элемент управления меткой), в данном случае они не являются. Вместо этого они являются частью пользовательского элемента управления, созданного в предыдущей процедуре. Это демонстрирует общий способ упаковки любых элементов управления и дополнительных функций в пользовательском элементе управления, а затем ссылаться на этот элемент управления в зоне в качестве элемента управления веб-частей.

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

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

  1. Откройте страницу WebPartsDemo.aspx.

  2. Перейдите в режим конструктора .

  3. Перетащите созданную страницу пользовательского элемента управления SearchUserControl.ascx из Обозреватель решений в зону, свойство идентификатора которой имеет значение SidebarZone, и перетащите ее туда.

  4. Сохраните страницу WebPartsDemo.aspx.

  5. Переключитесь в представление источника .

  6. <Внутри элемента asp:webpartzone> для SidebarZone сразу над ссылкой на пользовательский элемент управления добавьте <элемент asp:label> с содержащимися ссылками, как показано в следующем примере. Кроме того, добавьте атрибут Title в тег пользовательского элемента управления со значением Search, как показано ниже.

    <asp:WebPartZone id="SidebarZone" runat="server"
                 headertext="Sidebar">
    <zonetemplate>
        <asp:label runat="server" id="linksPart" title="My Links">
            <a href="http://www.asp.net">ASP.NET site</a>
            <br />
            <a href="http://www.gotdotnet.com">GotDotNet</a>
            <br />
            <a href="http://www.contoso.com">Contoso.com</a>
            <br />
        </asp:label>
        <uc1:SearchUserControl id="searchPart"
          runat="server" title="Search" />
    </zonetemplate>
</asp:WebPartZone>

  7. Сохраните файл и закройте его.

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

Демонстрационная страница веб-частей с двумя зонами

Веб-части VS Пошаговое руководство 1. Снимок экрана

Рис. 3. Снимок экрана: веб-части VS Пошаговое руководство 1

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

Предоставление пользователям правки страниц и изменения макета

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

В этой части пошагового руководства вы добавите возможность для пользователей изменять основные характеристики любого элемента управления WebPart на странице. Чтобы включить эти функции, добавьте на страницу еще один пользовательский элемент управления, а также <элемент asp:editorzone> и два элемента управления редактирования.

Создание пользовательского элемента управления, позволяющего изменять макет страницы

  1. В Visual Studio в меню Файл выберите вложенное меню Создать и выберите параметр Файл .

  2. В диалоговом окне Добавление нового элемента выберите Элемент управления веб-пользователями. Присвойте новому файлу имя DisplayModeMenu.ascx. Снимите флажок Разместить исходный код в отдельном файле.

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

  4. Переключитесь в представление источника .

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

    <%@ Control Language="C#" ClassName="DisplayModeMenuCS" %>

<script runat="server">

    // Use a field to reference the current WebPartManager control.
    WebPartManager _manager;
    void Page_Init(object sender, EventArgs e) {
        Page.InitComplete += new EventHandler(InitComplete);
    }
    void InitComplete(object sender, System.EventArgs e) {
        _manager = WebPartManager.GetCurrentWebPartManager(Page);
        String browseModeName = WebPartManager.BrowseDisplayMode.Name;
        // Fill the drop-down list with the names of supported display modes.
        foreach (WebPartDisplayMode mode in
        _manager.SupportedDisplayModes) {
            String modeName = mode.Name;
            // Make sure a mode is enabled before adding it.
            if (mode.IsEnabled(_manager)) {
                ListItem item = new ListItem(modeName, modeName);
                DisplayModeDropdown.Items.Add(item);
            }
        }
        // If Shared scope is allowed for this user, display the
        // scope-switching UI and select the appropriate radio
        // button for the current user scope.
        if (_manager.Personalization.CanEnterSharedScope) {
            Panel2.Visible = true;
            if (_manager.Personalization.Scope ==
            PersonalizationScope.User)
                RadioButton1.Checked = true;
            else
                RadioButton2.Checked = true;
        }
    }

    // Change the page to the selected display mode.
    void DisplayModeDropdown_SelectedIndexChanged(object sender,
        EventArgs e) {
        String selectedMode = DisplayModeDropdown.SelectedValue;
        WebPartDisplayMode mode =
            _manager.SupportedDisplayModes[selectedMode];
        if (mode != null)
            _manager.DisplayMode = mode;
    }
    // Set the selected item equal to the current display mode.
    void Page_PreRender(object sender, EventArgs e) {
        ListItemCollection items = DisplayModeDropdown.Items;
        int selectedIndex =
        items.IndexOf(items.FindByText(_manager.DisplayMode.Name));
        DisplayModeDropdown.SelectedIndex = selectedIndex;
    }
    // Reset all of a user's personalization data for the page.
    protected void LinkButton1_Click(object sender, EventArgs e) {
        _manager.Personalization.ResetPersonalizationState();
    }
    // If not in User personalization scope, toggle into it.
    protected void RadioButton1_CheckedChanged(object sender, EventArgs e) {
        if (_manager.Personalization.Scope == PersonalizationScope.Shared)
            _manager.Personalization.ToggleScope();
    }

    // If not in Shared scope, and if user has permission, toggle
    // the scope.
    protected void RadioButton2_CheckedChanged(object sender,
    EventArgs e) {
        if (_manager.Personalization.CanEnterSharedScope &&
            _manager.Personalization.Scope == PersonalizationScope.User)
            _manager.Personalization.ToggleScope();
    }
</script>

<div>
    <asp:Panel ID="Panel1" runat="server"
      BorderWidth="1" Width="230" BackColor="lightgray"
        Font-Names="Verdana, Arial, Sans Serif">
        <asp:Label ID="Label1" runat="server"
          Text=" Display Mode" Font-Bold="true"
            Font-Size="8" Width="120" />
        <asp:DropDownList ID="DisplayModeDropdown"
          runat="server" AutoPostBack="true" Width="120"
            OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" />
        <asp:LinkButton ID="LinkButton1" runat="server"
             Text="Reset User State"
             ToolTip="Reset the current user's personalization data for the page."
             Font-Size="8" OnClick="LinkButton1_Click" />
        <asp:Panel ID="Panel2" runat="server"
            GroupingText="Personalization Scope" Font-Bold="true"
            Font-Size="8" Visible="false">
            <asp:RadioButton ID="RadioButton1" runat="server"
                Text="User" AutoPostBack="true"
                GroupName="Scope"
                OnCheckedChanged="RadioButton1_CheckedChanged" />
            <asp:RadioButton ID="RadioButton2" runat="server"
                Text="Shared" AutoPostBack="true"
                GroupName="Scope"
                OnCheckedChanged="RadioButton2_CheckedChanged" />
        </asp:Panel>
    </asp:Panel>
</div>

  6. Сохраните файл, щелкнув значок сохранить на панели инструментов или выбрав Сохранить в меню Файл .

Разрешение пользователям изменять макет

  1. Откройте страницу WebPartsDemo.aspx и перейдите в режим конструктора .

  2. Поместите точку вставки в конструктор сразу после добавленного ранее элемента управления WebPartManager . Добавьте жесткое значение возврата после текста, чтобы после элемента управления WebPartManager была пустая строка. Поместите точку вставки на пустую строку.

  3. Перетащите только что созданный пользовательский элемент управления (файл называется DisplayModeMenu.ascx) на страницу WebPartsDemo.aspx и переместите его в пустую строку.

  4. Перетащите элемент управления EditorZone из раздела WebParts панели элементов в оставшуюся открытую ячейку таблицы на странице WebPartsDemo.aspx.

  5. Из раздела WebParts панели элементов перетащите элементы управления AppearanceEditorPart и LayoutEditorPart в элемент управления EditorZone .

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

    <td valign="top">
    <asp:EditorZone ID="EditorZone1" runat="server">
        <ZoneTemplate>
            <asp:AppearanceEditorPart ID="AppearanceEditorPart1"
              runat="server" />
            <asp:LayoutEditorPart ID="LayoutEditorPart1"
              runat="server" />
        </ZoneTemplate>
    </asp:EditorZone>
</td>

  7. Сохраните файл WebPartsDemo.aspx. Вы создали пользовательский элемент управления, который позволяет изменять режимы отображения и макет страницы, а также ссылались на элемент управления на основной веб-странице.

Теперь вы можете протестировать возможность редактирования страниц и изменения макета.

Проверка изменений макета

  1. Загрузите страницу в браузере.
  2. Щелкните раскрывающееся меню Режим отображения и выберите Изменить. Отображаются заголовки зон.
  3. Перетащите элемент управления "Мои ссылки" в строку заголовка из зоны боковой панели в нижнюю часть зоны Main. Страница должна выглядеть так, как показано на следующем снимке экрана.

Демонстрационная страница веб-частей с перемещенным элементом управления "Мои ссылки"

Веб-части VS Пошаговое руководство 2. Снимок экрана

Рис. 4. Снимок экрана: веб-части VS Пошаговое руководство 2

  1. Откройте раскрывающееся меню Режим отображения и выберите Обзор. Страница обновляется, имена зон исчезают, а элемент управления "Мои ссылки" остается там, где вы его позиционируете.

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

  3. В меню Режим отображения выберите Изменить.

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

  4. Щелкните стрелку, чтобы отобразить меню глаголов в элементе управления "Мои ссылки ". Щелкните команду Изменить .

    Появится элемент управления EditorZone с добавленными элементами управления EditorPart.

  5. В разделе Внешний вид элемента управления редактированием измените заголовок на Избранное, в раскрывающемся списке Тип Chrome выберите Только название и нажмите кнопку Применить. На следующем снимке экрана показана страница в режиме редактирования.

Демонстрационная страница веб-частей в режиме правки

Веб-части VS Walkthrough 3. Снимок экрана

Рис. 5. Веб-части VS Walkthrough 3 Снимок экрана

  1. Щелкните меню Режим отображения и выберите Обзор , чтобы вернуться в режим просмотра.
  2. Элемент управления теперь имеет обновленный заголовок и без границы, как показано на следующем снимке экрана.

Страница демонстрации измененных веб-частей

Снимок экрана: пошаговое руководство 4 по веб-частям VS

Рис. 4. Снимок экрана: пошаговое руководство по веб-частям VS 4

Добавление веб-частей во время выполнения

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

Разрешение пользователям добавлять веб-части во время выполнения

  1. Откройте страницу WebPartsDemo.aspx и перейдите в режим конструктора .

  2. На вкладке Веб-части панели элементов перетащите элемент управления CatalogZone в правый столбец таблицы под элементом управления EditorZone .

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

  3. На панели Свойства назначьте строку Добавить веб-части свойству HeaderText элемента управления CatalogZone .

  4. Из раздела WebParts панели элементов перетащите элемент управления DeclarativeCatalogPart в область содержимого элемента управления CatalogZone .

  5. Щелкните стрелку в правом верхнем углу элемента управления DeclarativeCatalogPart , чтобы открыть меню Задачи, а затем выберите Изменить шаблоны.

  6. Из раздела Стандартный панели элементов перетащите элементы управления FileUpload и Calendar в раздел WebPartsTemplate элемента управления DeclarativeCatalogPart .

  7. Перейдите в представление источника . Проверьте исходный <код элемента asp:catalogzone> . Обратите внимание, что элемент управления DeclarativeCatalogPart содержит <элемент webpartstemplate> с двумя вложенными серверными элементами управления, которые можно будет добавить на страницу из каталога.

  8. Добавьте свойство Title к каждому элементу управления, добавленным в каталог, используя строковое значение, показанное для каждого заголовка в примере кода ниже. Несмотря на то, что заголовок не является свойством, которое обычно можно задать для этих двух серверных элементов управления во время разработки, когда пользователь добавляет эти элементы управления в зону WebPartZone из каталога во время выполнения, каждый из них упаковывается в элемент управления GenericWebPart . Это позволяет им действовать в качестве элементов управления веб-частей, чтобы они могли отображать заголовки.

    Код для двух элементов управления, содержащихся в элементе управления DeclarativeCatalogPart , должен выглядеть следующим образом.

    <asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" runat="server">
    <WebPartsTemplate>
        <asp:Calendar ID="Calendar1" runat="server" title="My Calendar" />
        <asp:FileUpload ID="FileUpload1" runat="server" title="Upload Files" />
    </WebPartsTemplate>
</asp:DeclarativeCatalogPart>

  9. Сохраните страницу.

Теперь можно протестировать каталог.

Тестирование каталога веб-частей

  1. Загрузите страницу в браузере.

  2. Щелкните раскрывающееся меню Режим отображения и выберите Каталог.

    Отобразится каталог с названием Добавление веб-частей .

  3. Перетащите элемент управления My Favorites из зоны Main обратно в верхнюю часть зоны боковой панели и перетащите его туда.

  4. В каталоге Добавление веб-частей выберите оба поля проверка, а затем выберите Main в раскрывающемся списке, содержающем доступные зоны.

  5. Щелкните Добавить в каталоге. Элементы управления добавляются в зону Main. При необходимости можно добавить несколько экземпляров элементов управления из каталога на страницу.

    На следующем снимке экрана показана страница с элементом управления отправкой файла и календарем в зоне Main.

Элементы управления, добавленные в зону Main из каталога

Рис. 5. Элементы управления, добавленные в зону Main из каталога 6. Щелкните раскрывающееся меню Режим отображения и выберите Обзор. Каталог исчезает, а страница обновляется. 7. Закройте браузер. Снова загрузите страницу. Внесенные изменения сохраняются.