При разработке приложений Web случаются ситуации, когда доступные мощные инструменты разработки не вполне соответствуют требованиям для определенного проекта. Возможно, что заданный элемент управления работает не вполне так, как это требуется, или раздел кода, предназначенный для повторного использования на нескольких страницах, слишком сложен в руках нескольких разработчиков. В таких ситуациях существуют серьезные доводы в пользу специальных элементов управления. Специальные элементы управления могут, в самом простейшем виде объединить несколько существующих элементов управления вместе, возможно, с дополнительными свойствами, определяющими компоновку, или могут полностью отличаться от любых существующих элементов управления. Использование специального элемента управления настолько же просто, как и использование любого другого элемента управления в ASP.NET, что, конечно, облегчает кодирование web-сайтов.

В прошлом было сложно реализовывать такие специально созданные элементы управления, особенно в крупномасштабных системах, где требовались сложные процедуры регистрации для их использования. Даже в простых системах требования кодирования для создания специального элемента управления могли существенно усложнить процесс. Языки сценариев старых языков разработки Web также страдали от отсутствия возможности предоставить полноценный доступ к искусно созданной объектной модели, что приводило к низкой производительности в целом.

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

В этой главе мы рассмотрим два различных вида элементов управления:

□ Элементы управления пользователя — преобразование существующих страниц ASP.NET в элементы управления

□ Специальные элементы управления — объединение функций нескольких элементов управления, расширение существующих элементов управления и создание новых элементов управления с самого начала 

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

Элементы управления пользователя создаются с помощью кода ASP.NET также, как создаются стандартные страницы Web ASP.NET. Различие состоит в том, что после создания элемента управления пользователя его можно повторно применять на множестве страниц ASP.NET с минимальными трудностями.

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

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

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

В VS.NET создадим новое приложение Web с именем

PCSUserCWebAppl

Когда будут созданы стандартные файлы, выберем пункт меню Project|Add New Item… и добавим Web User Control с именем

PCSUserC1.ascx

Добавленные к проекту файлы с расширениями

.ascx

.ascx.cs

.aspx

.ascx

.aspx

.ascx.cs

.aspx.cs

Файлы

.ascx

.aspx

<body>

Просмотр созданных шаблонных файлов открывает еще одно важное отличие: созданный класс наследует из класса

System.Web.UI.UserControl

Наш простой элемент управления будет выводить графическое изображение, соответствующее одной из четырех стандартных мастей колоды карт (трефы, бубны, черви, пики). Требуемые для этого графические изображения поставляются как часть Visual Studio; их можно найти в C:Program Files\Microsoft Visual Studio.NET\Common7\Graphics\bitmaps\assorted с именами файлов

CLUB.BMP

DIAMOND.BMP

HEART.BMP

SPADE.BMP

Добавим некоторый код к новому элементу управления. В файл

PCSUserC1.ascx

<HTML>

 <HEAD> </HEAD>

 <BODY>

  <TABLE CellSpacing=4>

   <TR vAlign=middle>

    <TD>

     <asp:Image Runat="server" ID="suitPic" ImageURL="club.bmp " />

    </TD>

    <TD height=20>

     <asp:Label Runat="server" ID="suitLabel">Club</asp:Label>

    </TD>

   </TR>

  </TABLE>

 </BODY>

</HTML>

Этот код определяет состояние по умолчанию элемента управления, которое будет изображением трефы с меткой. Прежде чем добавлять дополнительную функциональность, протестируем такое поведение по умолчанию, добавляя этот элемент управления в проект Web-страницы

WebForm1.aspx

Чтобы использовать специальный элемент управления в файле

.aspx

<%@ Register %>

<%@ Register TagPrefix="PCS" TagName="UserC1" Src="PCSUserC1.ascx" %>

Здесь используются атрибут

Src

TagPrefix

TagName

TagPrefix: TagName

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false"

 Inherits="PCSUserCWebApp1.WebForm1" %>

<%@ Register TagPrefix="PCS" TagName="UserC1" Src= "PCSUserC1.ascx" %>

