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

Добавление событий

Событие - это встроенный механизм C#, с помощью которого автоматически обеспечивается уведомление зарегистрированных объектов о необходимости выполнения ими какого-то действия. Объект предоставляет свои методы-обработчики для реагирования на возникновение определенного события. В этом случае говорят, что объект подписался на некоторое событие. Такой механизм позволяет отдельным объектам обмениваться сообщениями и реагировать на них.

Технически событие представляет собой некую адресную переменную, ссылающуюся на экземпляр класса, поддерживающего событие. Если значение этой ссылки равно null, то событие не произошло, поскольку нет соответствующего объекта. Один объект генерирует событие (создает экземпляр) и посылает уведомление через канал сообщений операционной системы. Другие, подписанные на это событие объекты приложения, получают это сообщение вместе с дополнительной информацией и запускают соответствующие обработчики, предварительно передав им дополнительную информацию в качестве аргументов.

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

С помощью конструктора делегата при создании его нового экземпляра в событие добавляется ссылка на обработчик и устанавливается контроль за сигнатурой этого обработчика. Этот процесс называется регистрацией события в классе или подпиской на событие. События поддерживают многоадресатную передачу (multicasting). Это значит, что одно и тоже событие могут принимать многие объекты, но обрабатывать это событие каждый объект будет своим методом, который он указал в конструкторе делегата при подписке на это событие.

На предыдущем шаге мы с помощью вспомогательного класса LinkTableItem могли добавлять в классе пользовательского элемента управления LinkTableTest новые гиперссылки типа asp:HyperLink к элементу asp:DataList. По щелчку клиента на одной из гиперссылок он безусловно направлялся по указанному адресу. Теперь же мы хотим перехватывать и распознавать щелчок на любой гиперссылке для контроля за действиями пользователя. Сейчас мы не будем оценивать полномочия пользователя, просто распознаем гиперссылку и выведем ее на экран.

Ранее в дескрипторном представлении пользовательского элемента управления мы применяли стандартный элемент asp:HyperLink. Если посмотреть на класс этого элемента System.Web.UI.WebControls. HyperLink через панель Object Browser, то можно увидеть, что он не имеет никаких событий

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

Эти события мы и будем перехватывать в нашем элементе управления.

Измените в шаблоне <ItemTemplate> дескрипторного представления файла LinkTable.ascx имя элемента HyperLink на LinkButton и имя атрибута NavigateUrl на CommandArgument, после чего файл должен стать таким

<%@ Control Language="C#" AutoEventWireup="true" 
    CodeFile="LinkTable.ascx.cs" Inherits="LinkTable" %>
    
<table cellpadding="2">
    <tr>
        <td>
            <asp:Label ID="lblTitle" runat="server" Font-Bold="true" 
                       Font-Names="Vernada" Font-Size="Small"
                       ForeColor="#C00000">
                <%--Здесь будет заголовок--%>
            </asp:Label>
        </td>
    </tr>
    <tr>
        <td>
            <asp:DataList ID="listContent" runat="server">
                <ItemTemplate>
                    <img alt="маркер" height="13" src="32_27.gif" width="25">
                    <asp:LinkButton ID="HyperLink1" runat="server" 
                        CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Url") %>'
                        Text='<%# DataBinder.Eval(Container.DataItem, "Text") %>'>
                    </asp:LinkButton>
                </ItemTemplate>
            </asp:DataList>
        </td>
    </tr>
</table>

Мы хотим создать событие с именем LinkClicked. Для распознавания выбранного пункта списка нам вместе с будущим событием LinkCliked нужно будет передавать информацию о значениях свойств Text и Url, которые мы определили ранее во вспомогательном классе LinkTableItem.cs. Затем в обработчике события LinkClicked мы распознаем эту информацию и выведем ее на экран.

Напрямую экземпляр класса LinkTableItem.cs в аргументах события передавать нельзя - не тот тип, поэтому упакуем его в класс LinkTableEventArgs, который будет наследником библиотечного класса System.EventArgs. Объявим также делегат события в глобальной области видимости.

Откройте файл LinkTable.ascx.cs пользовательского элемента управления и добавьте в него объявление нового класса и делегата, после чего общий код должен быть таким

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
    
