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

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

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

Обработка событий

Для начала воспользуемся стандартным элементом управления LinkButton, который будет снимать с таймера сервера и отображать клиенту текущее время. Для разнообразия код C# и разметку поместим в одном файле.

• Вызовите мастер для создания пользовательского элемента управления, выполнив команду Website/Add New Item. Установите шаблон в значение Web User Control, сбросьте флажок Place code in separate file и задайте имя файла TimeDisplay.ascx
• Поместите в редактор Design стандартный элемент управления LinkButton из вкладки Standard
• Через панель Properties измените ID элемента на lnkTime
• Двойным щелчком на свободном месте редактора Design создайте обработчик Page_Load()
• При выделенном элементе lnkTime установите панель Properties в режим Events (кнопка с изображением молнии вверху панели), найдите событие Click и двойным щелчком на поле его значения создайте обработчик lnkTime_Click()
• Заполните файл следующим кодом

<%@ Control Language="C#" ClassName="TimeDisplay" %>
	
<script runat="server">
	
    protected void Page_Load(object sender, EventArgs e)
    {
        RefreshTime();
    }
	
    protected void lnkTime_Click(object sender, EventArgs e)
    {
        RefreshTime();
    }
	
    public void RefreshTime()
    {
        lnkTime.Text = DateTime.Now.ToLongTimeString();
    }
</script>

<asp:LinkButton ID="lnkTime" runat="server" OnClick="lnkTime_Click" />

В коде мы добавили свою функцию RefreshTime(), поскольку ее код нужно вызывать в двух местах. Без этой функции вполне можно обойтись, но мы представили себе, будто ее тело состоит из большого количества строк.

• Чтобы протестировать наш код, добавьте к приложению новую страницу с именем TimeDisplayTest.aspx
• Перетащите на нее из панели Solution Explorer файл TimeDisplay.ascx с пользовательским элементом управления
• Выполните страницу, которая на клиенте будет такой

При каждом щелчке пользователя на ссылке-кнопке она будет снимать (и отображать) с таймера сервера новое значение времени.

Понятие свойства класса

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

• типа, равного типу поля, доступом к которому оно управляет
• из имени с модификатором доступа, по которому будут читаться или писаться значения поля, контролируемые свойством
• из пары аксессоров get и set, содержащих контролирующий поле код

Основное достоинство свойства состоит в том, что его можно использовать в выражениях и инструкциях присваивания как обычную переменную-член класса, хотя на самом деле здесь автоматически будут вызываться get - и set -аксессоры. Синтакис свойства таков:

модификатор_доступа тип имя_свойства
	{ 
		get
		{
			// код аксессора чтения поля
			............................
			return поле;
		}
		set
		{
			// код аксессора записи поля
			............................
			поле = value;
		}
	}

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

class MyClass
{
	public MyClass()
	{
		xField = 0;
	}
	
	private int xField; // Это поле будет управляться свойством x

	// Это свойство поддерживает доступ к закрытому полю xField
	// через имя доступа x, равное имени свойства
	// Для клиента этого класса x видна как переменная
	public int x
	{
		get
		{
			return xField;
		}
		set
		{
			// Переменная value - зарезервированное имя переменной
			// обобщенного типа, принимающей значение от клиента
			// Это имя менять нельзя
			if(value >= 0)
				xField = value;
		}
	}
}

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

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

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

• Измените код файла TimeDisplay.ascx следующим образом

  <%@ Control Language="C#" ClassName="xx" %>
  	
  <script runat="server">
      
      protected void Page_Load(object sender, EventArgs e)
      {
          RefreshTime();
      }
  	
      private string format; // Контролируемое свойством поле
      public string Format   // Определение свойства Format
      {
          get { return format; }
          set { format = value; }
      }
  	
      protected void lnkTime_Click(object sender, EventArgs e)
      {
          RefreshTime();
      }
  	
      public void RefreshTime()
      {
          if (format == "")
              lnkTime.Text = DateTime.Now.ToLongTimeString();
          else // Значение format задаем в клиенте через свойство Format
              lnkTime.Text = DateTime.Now.ToString(format);
      }
  </script>
  
  <asp:LinkButton ID="lnkTime" runat="server" OnClick="lnkTime_Click" />
• Измените код тестовой страницы TimeDisplayTest.aspx следующим образом

  <%@ Page Language="C#" %>
  	
  <%@ Register Src="TimeDisplay.ascx" TagName="TimeDisplay" TagPrefix="uc1" %>
  	
  <html xmlns="http://www.w3.org/1999/xhtml" >
  <head runat="server">
      <title>Страница TimeDisplayTest</title>
  </head>
  <body>
      <form id="form1" runat="server">
          <div>
              <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" />
          </div>
      </form>
  </body>
  </html>

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

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

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