<HTML>

 <HEAD>

  <meta name=vs_targetSchema content="Internet Explorer 5.0">

  <meta name="GENERATOR" Content="Microsoft Visual Studio 7.0">

  <meta name="CODE_LANGUAGE" Content="C#" >

 </HEAD>

 <BODY MS_POSITIONING="GridLayout">

  <form method="post" runat="server">

   <PCS:UserC1 Runat="server" id="myUserControl" />

  </form>

 </BODY>

</HTML>

Элементы управления пользователя могут не объявляться по умолчанию в базовом коде формы, поэтому может понадобиться добавить следующее объявление в

WebForm1.aspx.cs

public class WebForm1 : System.Web.UI.Page {

 protected PCSUserC1 myUserControl;

 ...

Это все, что нужно сделать для тестирования элемента управления пользователя, и выполнение проекта приведет к следующему результату:

 club

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

Чтобы получить управление над выводимой мастью, можно использовать атрибут элемента

<PCS: UserC1>

PCSUserC1.ascx.cs

Suit

PCSUserCWebAppl

namespace PCSUserCWebAppl {

 ...

 public enum suit {

  club, diamond, heart, spade

 }

 ...

}

Для класса

PCSUserC1

currentSuit

public class PCSUserC1 : System.Web.UI.UserControl {

 protected System.Web.UI.WebControls.Image suitPic;

 protected System.Web.UI.WebControls.Label suitLabel;

 protected suit currentSuit;

А также свойство для доступа к этой переменной-члену,

Suit

public suit Suit {

 get {

  return currentSuit;

 }

 set {

  currentSuit = value;

  suitPic.ImageUrl = currentSuit.ToString() + ".bmp";

  suitLabel.Text = currentSuit.ToString();

 }

}

Здесь метод доступа

set()

Теперь элемент управления закончен, и нам надо добавить код в

WebForm1.aspx

<BODY MS_POSITIONING="GridLayout">

 <form method="post" runat="server">

  <PCS:UserC1 Runat="server" id="myUserControl" />

  <asp:RadioButtonList Runat="server" ID="suitList" autopostback="True">

   <asp:ListItem Value="club" Selected="True">Club</asp:ListItem>

   <asp:ListItem Value="diamond">Diamond</asp:ListItem>

   <asp:ListItem Value="heart">Heart</asp:ListItem>

   <asp:ListItem Value="spade">Spade</asp:ListItem>

  </asp:RadioButtonList>

 </form>

</BODY>

Нам нужно также добавить обработчик событий для события списка

SelectedIndexChanged

Отметим, что нужно задать свойство autopostback этого списка как

true

, так как обработчик события

suitList_SelectedIndexChanged()

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

Для метода

suitList_SelectedIndexChanged()

WebForm1.aspx.cs

protected void suitList_SelectedIndexChanged(object sender, System.EventArgs e) {

 MyUserControl.Suit = (suit)Enum.Parse(typeof(suit), suitList.SelectedItem.Value);

}

Мы знаем, что атрибуты

value

<ListItem>

suit

Suit

object

suit

Не нужно это усложнять, просто определим одно значение с помощью атрибута

Suit

<PCS:UserC1 Runat="server" id="myUserControl" Suit="diamond" />

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

Теперь можно изменять масть при выполнении этого приложения Web:

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

PCSUserC1

public void Club() {

 Suit = suit.club;

}

public void Diamond() {

 Suit = suit.diamond;

}

public void Heart() {

 Suit = suit.heart;

}

public void Spade() {

 Suit = suit.spade;

}

Эти четыре метода —

Club()

Diamond()

Heart()

Spade()

Мы вызываем эти функции из четырех элементов управления на странице

.aspx

 <asp:ImaqeButton Runat="server" ID="clubButton"

  ImageUrl="CLUB.BMP" OnClick="clubButton_OnClick" />

 <asp:ImageButton Runat="server" ID="diamondButton"

  ImageUrl="DIAMOND.BMP" OnСlick="diamondButton_OnClick" />

 <asp:ImageButton Runat="server" ID="heartButton"

  ImageUrl="HEART.BMP"  OnClick="heartButton_OnClick" />

 <asp:ImageButton Runat="server" ID="spadeButton"

