Пользовательские элементы управления
Файлы к лабораторной работе Вы можете скачать 
здесь.
Пользовательские элементы управления (user control) разрабатывает сам программист в тех случаях, когда стандартные элементы управления его не удовлетворяют или он разработал удачный вариант кода. Такой элемент управления можно многократно использовать на многих страницах и последующие его модернизации немедленно будут отображаться на всех страницах, где он используется. Часто пользовательские элементы управления применяются для стандартизации (единообразия) интерфейса страниц, например, оформления верхнего и нижнего колонтитулов.
Пользовательский элемент управления представляет собой небольшую часть страницы, которая может содержать статический HTML-код и стандартные элементы управления. В пользовательских элементах управления можно предусмотреть свои свойства, методы и события. Пользовательские блоки кода могут многократно использоваться на разных страницах, но только одного сайта. Для применения в другом сайте его либо нужно скопировать в этот сайт, либо создавать библиотечные специальные серверные элементы наподобие стандартных ( custom server control ).
Файл пользовательского элемента управления может содержать то же самое, что и файл обычной исполнимой страницы, включая файл поддержки .cs, статический HTML-код, стандартные элементы управления. Они получают те же самые события, что и объект Page, имеют доступ к таким важным объектам-свойствам, как Application, Session, Request, Response. Но есть и существенные отличия:
- В отличие от страниц, файлы которых имеют расширение .aspx, пользовательские элементы управления должны храниться в файлах с расширением .ascx
- Объект страницы произведен от класса Page, а объект пользовательского элемента управления производится от класса UserControl. Но учитывая, что оба класса ( Page и UserConrol ) наследуют класс TemplateControl, они преобретают много одинаковых свойств и событий от этого класса
- Среда исполнения не может напрямую вызвать файл .ascx, а должна это делать через .aspx, в который внедряется ссылка на файл .ascx
- Файл пользовательского элемента управления не является отдельной страницей, поэтому не должен содержать дескрипторы <html>, <head>, <body>, <form>
- Вместо директивы @Page файл пользовательского элемента управления содержит директиву @Control
Среда проектирования позволяет видеть внедренный в страницу пользовательский элемент управления на поверхности конструктора Design страницы.
Упражнение 1. Создание простого пользовательского элемента управления
Заготовку пользовательского элемента управления легко создает мастер среды проектирования. Создадим пользовательский элемент управления, который будет представлять собой простой верхний колонтитул страницы и состоять из статического HTML-текста.
Созданный мастером файл Header.ascx содержит только одну строку директивы
<%@ Control Language="C#" AutoEventWireup="true"
CodeFile="Header.ascx.cs" Inherits="Header" %>Пользовательский элемент управления редактируется в оболочке точно также, как и обычная страница. Файл кодовой части .ascx.cs содержит тот же код, что и для обычной страницы. В данном упражнении он нам не нужен, поэтому ничего в нем делать не будем.
<%@ 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г © Все права защищены</strong>
</font>
</td>
</tr>
</table>
Листинг
32.2.
Интерфейсный код файла Header.ascx
Эта разметка даст такое визуальное представление
Тестовая страница User Control
Время создания: апрель 2009г
Все права защищеныВсе, что будет находиться на одной странице .ascx, будет представлять собой один завершенный пользовательский элемент управления, который мы можем вставлять в любое место исполнимой страницы.
Регистрация пользовательского элемента на странице
Продолжим выполнение нашего упражнения. Код пользовательского элемента управления предполагает его использование на одной или нескольких исполнимых страницах .aspx, поэтому создадим такую страницу.
-
Добавьте
командой Website/Add New Item новую страницу с именем HeaderTest.aspx для
внедрения в нее пользовательского элемента управления
Чтобы применить пользовательский элемент управления на странице, нужно выполнить следующие шаги:
- Зарегистрировать элемент на странице, т.е. с помощью директивы @Register, помещенной в начале страницы после директивы @Page, нужно сообщить ASP.NET, что где-то на странице есть ссылка на пользовательский элемент управления
- Поместить пользовательский элемент управления на страницу, вставив в нужное место внутри дескриптора <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 услужливо предоставляет всю необходимую информацию для правильного написания синтаксической конструкции.
Мы рассмотрели способ, которым к странице подключается файл с любым внешним кодом. Этот код реально может быть любой сложности, включая все мыслимые элементы управления. Обратите внимание, что код файла Header.ascx не содержит ссылок на другие страницы и готов использоваться на любой странице как дополнение.
На файл пользовательского элемента, в свою очередь, может быть помещен другой пользовательский элемент, разработанный ранее. В таком случае этот подключаемый элемент нужно зарегистрировать на родителе точно так же, как это делается при подключении к конечной странице.
-
Запустите
тестовую страницу на выполнение, должен получиться такой
результат