public partial class LinkTable : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
    
    }
    
    public string Title
    {
        get { return lblTitle.Text; }
        set { lblTitle.Text = value; }
    }
    
    private LinkTableItem[] items;
    public LinkTableItem[] Items
    {
        get { return items; }
        set
        {
            items = value;
    
            // Обновляем сетку
            listContent.DataSource = items;
            listContent.DataBind();
        }
    }
}
    
// Объявляем делегат будущего события LinkClicked, 
// который определит сигнатуру события и обработчика
public delegate void LinkClickedEventHandler(object sender, LinkTableEventArgs e);
    
// Класс-упаковка экземпляра LinkTableItem для 
// передачи с событием в качестве аргумента
public class LinkTableEventArgs : EventArgs
{
    // Конструктор
    public LinkTableEventArgs(LinkTableItem item)
    {
        selectedItem = item;
    }
    
    // Внутреннее поле будет хранить объект гиперссылки
    // и контролируется свойством "только для чтения"
    private LinkTableItem selectedItem;
    public LinkTableItem SelectedItem
    {
        get { return selectedItem; }
    }
    
    // Внутренне поле хранит флаг отмены, переданный сгенерировавшим 
    // событие классом-источником для обработчика класса-приемника
    private bool cancel = false;// Инициализируется при создании
    public bool Cancel
    {
        get { return cancel; }
        set { cancel = value; }
    }
}

Таким образом, мы объявили класс для упаковки передаваемой в событии информации. мы также объявили делегата, с помощью которого будет создано событие. Теперь нужно добавить код, который перехватит пользовательский щелчок на определенной гиперссылке, распознает эту гиперссылку и через созданное событие LinkClicked отправит эту информацию в канал сообщений Windows. Конечно же, этим должен заниматься класс LinkTable поддержки пользовательского элемента управления.

Откройте на редактирование файл LinkTable.ascx в режиме Design

Выделите пользовательский элемент управления listContent и в панели Properties двойным щелчком на поле события ItemCommand создайте обработчик с именем по умолчанию

Добавьте в класс LinkTable и созданный обработчик стандартного события ItemCommand следующий код

public partial class LinkTable : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
    
    }
    
    public string Title
    {
        get { return lblTitle.Text; }
        set { lblTitle.Text = value; }
    }
    
    private LinkTableItem[] items;
    public LinkTableItem[] Items
    {
        get { return items; }
        set
        {
            items = value;
    
            // Обновляем сетку
            listContent.DataSource = items;
            listContent.DataBind();
        }
    }
    
    // Объявляем в классе наше событие LinkClicked 
    // с помощью ранее созданного глобального делегата
    public event LinkClickedEventHandler LinkClicked;
    
    protected void listContent_ItemCommand(object source, DataListCommandEventArgs e)
    {
        if (LinkClicked != null)
        {
            // Выделяем объект ссылки, на которой был выполнен щелчок
            LinkButton link = (LinkButton)e.Item.Controls[1];
    
            // Выделяем нужные свойства Text и Url через атрибуты
            // дескриптора элемента LinkButton и сохраняем их
            // в экземпляре вспомогательного класса
            LinkTableItem item = new LinkTableItem(link.Text, link.CommandArgument);
    
            // Передаем ссылку на сохраненные свойства в класс упаковки аргументов
            LinkTableEventArgs args = new LinkTableEventArgs(item);
    
            // Генерируем событие
            LinkClicked(this, args);
    
            // Пускаем клиента по ссылке, если класс-получатель не запретил
            if (args.Cancel != true)
            {
                Response.Redirect(item.Url);
            }
        }
    }
}

Теперь событие LinkClicked будет возникать всякий раз, когда пользователь щелкнет на гиперссылке пользовательского элемента управления. Классом-получателем этого события определим нашу тестовую страницу. Именно в ней мы создадим функцию-обработчик, которая распакует переданные событием аргументы и выведет полученную информацию на экран. Проверку существования события мы выполняем на случай, чтобы наверняка предотвратить генерацию системного исключения, если не существует ни одного обработчика.

Учитывая, что в режиме проектирования оболочка поддерживает автоматическое создание обработчиков через панель Properties только для событий библиотечных классов, создадим заготовку обработчика вручную. При этом нужно соблюсти сигнатуру, установленную объявленным ранее делегатом. Но и в этом случае подсказчик IntelliSense оболочки нам помогает.

