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

125

Базовый набор элементов управления 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.

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

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

Чтобы создать пользовательский элемент управления в 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.

Skillfactory.ru
Пройди тесты
Лучший чат для C# программистов