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

Порядок генерации событий инициализации

При создании пользовательских элементов управления и добавления в них своих свойств важно знать, в каком порядке происходит создание и инициализация объектов на странице, использующей пользовательский элемент управления. Этот порядок следующий:

1. Производится удаленный запрос страницы и она загружается в память сервера
2. Создается и инициализируется конструктором класса пользовательский элемент управления
3. Присваиваются значения атрибутов, предусмотренные в дескрипторе пользовательского элемента управления
4. Создается объект родительской страницы
5. Выполняется событие Page.Load родительской страницы, в обработчике Page_Load() которого можно предусмотреть переназначение атрибутов-свойств пользовательского элемента управления
6. Выполняется событие Page.Load пользовательского элемента управления

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

protected void Page_Load(object sender, EventArgs e)
{
    format = "";
    if (!Page.IsPostBack)
        RefreshTime();
}

то мы бы всегда получали результат варианта без форматирования, а именно

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

Иногда приходится создавать специальные классы для организации взаимодействия между пользовательским элементом управления и Web-страницей. Рассмотрим пример, в котором создадим сложный пользовательский элемент управления LinkTable, предназначенный для генерирования набора гиперссылок в форматированной таблице. Для удобства часть кода разместим в отдельном самостоятельном классе LinkTableItem.

• Создайте страницу Web Form с раздельным кодом и именем LinkTableTest.aspx
• Сделайте эту страницу стартовой
• Добавьте к проекту новую папку с зарезервированным именем App_Code
  

  
  
• Через контекстное меню на созданной папке выполните команду Add New Item
  

  
  
• Через окно мастера добавьте к приложению новый класс C# с именем LinkTableItem.cs
  

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

  using System;
  using System.Data;
  using System.Configuration;
  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;
  	
  /// <summary>
  /// Вспомогательный класс LinkTableItem
  /// </summary>
  public class LinkTableItem
  {
      // Хранимые поля закрытого типа
      private string text, url;
  	
      // Конструктор по умолчанию
  	public LinkTableItem()
  	{
          // Пустой конструктор по умолчанию обязателен
          // поскольку есть общий конструктор
  	}
  	
      // Общий конструктор
      public LinkTableItem(string text, string url)
      {
          // Внутренним полям присваиваются значения,
          // переданные из родительского объекта
          this.text = text;
          this.url = url;
      }
  	
      // Определение свойств доступа к внутренним полям
      public string Text
      {
          get { return text; }
          set { text = value; }
      }
  	
      public string Url
      {
          get { return url; }
          set { url = value; }
      }
  }

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

• Создайте заготовку пользовательского элемента управления с раздельным кодом и именем LinkTable. Для этого выполните команду Add New Item, вызвав контекстное меню для узла проекта (самый верхний узел) в панели Solution Explorer и установив шаблон Web User Control
  

  
  увеличить изображение
  
• Поместите в таблицу пользовательского элемента следующие стандартные компоненты:
  • Table из вкладки HTML, который будет форматировать размещение стандартных элементов управления
  • Label из вкладки Standard в верхнюю ячейку таблицы, который будет определять заголовок набора ссылок
  • Image из вкладки HTML, определяющий рисунок маркера ссылок
  • DataList из вкладки Data в нижнюю ячейку таблицы
  • HyperLink из вкладки Standard
• Настройте дескрипторный код пользовательского элемента управления так

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

Дескриптор <img> для красоты определяет маркер, который вы можете сами изготовить размером 25x13 или взять из данной работы (файл Yes.gif, который имеет изображение). Атрибут alt задает альтернативную надпись в поле рисунка, если последний не будет найден.

Теперь пришла пора расширить функциональность пользовательского элемента управления LinkTable. Для этого

• Вызовите на редактирование файл 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
{
    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();
        }
    }
}

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

• Выполните команду Window/Close All Documents, чтобы закрыть все окна редактирования
• Откройте через панель Solution Explorer на редактирование файл LinkTableTest.aspx в режиме Design и перетащите на форму из этой панели узел LinkTable.ascx пользовательского элемента управления

После этого форма страницы должна выглядеть так

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

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="LinkTableTest.aspx.cs" Inherits="LinkTableTest" %>
	
<%@ Register Src="LinkTable.ascx" TagName="LinkTable" TagPrefix="uc1" %>
	
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Тестовая страница сложного элемента управления</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <uc1:LinkTable ID="LinkTable1" runat="server" />
        </div>
    </form>
</body>
</html>

• Откройте на редактирование файл поддержки страницы LinkTableTest.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 LinkTableTest : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // Формируем заголовок списка
        LinkTable1.Title = "Список жизненно важных гиперссылок";
	
        // Создаем список элементов - гиперссылок
        LinkTableItem[] items = new LinkTableItem[3];
        items[0] = new LinkTableItem("Ссылка №1 к Большому Биллу", 
            "http://www.microsoft.com");
        items[1] = new LinkTableItem("Ссылка №2 к автошколе \"Диалог-Сервис\"", 
            "http://www.dialog-service.net");
        items[2] = new LinkTableItem("Ссылка №3 к затычке JavaScript", 
            "javascript:void(0)");
        LinkTable1.Items = items;
    }
}

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