Откройте на редактирование файл LinkTableTest.aspx.cs и в конце обработчика события Page_Load() класса LinkTableTest начните набирать имя объекта LinkTable1, под которым на тестовой странице у нас числится экземпляр зарегистрированного на ней пользовательского элемента управления. Вы сразу увидите реакцию подсказчика кода IntelliSense

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

LinkTable1.LinkClicked += new LinkClickedEventHandler(LinkTable1_LinkClicked);

Если выбрать второй способ, тогда нужно в дескрипторном представлении пользовательского элемента добавить атрибут OnLinkClicked="LinkTable1_LinkClicked", чтобы привязать к событию созданный обработчик (обратите внимание, что имя атрибута формируется из имени события и префикса On ). Но и в этом случае подсказчик кода нам тоже помогает

Выберем второй способ регистрации обработчика для события LinkClicked.

Уничтожте регистрацию события в классе LinkTableTest, скопируйте имя сгенерированного обработчика и добавьте его в атрибут OnLinkClicked="LinkTable1_LinkClicked" дескриптора <uc1:LinkTable ID="LinkTable1" runat="server" /> файла тестовой страницы LinkTableTest.aspx

В режиме Design тестовой страницы разместите последней текстовую метку asp:Label из вкладки Standard, задайте ей имя lblInfo и очистите поле ее свойства Text (либо удалите одноименный атрибут в дескрипторе). В ней мы будем отображать информацию о нажатой гиперссылке

Вернитесь в файл LinkTest.aspx.cs и заполните обработчик так

protected void LinkTable1_LinkClicked(object sender, LinkTableEventArgs e)
    {
        // Ищем подстроку в вызывающей строке
        if (e.SelectedItem.Text.IndexOf("Диалог-Сервис") > 0)
        {
            e.Cancel = false;// Пропустить
        }
        else
        {
            e.Cancel = true; // Не пускаем дальше
            lblInfo.Text = "Вы щелкнули " +
                "\"" + e.SelectedItem.Text + "\".";
            lblInfo.Text += " Извините, но Вам не разрешено идти на " +
                e.SelectedItem.Url + "!!!";
        }
    }

Запустите тестовую страницу LinkTableTest.aspx и полюбуйтесь на свою работу

Упражнение 4. Доступ из кода Web-страницы к составным компонентам пользовательского элемента управления

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

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

Способ 1

В пользовательский элемент вводят промежуточные свойства или методы доступа, через которые из Web-страницы обращаются к его компонентам. Это напоминает прием, который применяется в C++ для поддержания инкапсуляции (закрытости) данных: переменные-члены класса с модификатором доступа private упаковывают в функции доступа public, которые сами видят эти переменные, а их, в свою очередь, видят клиенты этого класса.

Пусть, например, пользовательский элемент управления MyControl1 как объект порождается классом MyControl и в качестве одного из компонентов содержит в себе объект Label1 библиотечного класса System.Web.UI.WebControls.Label. Класс Label наследует от базового класса System.Web.UI.WebControls.WebControl свойство BackColor, которое, в свою очередь, имеет тип System.Drawing.Color. Напрямую из Web-страницы нельзя установить новое значение свойства BackColor компонента Label1 пользовательского элемента. Но можно открыть доступ к этому свойству для Web-страницы, введя промежуточное свойство BackColor (или с другим именем) в классе самого пользовательского элемента. Сказанное схематично изображено на рисунке

Выполним это на практике.

Создайте заготовку пользовательского элемента Web User Control с именем MyControl.ascx с раздельным кодом (флажок Place code in separate file мастера включен)

Перейдите в режим Design редактора заготовки и поместите на нее из вкладки Standard элемент Label с именем Label1

В панели Solution Explorer откройте файл отделенного кода MyControl.ascx.cs, удалите из класса MyControl заготовку обработчика Page_Load() за ненадобностью и дополните класс свойствами доступа, чтобы он стал таким

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
  
public partial class MyControl : System.Web.UI.UserControl
{
    public string Text
    {
        get { return Label1.Text; }
        set { Label1.Text = value; }
    }
  
    public System.Drawing.Color BackColor
    {
        get { return Label1.BackColor; }
        set { Label1.BackColor = value; }
    }
  
