Серверные элементы управления
Пример обработки событий ServerClick и ServerChange
Приведем пример, демонстрирующий перехват и порядок генерации рассмотренных событий серверных HTML-элементов управления.
-
Добавьте к приложению новую страницу с разделенным кодом и именем EventsControl, и сделайте ее стартовой -
Поместите на форму с вкладки HTML панели Toolbox следующие элементы:
-
Преобразуйте элементы в серверные командой контекстного меню Run As Server Control
-
В режиме Design редактора HTML-кода выполните команду Edit/Select All, а затем команду Format/Justify/Center для выравнивания элементов в центре окна
В результате, интерфейс страницы должен быть представлен следующим HTML-кодом
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="EventsControl.aspx.cs"
Inherits="EventsControl" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div style="text-align: center">
<select id="List1" runat="server" style="width: 202px" multiple size="3">
<option selected>Опция 1</option>
<option>Опция 2</option>
<option>Опция 3</option>
</select>
<br />
<br />
<input id="Textbox1" runat="server" type="text" />
<br />
<br />
<input id="Checkbox1" runat="server" type="checkbox" />
<br />
<br />
<input id="Submit1" runat="server" type="submit" value="submit" />
</div>
</form>
</body>
</html>Элемент multiple в списке дает возможность пользователю выбирать несколько элементов списка, удерживая клавишу Ctrl. Атрибут size задает число видимых элементов списка при скролировании. Элемент selected указывает, какая опция должна быть выделена при загрузке списка.
-
Перейдите в режим редактирования кода C# и создайте обработчики событий для текстового поля, списка и кнопки
Самым легким способом создания обработчика для серверного HTML-элемента является двойной щелчок на нем в режиме Design. В этом случае среда разработки создаст заготовку обработчика в файле C# и свяжет ее с элементом управления, добавив соответсвующий код в дескриптор.
Но обработчик таким способом будет создан только для того события, которое определено в элементе его изготовителем как событие по умолчанию с помощью атрибута [DefaultEvent("Имя_события")]. Для других же событий элемента управления обработчики создаются с помощью явной подписки на них в вызывающем коде.
Изменение содержимого текстового поля и состояния флажка мы привяжем к одному и тому же обработчику. Для этого
-
Скопируйте из дескриптора элемента текстового поля Textbox1 созданную привязку обработчика в дескриптор флажка Checkbox1
После создания обработчиков дескрипторы серверных HTML-элементов управления будут иметь вид
<select id="List1" runat="server" style="width: 202px" multiple size="3"
onserverchange="List1_ServerChange">
<input id="Textbox1" runat="server" type="text" onserverchange="Textbox1_ServerChange" />
<input id="Checkbox1" runat="server" type="checkbox" onserverchange="Textbox1_ServerChange" />
<input id="Submit1" runat="server" type="submit" value="submit"
onserverclick="Submit1_ServerClick" />-
Заполните созданные обработчики событий следующим кодом
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 EventsControl : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!this.IsPostBack) { List1.Items.Add("Доп. опция 4"); List1.Items.Add("Доп. опция 5"); List1.Items.Add("Доп. опция 6"); } } protected void Textbox1_ServerChange(object sender, EventArgs e) { Response.Write("<li>ServerChange перехвачено для " + ((Control)sender).ID + "</li>"); } protected void List1_ServerChange(object sender, EventArgs e) { Response.Write("<li>ServerChange перехвачено для List1. " + "Пользователь выделил следующие опции:</li><br />"); foreach (ListItem li in List1.Items) { if (li.Selected) Response.Write(" - " + li.Value + "<br />"); } } protected void Submit1_ServerClick(object sender, EventArgs e) { Response.Write("<li>ServerClick перехвачено для Submit1</li>"); } } -
Запустите страницу на выполнение и получите примерно такой результат
В качестве дополнительного действия при первой загрузке страницы обработчик Page_Load() добавляет еще три элемента к окну списка. Этим демонстрируется простота программного добавления элементов списка.
Следует отметить, что события изменения могут генерироваться ASP.NET в произвольном порядке. Здесь порядок не гарантирован. Но можно заметить из нашего примера, что события изменения следуют в порядке следования дескрипторов на форме. Единственное, что гарантируется, так это наступление события щелчка будет сгенерировано последним, на каком-бы месте кнопка не стояла (проверьте!).
Web-элементы управления
Мы так подробно рассматривали элементы управления с вкладки HTML только для того, чтобы больше к ним не возвращаться. В основном рекомендуется пользоваться элементами управления с вкладки Standard, которые не только полностью покрывают возможности первых, но и значительно превосходят их по своей функциональности. Серверные HTML-элементы управления были разработаны для существующих HTML-дескрипторов с целью обратной совместимости. Web-элементы являются современным самостоятельным произведением.
Web-элементы изначально считаются серверными и обязательно должны содержать встроенный атрибут runat="server". Поэтому их можно и не называть серверными, итак понятно, о чем идет речь. Для лучшей узнаваемости соответствующие им дескрипторы начинаются с префикса asp. Web-элементы могут автоматически определять тип броузера клиента и подстраиваться под него, генерируя сложный HTML-код из нескольких тегов и JavaScript -сценариев. Они имеют богатый набор событий, которые можно выбирать прямо из панели Properties. С Web-элементами можно работать так же легко, как с объектами локальных приложений.
Web-элементы управления также представляются цепочками наследования классов. Часть иерархии наследования приведена на рисунке.
Базовый класс WebControl
Все элементы управления Web унаследованы от класса WebControl, который, в свою очередь, наследуется от Control. Поэтому многие его свойства и методы, например, Controls, Visible, FindControl() такие же, как и у HTML-элементов управления. Но есть и свои дополнительные свойства, основные из которых приведены в таблице.
Каждый элемент управления привносит свои дополнительные свойства и методы, главное назначение которых - упростить начальную настройку и программное управление элементов, сделать его интуитивно понятным и уменьшить возможные ошибки. Большой Билл сказал: зачем программистам знать HTML, пусть они правильно настроят свойства элементов управления, а уж сами элементы сгенерируют такой HTML, какой нужно.
Заполнение свойства Text данными из ненадежного источника
Многие элементы управления могут принимать данные через свое свойство Text. Это может быть элемент управления Label, TextBox, CheckBox, RadioButton, Button и другие. Если данные мы не генерируем сами, а они поступают из внешнего источника (чужой файл, обратная отсылка с данными пользователя, база данных), то для безопасности мы должны считать их ненадежными и перед записью в свойство Text обязательно обрабатывать на предмет исключения возможных управляющих символов. Для такой обработки предназначен метод
public static string System.Web.HttpUtility.HtmlEncode(string)
Программное управление свойствами Web-элементов управления
Управление размером элемента
Из предыдущей таблицы видно, что все элементы управления Web наследуют от класса WebControl такие свойства размера, как BorderWidth, Height, Width. Их можно задавать не только в режиме проектирования, но и программно в режиме выполнения страницы. Все они будут отображаться в соответствующие атрибуты дескриптора. Размеры задаются не только значением, но и единицами измерения (px - пикселы, % - проценты).
Пусть, например, у нас имеется Web-элемент управления Panel, который отображается дескриптором
<asp:Panel ID="pnl" runat="server" Height="300px" Width="50%" />
Здесь свойства размера заданы в панели Properties на этапе проектирования. Для программной установки значения свойства размера можно:
-
Первый вариант: использовать структуру System.Web.UI.WebControls.Unit и ее статические методы
// Задание высоты элемента pnl в пикселах pnl.Height = Unit.Pixel(300); // Задание ширины элемента pnl в процентах pnl.Width = Unit.Percentage(50);
-
Второй вариант: создать экземпляр структуры System.Web.UI.WebControls.Unit и сразу его настроить, затем использовать для установки свойств размера с применением предопределенного перечисления System.Web.UI.WebControls.UnitType
// Заготавливаем экземпляры структуры Unit для хранения // высоты и ширины в нужных единицах измерения Unit height = new Unit(300, UnitType.Pixel); Unit width = new Unit(50, UnitType.Percentage); // Устанавливаем свойства элемента управления pnl.Height = height; pnl.Width = width;
Управление стилем
Управление стилем также использует предустановленное перечисление System.Web.UI.WebControls.BorderStyle
pnl.BorderStyle = BorderStyle.Dashed;
На клиенте получим такое представление панели
Управление цветом
Для задания значений свойств цвета элементов управления, таких как BackColor, BorderColor, ForeColor, используется структура System.Drawing.Color с предопределенными цветами и ее методы, или статические методы класса System.Drawing.ColorTranslator. Для сокращенного использования на странице такого арсенала нужно импортировать в кодовый файл .aspx.cs определение пространства имен System.Drawing
using System.Drawing;
или применять полное имя класса или структуры при обращении к их компонентам.
Приведем примеры разных способов определения цвета. Для этого поместим на форму три элемента управления Button. Управляющий код C# будет таким
using System;
using System.Web.UI.WebControls;
using System.Drawing;
public partial class Tmp : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// Использование свойств структуры System.Drawing.Color
Button1.BackColor = Color.Red;
// Использование метода структуры System.Drawing.Color
int alpha = 255; // Полностью непрозрачный
int red = 0, green = 255, blue = 0;
Button2.BackColor = Color.FromArgb(alpha, red, green, blue);
// Использование статического метода
// класса System.Drawing.ColorTranslator
Button3.BackColor = ColorTranslator.FromHtml("#0000FF");
Button3.ForeColor = ColorTranslator.FromHtml("white");
}
}В результате, пользователь в броузере увидит следующее
Управление шрифтами
Каждый элемент управления наследует класс WebControl, который в свою очередь содержит свойство Font. Фактически, свойство Font представляет собой экземпляр класса System.Web.UI.WebControls.FontInfo, и имеет все необходимые свойства для определения шрифта. Ниже приведен пример кода, настраивающего шрифты надписей кнопок
using System;
using System.Web.UI.WebControls;
using System.Drawing;
public partial class Tmp : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Button1.BackColor = Color.Red; // Настройка цвета
Button1.Font.Name = "Vernada"; // Настройка шрифта
Button1.Font.Bold = true; // Полужирный
// Настройка цвета
int alpha = 255;
int red = 0, green = 255, blue = 0;
Button2.BackColor = Color.FromArgb(alpha, red, green, blue);
// Используем структуру System.Web.UI.WebControls.FontUnit
// установки относительного размера шрифта
Button2.Font.Size = FontUnit.Smaller;
// Настройка цвета
Button3.BackColor = ColorTranslator.FromHtml("#0000FF");
Button3.ForeColor = ColorTranslator.FromHtml("white");
// Используем структуру System.Web.UI.WebControls.FontUnit
// установки абсолютного размера шрифта в пунктах
Button3.Font.Size = FontUnit.Point(16);
Button3.Font.Underline = true; // Подчеркнем
}
}В результате таких программных настроек сгенерируется HTML-код, который посмотрит на клиента следующими глазами (трехглазое чудовище)
Чушь!, конечно, зато знаем как... Студент Зиборов - не спи, а читай дальше.