  ImageUrl="SPADE.BMP" OnClick="spadeButton_OnClick" />

</form>

С помощью следующих обработчиков событий:

protected void clubButton_OnClick(object sender, System.Web.UI.ImageClickEventArgs e) {

 myUserControl.Club()

}

protected void diamondButton_OnClick(object sender, System.Web.UI.ImageClickEventArgs e) {

 myUserControl.Diamond();

}

protected void heartButton_OnClick(object sender, System.Web.UI.ImageClickEventArgs e) {

 myUserControl.Heart();

}

protected void spadeButton_OnClick(object sender, System.Web.UI.ImageClickEventArgs e) {

 myUserControl.Spade();

}

Теперь мы имеем четыре новые кнопки, которые можно использовать для изменения масти:

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

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

<%@ Register %>

PCSUserC1.ascx

PCSUserC1.ascx.cs

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

.ascx

ascx.cs

.ascx

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

Это приложение использует переменную уровня приложения для множества данных, которая содержит таблицы данных мероприятий, участников и названий помещений. Если желательно использовать эту переменную таким же образом, нам понадобиться в этом проекте поместить код для извлечения множества данных в файле global.asax. То есть нам еще нужно добавить в проект ссылку Web на требуемую службу Web.

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

UserControl

Form

UserControl

Validators

Validator

protected void submitButton_click(object sender, System.EventArgs e) {

 foreach (System.Web.UI.WebControls.WebControl validator in this.Validators) {

  validator.Enabled = true;

 }

 this.Validate();

 if (this.IsValid) {

  ...

Вместо этого необходимо использовать следующий подход:

protected void submitButton_Click(object sender, System.EventArgs e) {

 validateEvent.Enabled = true;

 validateRoom.Enabled = true;

 validateName.Enabled = true;

 validateAttendees.Enabled = true;

 validateEvent.Validate();

 validateRoom.Validate();

 validateName.Validate();

 validateAttendees.Validate();

 if (validateAttendees.IsValid && validateEvent.IsValid &&

     validateRoom.IsValid && validateName.IsValid) {

  ...

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

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

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

Специальные элементы управления — следующий шаг по сравнению с элементами управления пользователя в том смысле, что они являются полностью самодостаточными в сборках C#, не требуя отдельного кода ASP.NET. Это означает, что нам не нужно проходить через процесс сборки UI в файле

.ascx

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

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

System.Web.UI.WebControls.WebControl

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

bin

<%@ Register %>

<%@ Register TagPrefix="PCS" Namespace="PCSCustomWebControls" Assembly="PCSCustomWebControls" %>

Мы используем параметр

TagPrefix

TagName

Src

TagName

bin

Выше, в примере строки кода, мы говорим, что хотим использовать сборку с именем

PCSCustomWebControls.dll

PCSCustomWebControls

PCS

Control1

<PCS:Control1 Runat="server" ID="MyControl" />

С помощью специальных элементов управления можно также воспроизвести некоторое вложенное поведение элементов управления, такое, как мы видим в списке элементов управления:

<asp:dropdownlist id="roomList" runat="server" width="160px">

 <asp:ListItem Value="1">The Happy Room</asp:ListItem>

 <asp:ListItem Value="2">The Angry Room</asp:ListItem>

 <asp:ListItem Value="3">The Depressing Room</asp:ListItem>

 <asp:ListItem Value="4">The Funked Out Room</asp:ListItem>

</asp:dropdownlist>

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

Применим часть этой теории на практике. Мы будем использовать для простоты единственную сборку для хранения всех специальных элементов управления примера этой главы, которую можно создать в Visual Studio.NET, выбирая новый проект типа Web Control Library. Назовем нашу библиотеку

PCSCustomWebControls

Здесь проект создан в каталоге

wwwroot

bin

Один из технических приемов, применяемых для упрощения тестирования одиночного решения, состоит в добавлении проекта приложения Web к тому же решению:

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

bin

PCSCustomWebControls

Отметим, что здесь в раскрывающемся списке Configuration выбран элемент All Configurations, поэтому отладочная и окончательная сборка будут помещены в одном месте. Output Path был изменен на C:\Inetpub\wwwroot\PCSCustomWebControlsTestApp\bin Чтобы облегчить отладку можно также изменить значение Start URL на странице свойств Debugging на http://localhost/PCSCustomWebControlsTestApp/WebForm1.aspx, a Debug Mode - на URL таким образом, чтобы увидеть результаты, проект можно выполнять просто в режиме отладки.

Убедимся, что все это работает, протестировав элемент управления, который поставляется по умолчанию в файле

.cs

WebCustomControl1

WebForm1.aspx

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs"

 AutoEventWireup="false" Inherits="PCSCustomWebControlsTestApp.WebForm1" %> 

<%@ Register TagPrefix="PCS" Namespace="PCSCustomWebControls"

 Assembly="PCSCustomWebControls" %>

<html>

 <head>

  <meta name="GENERATOR" Content="Microsoft Visual Studio 7.0">

  <meta name="CODE_LANGUAGE" Content = "C#">

  <meta name=vs_defaultClientScript content="JScript">

  <meta name=vs_targetSchema content="Internet Explorer 5.0">

 </head>

 <body MS_POSITIONING="GridLayout">

  <form id="WebForm1" method="post" runat="server">

   <PCS:WebCustomControl1 Runat="server" Text="Testing again..." />

  </form>

 </body>

</html>

Теперь, пока библиотека

PCSCustomWebControls

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

PCSCustomWebControls

Затем добавим инструкцию

using

PCSCustomWebControlsTestApp

WebForm1.aspx.cs

using PCSCustomWebControls;

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

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

<asp:Labels>

.cs

WebCustomControl1.cs

namespace PCSCustomWebControls {

 using System;

 using System.Web.UI;

 using System.Web.UI.WebControls;

 using System.ComponentModel;

 /// <summary>

 /// Краткое описание WebCustomControl1

 /// </summary>

 [DefaultProperty("Text"),

 ToolboxData("<{0}WebCustomControl1 runat=server></{0}:WebCustomControl1>")]

 public class WebCustomControl1 : System.Web.UI.WebControls.WebControl {

  private string text;

  [Bindable(true), Category("Appearance"), DefaultValue(" ")]

  public string Text {

   get {

    return text;

   }

   set {

    text = value;

   }

  }

  /// <summary>

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

  /// </summary>

  /// <param name="output"> The HTML writer to write out to </param>

  protected override void Render(HtmlTextWriter output) {

   output.Write(Text);

  }

 }

}

Начальные инструкции

using

Здесь определен единственный класс

WebCustomControl1

WebControl

DefaultProperty

ToolboxData

DefaultProperty

ToolboxData

.aspx

Класс содержит одно свойство:

Text

□

Bindable

□

Category

□

DefaultValue

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

Остальная часть класса состоит из метода

Render()

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

□ Когда создается производный элемент из существующего элемента управления и не требуется изменять характеристики его изображения.

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

□ Создание производных элементов управления

□ Создание композитных элементов управления

□ Создание более развитых элементов управления

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

Создадим для начала простой производный элемент управления.

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

Label

Render()

.cs

RainbowLabel.cs

namespace PCSCustomWebControls {

 using System;

 using System.Web.UI;

 using System.Web.UI.WebControls;

 using System.ComponentModel;

 using System.Drawing;

 public class RainbowLabel : System.Web.UI.WebControls.Label {

  private Color[] colors = new Color[] {

   Color.Red, Color.Orange, Color.Yellow,

   Color.GreenYellow, Color.Blue, Color.Indigo, Color.Violet

  };

  protected override void Render(HtmlTextWriter output) {

   string text=Text;

   for (int pos=0; pos < text.Length; pos++) {

    int rgb = colors[pos % 7].ToArgb() & 0xFFFFFF;

    output.Write("<font color="#" + rgb.ToString("X6") + "'>" + text[pos] + "</font>");

   }

  }

 }

}

Этот класс выводится из существующего элемента управления

Label

System.Web.UI.WebControls.Label

Text

colors[]

Основная функциональность элемента управления находится в

Render()

Text

colors[]

Чтобы протестировать этот элемент управления, необходимо добавить его к форме в

PCSCustomWebControlsTestApp

<form method="post" runat="server" ID="Form1">

 <PCS:RainbowLabel Runat="server" Text="Multicolored label!"

  ID="rainbowLabel1" />

</form>

Нам нужно также добавить подходящее объявление в код, реализующий форму (если оно не добавится автоматически):

public class WebForm1 : System.Web.UI.Page {

 protected RainbowLabel rainbowLabel1;

 ...

В результате будет получено:

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

ViewState

Чтобы проиллюстрировать это, добавим дополнительное свойство в элемент управления

RainbowLabel

Cycle()

offset

Это поле должно использовать

ViewState

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

ViewState

public class RainbowLabel : System.Web.UI.WebControls.Label {

 private Color[] colors = new Color[] {

  Color.Red, Color.Orange, Color.Yellow,

  Color.GreenYellow, Color.Blue, Color.Indigo, Color.Violet

 };

 private int offset = 0;

 protected override void Render(HtmlTextWriter writer) {

  string text = Text;

  for (int pos = 0; pos < text.Length; pos++ ) {

   int rgb = colors[(pos + offset) % 7].ToArgb() & 0xFFFFFF;

   output.Write("<font color= '#" + rgb.ToString("X6") + "'>" + text[pos] + "</font>");

  }

 }

 public void Cycle() {

  offset = ++offset % 7;

 }

}

Здесь мы инициализируем поле

offset

Cycle()

%

Чтобы протестировать это, требуется способ вызова метода

Cycle()

<form method="post" runat="server" ID="Form1">

 <PCS:RainbowLabel Runat="server" Text="Multicolored label!"

  ID="rainbowLabel1" />

 <asp:Button Runat="server" ID="cycleButton"

  Text="Cycle colors" OnClick="cycleButton_Click" />

</form>

Co следующим обработчиком событий:

protected void cycleButton_Click(object sender, System.EventArgs e) {

 this.rainbowLabel1.Cycle();

}

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

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

offset

В любом случае решение достаточно просто. Мы должны использовать свойство

ViewState

Чтобы поместить поле

offset

ViewState

ViewState["_offset"] = offset;

ViewState

_offset

Аналогично для извлечения состояния используется код:

offset = (inc)ViewState["_offset"];

Если мы сделаем это, когда ничего не хранится в

ViewState

null

try

Собирая все вместе, сделаем следующие изменения в коде:

public class RainbowLabel : System.Web.UI.WebControls.Label {

 private Color[] colors = new Color[] {

  Color.Red, Color.Orange, Color.Yellow,

  Color.GreenYellow, Color.Blue, Color.Indigo, Color.Violet

 };

 private int Offset;

 protected override void Render(HtmlTextWriter writer) {

  string text = Text;

  GetOffset();

  for (int pos = 0; pos < text.Length; pos++) {

   int rgb = colors[(post + offset) % 7].ToArgb() & 0xFFFFFF;

   writer.Write("<font color='#" + rgb.ToString("X6") + "'>" + text[pos] + "</font>");

  }

 }

 private void GetOffset() {

  try {

   offset = (int)ViewState["_offset"],

  } catch {

   offset = 0;

  }

 }

 public void Cycle() {

  GetOffset();

  offset = ++offset % 7;

  ViewState["_offset"] = offset;

 }

}

Теперь элемент управления позволит методу

Cycle()

ViewState

string

public string Name {

 get {

  return (string)ViewState["_name"];

 }

 set {

  ViewState["_name"] = value;

 }

}

Еще одно замечание об использовании

ViewState

ViewState

INamingContainer

ViewState

ViewState

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

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

Назовем этот композитный элемент управления

RainbowControl2

RainbowControl2.cs

□ Наследовать из

WebControl

Label

□ Поддерживать

INamingContainer

□ Иметь два поля для хранения своих элементов управления-потомков

public class RainbowLabel2 : System.Web.UI.WebControls.WebControl, INamingContainer {

 private RainbowLabel rainbowLabel = new RainbowLabel();

 private Button cycleButton = new Button();

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

Controls

CreateChildControls()

protected override void CreateChildControls() {

 cycleButton.Text = "Cycle colors.";

 cycleButton.Click += new System.EventHandler(cycleButton_Click);

 Controls.Add(cycleButton);

 Controls.Add(rainbowLabel);

}

Здесь мы используем только метод

Add()

Controls

protected void cycleButton_Click(object sender, System.EventArgs e) {

 rainbowLabel.cycle();

}

Данный вызов заставляет цвета метки циклически изменяться.

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

rainbowLabel

Text

public string Text {

 get {

  return rainbowLabel.Text;

 }

 set {

  rainbowLabel.Text = value;

 }

}

Осталось только реализовать

Render()

Render()

RenderControl()

protected override void Render(HtmlTextWriter writer) {

 rainbowLabel.RenderControl(writer);

 cycleButton.RenderControl(writer);

}

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

HtmlTextWriter

RenderControl()

RainbowLabel

<form method="post" runat="server" ID="Form1">

 <PCS:RainbowLabel2 Runat="server"

  Text="Multicolored label composite" ID="rainbowLabel2" />

</form>

вместе со связанным объявлением в скрытом коде формы.

Теперь воспользуемся изложенной техникой и создадим более сложный специальный элемент управления. Конечный результат позволит с помощью следующего кода ASP.NET:

<form method="post" runat="server" ID="Form1">

 <PCS: StrawPoll Runat="server" ID="strawPoll1"

  PollStyle="voteonly" Title="Who is your favorite James Bond?">

  <PCS:Option Name="SeanConnery" Votes="101" />

  <PCS:Option Name="Roger Moore" Votes="83" />

  <PCS:Option Name="George Lazenby" Votes="32" />

  <PCS:Option Name="Timothy Dalton" Votes="28" />

  <PCS:Option Name="Pierce Brosnan" Votes="95" />

 </PCS:StrawPoll>

</form>

получить:

И когда мы нажмем на кнопку vote, изображение изменится на следующее:

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

Код ASP.NET вовлечен явно в задание свойства

Name

Votes

Option

При анализе кода ASP.NET такие структуры интерпретируются согласованным образом: каждый управляющий элемент-потомок интерпретируется способом, который определен в классе-построителе элемента управления, связанным с элементом управления предком. Этот построитель элемента управления, код которого мы скоро увидим, обрабатывает все вложенное внутрь элемента управления, с которым он связан, включая литеральный текст.

Нам нужно создать два элемента управления:

Option

StrawPoll

StrawPoll.cs

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

Поэтому нам потребуется:

□ Код для свойств

Name

Votes

ViewState

□ Код инициализации в

CreateChildControls()

□ Код для обработчика нажатия кнопки

Мы включаем также вспомогательный метод

Increment()

Нам понадобится также поддержка

INamingContainer

Код класса

Option

StrawPoll.cs

using

RainbowLabel

public class Option : System.Web.UI.WebControls.WebControl, INamingContainer {

 public string Name {

  get {

   return (string)ViewState["_name"];

  }

  set {

   ViewState["_name"] = value;

  }

 }

 public long Votes {

  get {

   return (long)ViewState["_votes"];

  }

  set {

   ViewState["_votes"] = value;

  }

 }

 public void Increment() {

  ViewState["_votes"] =(long)ViewState["_votes"] + 1;

 }

 public void Reset() {

  ViewState["_votes"] = 0;

 }

 protected override void CreateChildControls() {

  Button btnVote = new Button();

  btnVote.Text = "Vote";

  btnVote.Click += new System.EventHandler(btnVote_Click);

  Controls.Add(btnVote);

 }

 protected void btnVote_Click(object sender, System.EventArgs e) {

  Increment();

 }

}

Отметим, что метод

Render()

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

StrawPoll

StrawPoll

ControlBuilderAttribute

ParseChildren

[ControlBuilderAttribute(typeof(StrawPollControlBuilder)) ]

[ ParseChildren(false) ]

public class StrawPoll : System.Web.UI.WebControls.WebControl, INamingContainer { }

Здесь используется класс с именем

StrawPollControlBuilder

internal class StrawPollControlBuilder : ControlBuilder {

 public override Type GetChildControlType(string tagName, IDictionary attribs) {

  if (tagName.ToLower().EndsWith("option")) return typeof(Option);

  return null;

 }

 public override void AppendLiteralString(string s) {

  // ничего не делать, чтобы избежать добавления встроенного текста

  // к элементу управления

 }

}

Здесь мы переопределяем метод

GetChildControlType()

ControlBuilder

Option

<Option>

"option"

Мы переопределяем также метод

AppendLiteralString()

Когда это сделано в предположении, что в

StrawPoll

Option

Controls

StrawPoll

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

using

using System.Collections;

Прежде чем перейти к рассмотрению самого класса

StrawPoll

StrawPoll

□ Только кнопки для голосования

□ Только результаты

□ Кнопки для голосования и результаты

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

StrawPoll

public enum pollStyle {

 voteonly, valuesonly, voteandvalues

}

Как мы видели ранее, свойства, которые являются перечислениями, легко использовать, и мы можем применять текстовые имена в качестве значений атрибутов в ASP.NET.

Теперь соберем все вместе. Для начала определим два свойства:

Title

PollStyle

ViewState

[ ControlBuilderAttribute (typeof (StrawPollControlBuilder)) ]

[ ParseChildren(false) ]

public class StrawPoll : System.Web.UI.WebControls.WebContol, INamingContainer {

 private string title = "Straw Poll";

 private pollStyle currentPollStyle = pollStyle.voteandvalues;

 public string Title {

  get {

   return title;

  }

  set {

   title = value;

  }

 }

 public pollStyle PollStyle {

  get {

   return currentPollStyle;

  }

  set {

   currentPollStyle = value;

  }

 }

}

Остальная часть этого класса посвящена методу

Render()

RenderControl()

Option

Option

Код, прокомментированный для ясности, будет выглядеть следующим образом:

protected override void Render(HtmlTextWriter writer) {

 Option CurrentOption;

 long iTotalVotes = 0;

 long iPercentage = 0;

 int iColumns = 2;

 // Начало таблицы, изображение таблицы

 if (currentPollStyle == pollStyle.voteandvalues) {

  iColumns = 3;

 }

 writer.Write("<TABLE border='1' bordercolor='black' bgcolor='#DDDDEB'" +

  " width= '90%' cellpadding='1' cellspacing='1'" + " align='center'>");

 writer.Write("<TR><TD colspan='" + iColumns + align='center'"

  + " bgcolor='#FFFFDD'>");

 writer.Write("<B>" + title + "</B></TD></TR>");

 if (Controls.Count == 0) {

  // текст по умолчанию, когда нет вариантов выбора

  writer.Write("<TR><TD bgcoLor='#FFFFDD'>No options to" + " display.</TR></TD>");

 } else {

  // Получить общее число голосов

  for (int iLoop = 0; iLoop < Controls.Count; iLoop++) {

   // Получить вариант выбора

   currentOption = (Option)Controls[iLoop];

   // Просуммировать результаты голосования

   iTotalVotes += currentOption.Votes;

  }

  // Вывести каждый вариант выбора

  for (int iLoop = 0; iLoop < Controls.Count; iLoop++) {

   // Получить вариант выбора

   currentOption = (Option)Controls[iLoop];

   // Поместить имя варианта выбора в первый столбец

   writer.Write("<TR><TD bgcolor='#FFFFDD' width="15%'> " +

    currentOption.Name + " </TD>");

   // Добавить вариант голосования во второй столбец,

   // если требуется

   if (currentPollStyle != pollStyle.valuesonly) {

    writer.Write("<TD width='1%' bgcolor='#FFFFDD'>"

     + "<FONT Color='#FFFVDD'>.</FONT>");

    currentOption.RenderControl(writer);

    writer.Write("<FONT Color = '#FFFFDD'>.</FONT></TD>");

   }

   // Поместить график, значение и проценты в третьем столбце,

   // если требуется

   if (currentPollStyle != pollStyle.voteonly) {

    if (iTotalVotes > 0) {

     iPercentage = (currentOption.Votes * 100) / iTotalVotes;

    } else {

     iPercentage = 0;

    }

    writer.Write("<ТD bgcolor='#FFFFDD'><TABLE width='100%'>"

     + "<TR><TD><TABLE border='1' bordercolor= 'black' "

     + " width= '100%' cellpadding='0' " + " cellspacing='0'>");

    writer.Write("<TR><TD bgcolor='red' width='" + iPercentage

     + "%'><FONT соlor='red'>.</FONT></TD>");

    writer.Write<"TD bgcolor='white' width='" + (100-iPercentage) +

     "%'><FONT color='white'>." +

     "</FONT></TD></TR></TABLE></TD>");

    writer.Write("<TD width='75'>" + сurrentOption.Votes +

     " (" + iPercentage + "%)</TD><TR></TABLE></TD>");

   }

   // Конец строки

   writer.Write("</TR>");

  }

  // показать общее тело голосов, если выводятся значения

  if (currentPollStyle != pollStyle.voteonly) {

   writer.Write("<TR><TD bgcolor='#FFFFDD' colspan='" +

    iColumns + "'>Total votes cast: " + iTotalVotes + "</TD></TR>");

  }

 }

 // Завершить таблицу

 writer.Write("</TABLE>");

}

Если выборочный опрос выводится в режиме

voteonly

Option

protected void btnVote_Click(object sender, System.EventArgs e) {

 Increment();

 StrawPoll parent = (StrawPoll)Parent;

 if (parent.PollStyle == pollStyle.voteonly) {

  parent.PollStyle = pollStyle.valuesonly;

 }

}

Теперь все готово к проведению голосования.

Часто при использовании специальных элементов управления желательно инициировать специальные события и предоставить пользователям элемента управления действовать в соответствии с этим. В случае элемента управления выборочного опроса было бы хорошо иметь событие

Voted

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

public event EventHandler Voted;

protected void OnVoted(EventArgs e) {

 Voted(this, e);

}

Тогда, как только нам понадобиться инициировать событие, мы просто вызываем метод

OnVoted()

Когда вызывается

OnVoted()

strawPoll1.Voted += new EventHandler(this.StrawPoll1_OnVoted);

Пользователь должен также предоставить код обработчика

strawPoll1_OnVoted()

OptionEventArgs

StrawPoll.cs

public class OptionEventArgs : EventArgs {

 public Option originatingOption;

}

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

EventArgs

EventHandler

PCSCustomWebControls

public delegate void Option EventHandler(object sender, OptionEventArgs e);

Можно использовать эти примеры в

StrawPoll

public class StrawPoll : System.Web.UI.WebControls.WebControl, INamingContainer {

 private string title = "Straw Poll";

 private pollStyle currentPollStyle = pollStyle.voteandvalues;

 public event OptionEventHandler Voted;

 protected void OnVoted(OptionEventArgs e) {

  Voted(this, e);

 }

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

Option

 public void ChildVote(OptionEventArgs e) {

  OnVoted(e);

 }

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

Option

protected void btnVote_Click(object sender, System.EventArgs e) {

 Increment();

 StrawPoll parent = (StrawPoll)Parent;

 if (parent.PollStyle == pollStyle.voteonly) {

  parent.PollStyle = pollStyle.valuesonly;

 }

 OptionEventArgs eOption = new OptionEventArgs();

 eOption.originatingOption = this;

 parent.ChildVote(eOption);

}

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

<form id=Form1 method= post runat="server">

 <PCS:StrawPoll id=strawPoll1

  title="Who is your favorite James Bond?"

  Runat="server" OnVoted="strawPoll1_OnVoted" PollStyle="voteonly">

  <PCS:Option Name="Sean Connery" Votes="101" />

  <PCS:Option Name="Roger Moore" Votes="83" />

  <PCS:Option Name="George Lazenby" Votes="32" />

  <PCS:Option Name="Timothy Dalton" Votes="28" />

  <PCS:Option Name="Pierce Brosnan" Votes="95" />

 </PCS:StrawPoll>

 <br> <br>

 <asp:Label Runat= "server" ID="resultLabel" Text="No vote cast." />

</form>

вместе со связанным объявлением в скрытом коде формы, если он не добавляется автоматически:

public class WebForm1 : System.Web.UI. Page {

 protected StrawPoll strawPoll1;

Затем сделаем что-нибудь в самом обработчике событий:

 protected void strawPoll1_OnVoted(object sender, OptionEventArgs e) {

  result.Label.Text = "You voted for " + e.originatingOption.Name + ".";

 }

Теперь, после голосования мы получаем ответную реакцию на наш голос:

В этой главе были рассмотрены различные способы создания повторно используемых серверных элементов управления ASP.NET с помощью C#. Мы увидели, как создаются простые элементы управления пользователя из существующих страниц ASP.NET, а также специальные элементы.

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

Эта глава завершает три главы, посвященные Web. Далее мы перейдем к рассмотрению взаимодействия COM и .NET.