    public System.Drawing.Color ForeColor
    {
        get { return Label1.ForeColor; }
        set { Label1.ForeColor = value; }
    }
}

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

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

Из панели Solution Explorer из дерева файлов приложения перенесите на тестовую страницу узел MyControl.ascx. Убедитесь, что экземпляр пользовательского элемента управления зарегистрировался на тестовой странице под именем MyControl1

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

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

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

Поместите на страницу под пользовательским элементом управления компонент RadioButtonList из вкладки Standard и убедитесь, что он имеет ID="RadioButtonList1"

Через коллекцию Items элемента RadioButtonList1 задайте три радиокнопки с такими свойствами

Text="Красный"; Value="Red"

Text="Зеленый"; Value="Green"

Text="Синий"; Value="Blue"

Установите свойство RepeatDirection элемента RadioButtonList1 в значение Horozontal

Выделите компонент RadioButtonList1 и через панель Properties создайте обработчик для его события SelectedIndexChanged

Под списком радиокнопок поместите компонент Input (Submit) из вкладки HTML

Дескрипторное представление страницы будет иметь вид

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="MyControlTest.aspx.cs" 
    Inherits="MyControlTest" %>
  
<%@ Register Src="MyControl.ascx" TagName="MyControl" TagPrefix="uc1" %>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <uc1:MyControl ID="MyControl1" runat="server" />
        <br />
        <br />
        <asp:RadioButtonList ID="RadioButtonList1" runat="server" 
             RepeatDirection="Horizontal" 
             OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
            <asp:ListItem Value="Red">Красный</asp:ListItem>
            <asp:ListItem Value="Green">Зеленый</asp:ListItem>
            <asp:ListItem Value="Blue">Синий</asp:ListItem>
        </asp:RadioButtonList></div>
        <br />
        <input id="Submit1" type="submit" value="submit" />
    </form>
</body>
</html>

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

Заполните обработчик RadioButtonList1_SelectedIndexChanged() страницы в файле MyControlTest.aspx.cs следующим кодом

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
  
public partial class MyControlTest : System.Web.UI.Page
{
    protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        int index = RadioButtonList1.SelectedIndex;
  
        switch (index)
        {
            case 0:
                MyControl1.ForeColor = System.Drawing.Color.White;
                MyControl1.BackColor = System.Drawing.Color.Red;
                break;
            case 1:
                MyControl1.ForeColor = System.Drawing.Color.Aqua;
                MyControl1.BackColor = System.Drawing.Color.Green;
                break;
            case 2:
                MyControl1.ForeColor = System.Drawing.Color.Yellow;
                MyControl1.BackColor = System.Drawing.Color.Blue;
                break;
        }
  
        if(index != -1)
            MyControl1.Text = RadioButtonList1.Items[index].Value;
    }
}

Выполните страницу и убедитесь, что при щелчке на кнопке код исполнимой страницы меняет свойства компонента Label1 через добавленные нами дополнительные глобальные свойства

Способ 2

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

Скопируйте через панель Solution Explorer, как это мы делали ранее, файл исполнимой страницы MyControlTest.aspx и файл пользовательского элемента управления MyControl.ascx

Присвойте копиям новые имена MyControlTestExt.aspx и MyControlExt.ascx соответственно (сопровождающие застраничные кодовые файлы оболочка переименует автоматически)

Сделайте страницу MyControlTestExt.aspx стартовой, выполнив на ее узле в панели Solution Explorer команду Set As Start Page

Измените в файле MyControlTestExt.aspx значение параметра Inherits на Inherits="MyControlTestExt" директивы @Page

Измените параметр Src директивы регистрации в файле MyControlTestExt.aspx

<%@ Register Src="MyControlExt.ascx" TagName="MyControl" TagPrefix="uc1" %>

Откройте файл скрытого кода MyControlExt.ascx.cs и измените в нем класс MyControl, чтобы он выглядел так

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
  
public partial class MyControlExt : System.Web.UI.UserControl
{
    // Раскрываем весь компонент Label1
    // Имя свойства InnerLabel1 выбрали произвольно
    // Используется только get-аксессор
    public Label InnerLabel1
    {
        get { return Label1; }
    }
}

Скорректируйте в файле MyControlExt.ascx атрибут директивы Control так Inherits="MyControlExt"

