Опубликован: 13.07.2010 | Уровень: специалист | Доступ: платный
Самостоятельная работа 32:

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

Аннотация: Пользовательские элементы управления (user control). Специальные серверные элементы. Создание простого пользовательского элемента управления. Регистрация пользовательского элемента на странице. Программирование пользовательского элемента. Порядок генерации событий инициализации. Применение вспомогательных классов при создании сложных пользовательских элементов управления. Доступ из кода Web-страницы к составным компонентам пользовательского элемента управления. Динамическое создание пользовательского элемента управления. Управление динамической загрузкой многих пользовательских элементов управления (портальные каркасы).

Файлы к лабораторной работе Вы можете скачать здесь.

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

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

Файл пользовательского элемента управления может содержать то же самое, что и файл обычной исполнимой страницы, включая файл поддержки .cs, статический HTML-код, стандартные элементы управления. Они получают те же самые события, что и объект Page, имеют доступ к таким важным объектам-свойствам, как Application, Session, Request, Response. Но есть и существенные отличия:

  1. В отличие от страниц, файлы которых имеют расширение .aspx, пользовательские элементы управления должны храниться в файлах с расширением .ascx
  2. Объект страницы произведен от класса Page, а объект пользовательского элемента управления производится от класса UserControl. Но учитывая, что оба класса ( Page и UserConrol ) наследуют класс TemplateControl, они преобретают много одинаковых свойств и событий от этого класса


  3. Среда исполнения не может напрямую вызвать файл .ascx, а должна это делать через .aspx, в который внедряется ссылка на файл .ascx
  4. Файл пользовательского элемента управления не является отдельной страницей, поэтому не должен содержать дескрипторы <html>, <head>, <body>, <form>
  5. Вместо директивы @Page файл пользовательского элемента управления содержит директиву @Control

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

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

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

  • Создайте новый пустой сайт командой File/New/Website с именем UserControls

  • Выполните команду Website/Add New Item, выберите шаблон Web User Control и задайте имя Header.ascx

Созданный мастером файл Header.ascx содержит только одну строку директивы

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

Пользовательский элемент управления редактируется в оболочке точно также, как и обычная страница. Файл кодовой части .ascx.cs содержит тот же код, что и для обычной страницы. В данном упражнении он нам не нужен, поэтому ничего в нем делать не будем.

  • Поместите в интерфейсную часть Header.ascx ниже директивы @Control следующую HTML-разметку
<%@ Control Language="C#" AutoEventWireup="true" 
    CodeFile="Header.ascx.cs" Inherits="Header" %>
    
<table bgcolor="blue">
    <tr>
        <td>
            <font color="yellow" face="Vernada, Arial" size="6">
                <strong>Тестовая страница User Control</strong>
            </font>
        </td>
    </tr>
    <tr>
        <td align="right">
            <font color="white">
                <strong>Время создания: апрель 2009г &copy; Все права защищены</strong>
            </font>
        </td>
    </tr>
</table>
Листинг 32.2. Интерфейсный код файла Header.ascx

Эта разметка даст такое визуальное представление

Тестовая страница User Control

                                                   Время создания: апрель 2009г \copyright Все права защищены

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

Регистрация пользовательского элемента на странице

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

  • Добавьте командой Website/Add New Item новую страницу с именем HeaderTest.aspx для внедрения в нее пользовательского элемента управления

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

  1. Зарегистрировать элемент на странице, т.е. с помощью директивы @Register, помещенной в начале страницы после директивы @Page, нужно сообщить ASP.NET, что где-то на странице есть ссылка на пользовательский элемент управления
  2. Поместить пользовательский элемент управления на страницу, вставив в нужное место внутри дескриптора <form> дескриптор пользовательского элемента
  • Добавьте вручную на страницу HeaderTest.aspx сразу после директивы @Page следующую строку регистрации
<%@ Register Src="Header.ascx" TagPrefix="myElem" 
             TagName="Header" %>

Мы знаем, что для различения типа библиотечных элементов управления в начале их дескрипторного представления используется конструкция <префикс : тип_элемента атрибуты... />, например

<asp:TextBox ID="TextBox1" runat="server" />

Здесь asp играет роль префикса TagPrefix (или условного пространства имен), а TextBox - типа элемента управления TagName. Директива регистрации связывает вместе файл с кодом, имя и префикс для классификации и позволяет при размещении элемента на странице применять стандартный синтаксис дескрипторного представления серверных элементов. Значения myElem и Header мы задали произвольно, но далее эти значения на странице мы должны строго соблюдать, а значение атрибута Src (Source - источник) означает имя подключаемого файла с пользовательским элементом управления.

В зарегистрированных обозначениях пользовательского элемента управления синтаксис его подключения к странице HeaderTest.aspx будет представлен парным дескриптором

<myElem:Header ID="Header1" runat="server" ></myElem:Header>

или самозакрывающимся дескриптором

<myElem:Header ID="Header1" runat="server" />
  • Поместите вручную внутрь дескриптора <form> код объявления на странице пользовательского элемента управления, чтобы в результате пользовательская страница HeaderTest.aspx стала иметь следующую XML-разметку
<%@ Page Language="C#" AutoEventWireup="true" 
         CodeFile="HeaderTest.aspx.cs" Inherits="HeaderTest" %>
    
<%@ Register TagPrefix="myElem" TagName="Header" Src="Header.ascx" %>
    
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <myElem:Header ID="Header1" runat="server" />
    </div>
    </form>
</body>
</html>
Листинг 32.4. Дескрипторный код файла HeaderTest.ascx

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

В Visual Studio 2005 нам не обязательно руками прописывать приведенную регистрацию. Достаточно из панели Solution Explorer перенести внедряемый файл .ascx пользовательского элемента управления в нужное место страницы, включенной в режиме Design, и подправить в режиме Source сгенерированную оболочкой регистрацию. Разница состоит лишь в том, что стандартные элементы мы переносим на страницу из панели Toolbox, а пользовательские - из панели Solution Explorer.

Мы рассмотрели способ, которым к странице подключается файл с любым внешним кодом. Этот код реально может быть любой сложности, включая все мыслимые элементы управления. Обратите внимание, что код файла Header.ascx не содержит ссылок на другие страницы и готов использоваться на любой странице как дополнение.

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

  • Запустите тестовую страницу на выполнение, должен получиться такой результат

Иван Циферблат
Иван Циферблат
Россия, Таганрог, 36, 2000