Пользовательские элементы управления

ASP.NET --- Веб-сайты ASP.NET --- Пользовательские элементы управления

Базовый набор элементов управления ASP.NET обширен и внушителен. Он охватывает элементы управления, которые включают в себя базовые HTML-дескрипторы, и элементы управления, предоставляющие развитую высокоуровневую модель, такие как Calendar, TreeView и элементы управления данными. Конечно, даже самый лучший набор элементов управления не в состоянии удовлетворить нужды всех разработчиков. Рано или поздно придется заняться созданием собственных компонентов пользовательского интерфейса.

Платформа .NET допускает два способа включения собственных элементов управления в структуру веб-форм. Можно разработать следующие компоненты:

Пользовательские элементы управления

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

Специальные серверные элементы управления

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

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

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

Основы пользовательских элементов управления

Файлы пользовательских элементов управления (.ascx) подобны файлам веб-форм ASP.NET (.aspx). Как и веб-формы, пользовательские элементы управления состоят из интерфейса пользователя с дескрипторами элементов управления (файл .ascx) и могут применять встроенные сценарии или файлы отделенного кода (.cs). Пользовательские элементы управления могут содержать практически все компоненты, присущие веб-странице, включая статическое HTML-содержимое и элементы управления ASP.NET, и получают те же события, что и объект Page (наподобие Load и PreRender), и посредством свойств (таких как Application, Session, Request и Response) отображают тот же набор объектов, присущих ASP.NET.

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

• Пользовательские элементы управления начинаются с директивы Control, а не Page.

• Пользовательские элементы управления используют расширение .ascx, а не .aspx, а их файлы отделенного кода наследуются от класса System.Web.UI.UserControl. Фактически классы UserControl и Page унаследованы от одного и того же класса TemplateControl, что обусловливает общность многих их методов и свойств.

• Пользовательские элементы управления не могут запрашиваться непосредственно клиентским браузером. (При любой подобной попытке ASP.NET будет выводить обобщенное сообщение об ошибке "that file type is not served" ("необслуживаемый тип файла"). Взамен пользовательские элементы управления внедряются в другие веб-страницы.

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

Чтобы создать пользовательский элемент управления в Visual Studio, выберите команду меню Website --> Add New Item (Веб-сайт --> Добавить новый элемент), а затем укажите шаблон Web User Control (Пользовательский веб-элемент управления).

Ниже приведен код простейшего пользовательского элемента управления - элемента, содержащего только статическую HTML-разметку. Этот элемент управления представляет строку верхнего колонтитула:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Banner.ascx.cs" Inherits="Banner" %>

<table style="width:100%; border:0; background-color:lightblue">
    <tr>
        <td style="font-family: Verdana,Arial; font-size: xx-large; color: Yellow; padding: 10px">
            USER CONTROL TEST PAGE
        </td>
    </tr>
    <tr>
        <td style="font-size: small; color: White; padding: 5px; text-align:right">
            <b>Пользовательский элемент управления</b>
        </td>
    </tr>
</table>

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

public partial class Banner : System.Web.UI.UserControl
{ }

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

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

<%@ Register TagPrefix="mycontrol" TagName="Banner" Src="~/Banner.ascx" %>

Эта строка с помощью атрибута Src идентифицирует исходный файл, содержащий пользовательский элемент управления. Она определяет также префикс (TagPrefix) и имя (TagName) дескриптора, который будет использоваться для объявления нового элемента управления на странице.

Точно так же, как префикс <asp:...> серверных элементов управления ASP.NET применяется для объявления элементов управления (например, <asp:TextBox>), собственные префиксы дескрипторов можно использовать для облегчения различения созданных элементов управления. В этом примере использован дескриптор с префиксом mycontrol и именем Banner. Полная страница выглядит следующим образом:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"  %>
<%@ Register TagPrefix="mycontrol" TagName="Banner" Src="~/Banner.ascx" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Основы ASP.NET</title>
</head>
<body>    
    <form id="form1" runat="server">
        <mycontrol:Banner ID="Banner1" runat="server" />
        <br />
        <asp:Label ID="Label1" runat="server"><b>Page Content</b></asp:Label>        
    </form>
</body>
</html>

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

В среде Visual Studio директиву Register создавать вручную не понадобится. Вместо этого, как только пользовательский элемент управления будет создан, можно просто выбрать файл .ascx в окне Solution Explorer (Проводник решений) и перетащить его на поверхность проектирования веб-формы (но не в окно представления исходного кода). Visual Studio автоматически добавит директиву Register и экземпляр дескриптора пользовательского элемента управления.

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

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

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

В целом этот процесс сводится к вырезанию и вставке. Однако при этом следует уделить внимание нескольким моментам:

1. Удалите все дескрипторы <html>, <head>, <body> и <form>. Они должны присутствовать на странице только в одном экземпляре, поэтому не могут быть добавлены в пользовательские элементы управления (которые могут многократно встречаться в одной странице). Удалите также дескриптор типа документа (DOCTYPE).

2. При наличии директивы Page замените ее директивой Control и удалите все атрибуты, не поддерживаемые директивой Control, такие как AspCompat, Buffer, ClientTarget, CodePage, Culture, EnableSessionState, EnableViewStateMac, ErrorPage, LCID, ResponseEncoding, Trace, TraceMode и Transaction.

3. Если модель отделенного кода не используется, удостоверьтесь, что имя класса включено в директиву Control посредством атрибута ClassName. Благодаря этому веб-страница, использующая данный элемент управления, может быть строго типизированной, что позволит ей получать доступ к свойствам и методам, добавленным в элемент управления. В случае применения модели отделенного кода класс отделенного кода нужно изменить так, чтобы он наследовался от класса UserControl, а не Page.

4. Измените расширение файла с .aspx на .ascx.