Откройте файл MyControlTestExt.aspx.cs скрытого кода тестовой страницы и отредактируйте его для доступа к прямым свойствам компонента Label1 с использованием созданного адреса InnerLabel1

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
  
public partial class MyControlTestExt : System.Web.UI.Page
{
    protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        int index = RadioButtonList1.SelectedIndex;

        // Доступ к прямым свойствам компонента Label1 выполняем
        // через ссылку на этот компонент в родителе MyControl1
        switch (index)
        {
            case 0:
                MyControl1.InnerLabel1.ForeColor = System.Drawing.Color.White;
                MyControl1.InnerLabel1.BackColor = System.Drawing.Color.Red;
                break;
            case 1:
                MyControl1.InnerLabel1.ForeColor = System.Drawing.Color.Aqua;
                MyControl1.InnerLabel1.BackColor = System.Drawing.Color.Green;
                break;
            case 2:
                MyControl1.InnerLabel1.ForeColor = System.Drawing.Color.Yellow;
                MyControl1.InnerLabel1.BackColor = System.Drawing.Color.Blue;
                break;
        }

        if(index != -1)
            MyControl1.InnerLabel1.Text = RadioButtonList1.Items[index].Value;
    }
}

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

Какой способ выбрать - решает программист!

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

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

Для динамического создания пользовательского элемента управления ребуется выполнить следующие шаги:

Есть некоторая специфика динамического создания пользовательского элемента управления по сравнению с библиотечным компонентом. Нельзя создать пользовательский элемент напрямую, как это делается с библиотечным элементом управления через конструктор класса. Пользовательский элемент управления состоит не только из поддерживающего класса в файле *.ascx.cs, но и дескрипторной части файла *.ascx. Поэтому на этапе проектирования он не представлен общим классом, экземпляр которого можно было-бы создать с помощью конструктора. Экземпляр пользовательского элемента управления создается самой ASP.NET объединением этих двух частей на этапе выполнения.

Скопируйте через панель Solution Explorer, как это мы делали ранее, файл тестовой страницы MyControlTestExt.aspx и файл пользовательского элемента управления MyControlExt.ascx

Присвойте копиям новые имена MyControlDynamicTest.aspx и MyControlDynamic.ascx соответственно (застраничные файлы оболочка переименует автоматически)

Сделайте страницу MyControlDynamicTest.aspx стартовой, выполнив на ее узле в панели Solution Explorer команду Set As Start Page

Откройте файл MyControlDynamic.ascx в режиме Source и исправьте в директиве @Control атрибут подключаемого класса так Inherits =" MyControlDynamic "

Откройте застраничный файл MyControlDynamic.ascx.cs и измените имя класса на MyControlDynamic

Закройте все предыдущие редактируемые документы командой меню Window/Close All Documents

Откройте на редактирование страницу MyControlDynamicTest.aspx в режиме Design, удалите наш пользовательский элемент управления Label1 и поместите на его место из вкладки Standard стандартный элемент управления PlaceHolder

Перейдите в файле MyControlDynamicTest.aspx в режим Source редактора страницы, откорректируйте атрибут Inherits =" MyControlDynamicTest " и удалите полностью старый код директивы регистрации

<%@ Register Src="MyControlExt.ascx" TagName="MyControl" TagPrefix="uc1" %>

В этом же файле MyControlDynamicTest.aspx в режиме Source удалите из дескриптора <asp:RadioButtonList> атрибут регистрации обработчика

OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged"

На данном этапе страница в дескрипторном представлении будет такой

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="MyControlDynamicTest.aspx.cs" 
    Inherits="MyControlDynamicTest" %>
  
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:PlaceHolder ID="PlaceHolder1" runat="server" />
        <br />
        <br />
        <asp:RadioButtonList ID="RadioButtonList1" runat="server" 
                             RepeatDirection="Horizontal">
            <asp:ListItem Value="Red">Красный</asp:ListItem>
            <asp:ListItem Value="Green">Зеленый</asp:ListItem>
            <asp:ListItem Value="Blue">Синий</asp:ListItem>
        </asp:RadioButtonList>
        <br />
        <input id="Submit1" type="submit" value="submit" />
    </div>
    </form>
</body>
</html>

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

Откройте на редактирование застраничный MyControlDynamicTest.aspx.cs, выполнив команду контекстного меню View Code редактора

