Опубликован: 07.05.2010 | Доступ: свободный | Студентов: 1678 / 62 | Оценка: 4.56 / 4.06 | Длительность: 34:11:00
Лекция 6:

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

Аннотация: Пользовательские элементы управления: создание, регистрация. Порядок генерации событий инициализации. Добавление событий. Доступ из кода Web-страницы к составным компонентам пользовательского элемента управления. Динамическое создание пользовательского элемента управления. Преобразование страницы в пользовательский элемент управления. Управление динамической загрузкой многих пользовательских элементов управления (портальные каркасы).
Ключевые слова: элементы управления, нижний колонтитул, HTML-код, сайт, файл, объект, доступ, UserControl, дескриптор, heading, директива, верхний колонтитул, представление, префикс, ASP, синтаксис, header, значение, Дополнение, таймер, двойной щелчок, модификаторы доступа, целый тип, www-броузер, инициализация объекта, конструктор класса, load, labels, after-image, DataList, hyperlink, IMG, alt, делегаты, сигнатура, область видимости, класс приложений, multicast, Паскаль, extensive, гиперссылка, WebControl, 'widths', имя объекта, интегрированность, метод доступа, инкапсуляция, базовый класс, класс свойств, item, Green, blue, input, submit, inheritance, статические методы, placeholder, позиционирование, этапы проектирования, место, редактор кода, IntelliSense, класс, script, title, Panel, ПО, очередь, оболочка, Height, расширяемость, контейнер, цвет фона, шрифт, список, скрытое поле, AutoPostBack, re-design, BorderWidth, BorderStyle, 'ridge', интерфейс, Registered

Файлы к лекции Вы можете скачать здесь

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

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

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

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

Посмотрите, что создал мастер. Файл .ascx содержит только одну строку директивы

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

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

  • Поместите в файл Header.ascx следующую HTML-разметку
<table width="100%"  border="0" bgcolor="blue">
  <tr>
    <td>
	<font face="Vernada, Arial" size="6" color="yellow">
	   <b>Тестовая страница User Control</b>
	</font>	</td>
  </tr>
  <tr>
    <td align="right">
	  <font size="3" color="white">
	    <b>Время создания: март 2007г. &copy; Все права защищены</b>
    </font>	</td>
  </tr>
</table>

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

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

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

  • Создайте новую страницу с именем HeaderTest.aspx для внедрения в нее пользовательского элемента управления

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

  1. Зарегистрировать элемент на странице, т.е. с помощью директивы @Register, помещенной в начале страницы, нужно сообщить ASP.NET, что где-то на странице есть ссылка на пользовательский элемент управления.
  2. Поместить пользовательский элемент управления на страницу, вставив в нужное место внутри дескриптора <form> ссылку-тег на этот элемент.

Директива @Register для нашего примера имеет следующий вид

<%@ Register TagPrefix="myElem" TagName="Header" Src="Header.ascx" %>

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

<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" />
В Visual Studio 2005 нам не нужно руками прописывать приведенную регистрацию. Достаточно в окне Solution Explorer перенести внедряемый файл Header.ascx в нужное место страницы и подправить, при необходимости, сгенерированную оболочкой регистрацию.

В результате пользовательская страница HeaderTest.aspx должна иметь такую HTML-разметку

<%@ Page AutoEventWireup="true" CodeFile="HeaderTest.aspx.cs" Inherits="HeaderTest"
    Language="C#" %>
<%@ Register TagPrefix="myElem" TagName="Header" Src="Header.ascx" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Тест элемента user control</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <myElem:Header ID="Header1" runat="server" />
        </div>
    </form>
</body>
</html>

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