Измените код обработчика Page_Load(), чтобы он стал таким

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
  
public partial class MyControlDynamicTest : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // Создаем экземпляр класса поддержки
        // пользовательского элемента управления
        MyControlDynamic MyControl1 = (MyControlDynamic) 
            Page.LoadControl("MyControlDynamic.ascx");
    
        // Добавляем объект в зарезервированное место страницы
        PlaceHolder1.Controls.Add(MyControl1);
  
        int index = RadioButtonList1.SelectedIndex;
  
        // Доступ к прямым свойствам компонента Label1 выполняем
        // через ссылку на этот компонент в родителе MyControl1
        switch (index)
        {
            case 0:
                MyControl1.InnerLabel1.ForeColor = System.Drawing.Color.White;
                MyControl1.InnerLabel1.BackColor = System.Drawing.Color.Red;
                break;
            case 1:
                MyControl1.InnerLabel1.ForeColor = System.Drawing.Color.Aqua;
                MyControl1.InnerLabel1.BackColor = System.Drawing.Color.Green;
                break;
            case 2:
                MyControl1.InnerLabel1.ForeColor = System.Drawing.Color.Yellow;
                MyControl1.InnerLabel1.BackColor = System.Drawing.Color.Blue;
                break;
        }
  
        if(index != -1)
            MyControl1.InnerLabel1.Text = RadioButtonList1.Items[index].Value;
    }
}

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

Запустите страницу MyControlDynamicTest.aspx на выполнение и убедитесь в работоспособности результата, как будто-бы пользовательский элемент был помещен на исполнимую страницу в декларативном режиме

Упражнение 6. Управление динамической загрузкой многих пользовательских элементов управления (портальные каркасы)

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

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

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

Создайте новую страницу DynamicUserControls.aspx с раздельным кодом и сделайте ее стартовой

В раскрывающемся списке панели Properties выберите элемент DOCUMENT и задайте его свойству Title значение Портальные каркасы

В режиме Design поместите с вкладки Standard элемент Panel и присвойте ему имя Panel1 (оно генерируется автоматически). Этот элемент будет служить контейнером для других элементов управления, в том числе и для пользовательского

Поместите внутрь контейнера Panel1 друг за другом по вертикали стандартные элементы

DropDownList с автоматически сгенерированным именем DropDownList1 - для выбора загружаемого в контейнер пользовательского элемента управления

PlaceHolder с автоматически сгенерированным именем PlaceHolder1 - для позиционирования в контейнере пользовательского элемента управления

Label с автоматически сгенерированным именем Label1 - для отображения имени файла, из которого в контейнер загружен пользовательский элемент управления

Интерфейс страницы на этапе проектирования должен быть примерно таким

По большому счету нам в данном примере безразлично, какие имена будут иметь экземпляры дочерних элементов. Однозначно различать их в коде мы можем по найденным ссылкам. Ссылки, в свою очередь, будем искать в именованном контейнере-панели по типу дочернего элемента, поскольку помещенные нами элементы имеют разный тип. Но сама оболочка Visual Studio 2005 требует, чтобы на странице не было декларативно объявляемых дескрипторов с одинаковыми значениями ID.

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

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

Ранее мы перечислили пользовательские элементы управления, которые создали в данной работе. Выберем несколько их них для динамического размещения. Имена этих элементов нужно занести в список DropDownList1. Пусть это будут элементы:

Выделите объект DropDownList1 в контейнере Place1 и заполните декларативно его свойство Items так

В скрытом поле Value мы указали имена файлов, которые в будущем должны будем создать.

Установите для элемента DropDownList1 его свойство AutoPostBack в значение True, чтобы обеспечить постинг страницы при выборе пользователем нужной опции

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

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

Через раскрывающийся список панели Properties выделите контейнер Panel1 и настройте его свойства так

BackColor = Web/Gainsboro - цвет фона

BorderWidth = 1px - толщина рамки

HorizontalAlign = Center - расположение дочерних элементов

BorderStyle = Ridge - стиль контейнера

EnableViewState =" False " - отключить механизм сохранения состояния вида

В режиме Design разрабатываемой страницы DynamicUserControls.aspx разместите на ней по вертикали друг за другом еще две копии контейнера Place1 вместе с его дочерними элементами и присвойте им имена Panel2, Panel3

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

Дескрипторное представление страницы должно быть таким

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="DynamicUserControls.aspx.cs" Inherits="DynamicUserControls" %>
    
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Портальные каркасы</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Panel ID="Panel1" runat="server" BackColor="Gainsboro" BorderStyle="Ridge" BorderWidth="1px"
                EnableViewState="False" HorizontalAlign="Center">
                <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">
                    <asp:ListItem Value="None">(None)</asp:ListItem>
                    <asp:ListItem Value="HeaderTest.ascx">Верхний колонтитул</asp:ListItem>
                    <asp:ListItem Value="TimeDisplayTest.ascx">Кнопка 'время-дата'</asp:ListItem>
                    <asp:ListItem Value="LinkTableTest.ascx">Контролируемый список гиперссылок</asp:ListItem>
                    <asp:ListItem Value="MyControlTest.ascx">С настройкой внутренних компонентов</asp:ListItem>
                </asp:DropDownList><br />
                <br />
                <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
                <br />
                <br />
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></asp:Panel>
            <br />
            <asp:Panel ID="Panel2" runat="server" BackColor="Gainsboro" BorderStyle="Ridge" BorderWidth="1px"
                EnableViewState="False" HorizontalAlign="Center">
                <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True">
                    <asp:ListItem Value="None">(None)</asp:ListItem>
                    <asp:ListItem Value="HeaderTest.ascx">Верхний колонтитул</asp:ListItem>
                    <asp:ListItem Value="TimeDisplayTest.ascx">Кнопка 'время-дата'</asp:ListItem>
                    <asp:ListItem Value="LinkTableTest.ascx">Контролируемый список гиперссылок</asp:ListItem>
                    <asp:ListItem Value="MyControlTest.ascx">С настройкой внутренних компонентов</asp:ListItem>
                </asp:DropDownList><br />
                <br />
                <asp:PlaceHolder ID="PlaceHolder2" runat="server"></asp:PlaceHolder>
                <br />
                <br />
                <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label></asp:Panel>
            <br />
            <asp:Panel ID="Panel3" runat="server" BackColor="Gainsboro" BorderStyle="Ridge" BorderWidth="1px"
                EnableViewState="False" HorizontalAlign="Center">
                <asp:DropDownList ID="DropDownList3" runat="server" AutoPostBack="True">
                    <asp:ListItem Value="None">(None)</asp:ListItem>
                    <asp:ListItem Value="HeaderTest.ascx">Верхний колонтитул</asp:ListItem>
                    <asp:ListItem Value="TimeDisplayTest.ascx">Кнопка 'время-дата'</asp:ListItem>
                    <asp:ListItem Value="LinkTableTest.ascx">Контролируемый список гиперссылок</asp:ListItem>
                    <asp:ListItem Value="MyControlTest.ascx">С настройкой внутренних компонентов</asp:ListItem>
                </asp:DropDownList><br />
                <br />
                <asp:PlaceHolder ID="PlaceHolder3" runat="server"></asp:PlaceHolder>
                <br />
                <br />
                <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label></asp:Panel>
        </div>
    </form>
</body>
</html>

Выполните сформированную страницу DynamicUserControls.aspx, чтобы убедиться в работоспособности настроек режима проектирования

Мы выполнили интерфейсную заготовку портальных каркасов на исполнимой странице. Теперь пришла пора наполнить их функциональностью, которая бы обеспечила контейнерную загрузку выбранных пользовательских элементов управления. Эту функциональность мы обеспечим, кодируя застраничный файл DynamicUserControls.aspx.cs.

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

Откройте на редактирование файл DynamicUserControls.aspx.cs и добавьте в класс DynamicUserControls следующий код

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
  
public partial class DynamicUserControls : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // Загружаем портальные каркасы
        MyLoadControls(Panel1);
        MyLoadControls(Panel2);
        MyLoadControls(Panel3);
    }
  
    // Вспомогательная функция
    private void MyLoadControls(Control containerPanel)
    {
        // Объявляем вспомогательные ссылки на интерфейсные
        // элементы текущего контейнера
        DropDownList list = null;
        PlaceHolder ph = null;
        Label lbl = null;
  
        // Перебираем все дочерние элементы текущего 
        // контейнера и ищем ссылки на объекты дочерних
        // интерфейсных элементов по их типам
        foreach (Control ctrl in containerPanel.Controls)
        {
            if (ctrl is DropDownList)
                list = (DropDownList)ctrl;
            else if (ctrl is PlaceHolder)
                ph = (PlaceHolder)ctrl;
            else if (ctrl is Label)
                lbl = (Label)ctrl;
        }
  
        // Берем информацию из выделенного
        // элемента списка текущего контейнера
        string lstValue = list.SelectedItem.Value;
        string lstText = list.SelectedItem.Text;
        lbl.Text = "";
  
        // Заполняем текущий контейнер.
        // Проверяем наличие нужного расширения
        if (lstValue.EndsWith(".ascx"))
        {
            ph.Controls.Add(Page.LoadControl(lstValue));
            lbl.Text = "Загрузили: " + lstValue + " - " + lstText;
        }
    }
}

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

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

В панели Solution Explore выделите при нажатой клавише Ctrl следующие файлы

HeaderTest.aspx

TimeDisplayTest.aspx

LinkTableTest.aspx

MyControlTest.aspx

Выполните команду Copy затем Paste (на верхнем узле проекта) контекстного меню

Присвойте копиям те же самые имена, только с расширением .ascx

Откройте новые файлы в дескрипторном режиме и замените директиву @Page на @Control, все остальные атрибуты бывшей директивы @Page оставьте прежними. Теперь это будут не страницы, а пользовательские элементы управления. Директиву @Register с ее атрибутами изменять не нужно

Удалить из кода все дескрипторы <html>, <body>, <form>, <head> и закрывающие их дескрипторы

В результате новые пользовательские элементы должны иметь следующий код интерфейсной части

<%@ Control AutoEventWireup="true" CodeFile="HeaderTest.ascx.cs" 
    Inherits="HeaderTest" Language="C#" %>
        
<%@ Register TagPrefix="myElem" TagName="Header" Src="Header.ascx" %>
    
<myElem:Header ID="Header1" runat="server" />

<%@ Control Language="C#" %>
    
<%@ Register Src="TimeDisplay.ascx" TagName="TimeDisplay" TagPrefix="uc1" %>
    
<uc1:TimeDisplay ID="TimeDisplay1" runat="server" Format="" />
<br />
<br />
<hr />
<br />
<uc1:TimeDisplay ID="TimeDisplay2" runat="server" 
     Format="Сегодня dddd, dd MMMM yyyy<br />Текущее время HH:mm:ss" />

<%@ Control AutoEventWireup="true" CodeFile="LinkTableTest.ascx.cs" 
    Inherits="LinkTableTest" Language="C#" %>
    
<%@ Register Src="LinkTable.ascx" TagName="LinkTable" TagPrefix="uc1" %>
    
<uc1:LinkTable ID="LinkTable1" runat="server" 
               OnLinkClicked="LinkTable1_LinkClicked" />
<br />
<asp:Label ID="lblInfo" runat="server"></asp:Label>

<%@ Control AutoEventWireup="true" CodeFile="MyControlTest.ascx.cs" 
    Inherits="MyControlTest" Language="C#" %>
        
<%@ Register Src="MyControl.ascx" TagName="MyControl" TagPrefix="uc1" %>
    
<uc1:MyControl ID="MyControl1" runat="server" />
<br />
<br />
<asp:RadioButtonList ID="RadioButtonList1" runat="server" 
    OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged"
    RepeatDirection="Horizontal">
    <asp:ListItem Value="Red">Красный</asp:ListItem>
    <asp:ListItem Value="Green">Зеленый</asp:ListItem>
    <asp:ListItem Value="Blue">Синий</asp:ListItem>
</asp:RadioButtonList>
<br />
<input id="Submit1" type="submit" value="submit" />

Для новых файлов *.ascx откройте файлы скрытого кода *.ascx.cs и замените в объявлении класса имя базового класса с " System.Web.UI.Page " на " System.Web.UI. UserControl "

Остальной код классов останется прежним. Мы закончили выполнение упражнения. Код исполнимой страницы DynamicUserControls.aspx при очередной загрузке будет программно создавать свои пользовательские элементы управления для каждого контейнера Panel и размещать их в элементах PlaceHolder.

Выполните страницу DynamicUserControls.aspx и испытайте ее работу

Результат будет примерно таким