Управление Web-элементами в ASP.NET
Упражнение 1. Web-элементы управления Label, TextBox,Button, HyperLink
-
В панели Solution
Explorer вызовите контекстное меню для корневого
узла проекта и командой Add New Item добавьте
к проекту новую активную страницу Page1.aspx с
файлом отделенного кода
-
В дескриптор <div> интерфейсной части страницы Page1.aspx введите
атрибут центрирования дочерних элементов <div align="center">
-
Поместите
на страницу из вкладки Standard панели Toolbox элементы
управления согласно таблицы свойств
-
Расположите
Web-элементы управления внутри дескриптора <div> в порядке
их упоминания в таблице свойств по следующей схеме
-
В раскрывающемся
списке панели Properties установите текущими свойства элемента TextBox с ID= Name
или то же самое выполните через панель Document Outline для быстрого выделения элемента управления
-
Код
интерфейсной части страницы будет таким
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Page1.aspx.cs" Inherits="Page1" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Упражнение 1</title>
</head>
<body>
<form id="form1" runat="server">
<div align="center">
<p>
<asp:Label ID="Title" runat="server" Font-Bold="True"
Font-Size="X-Large" ForeColor="Red"></asp:Label></p>
<p>
<asp:Label ID="Label1" runat="server">Имя:</asp:Label>
<asp:TextBox ID="Name" runat="server" AutoPostBack="True"
BorderStyle="Dotted" MaxLength="35"
Width="200px" OnTextChanged="Name_TextChanged" /></p>
<p>
<asp:Label ID="Label2" runat="server">Адрес:</asp:Label>
<asp:TextBox ID="Address" runat="server" AutoPostBack="True"
BackColor="Blue" Font-Bold="True" ForeColor="Yellow"
Height="50px" TextMode="MultiLine"
OnTextChanged="Name_TextChanged" /></p>
<p>
<asp:Button ID="Button" runat="server" Text="Submit Information"
ToolTip="Показать сообщение"
OnClick="Button_Click" /></p>
<p>
<asp:Label ID="Result" runat="server" Font-Bold="True" /></p>
<hr size="1" width="100%">
<p>
<asp:HyperLink ID="HyperLink1" runat="server"
NavigateUrl="Page2.aspx">Вперед</asp:HyperLink></p>
</div>
</form>
</body>
</html>
Листинг
4.1.
Код интерфейсной части Page1.aspx
-
Переключите
панель Properties в режим отображения
событий Events и
двойным щелчком по полю события TextChanged создайте
обработчик элемента управления Name для
этого события в кодовом файле страницы
-
Установите
текущим элемент Address и подключите его
событие TextChanged на тот же самый обработчик
элемента
Name, раскрыв список зарегистрированных
событий
-
Оставаясь
в режиме Evets панели Properties создайте
для кнопки Button обработчик события Click двойным
щелчком на поле имени обработчика
-
Перейдите
в режим редактирования кодового файла на C# через выполнение
в контенкстном меню команды View Code и
отредактируйте код так
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 Page1 : System.Web.UI.Page
{
private string resultBase = "Поле редактирования изменилось: ";
protected void Page_Load(object sender, EventArgs e)
{
if (this.IsPostBack) return; // Только один раз
Title.Text = "Привет, как Вас зовут?";
Name.Text = "Снетков Владимир Михайлович";
Address.Text = "Великая страна Россия, "
+ "город Красноярск, "
+ "Красноярский рабочий д.13 кв.13";
}
protected void Name_TextChanged(object sender, EventArgs e)
{
Result.Text = resultBase
+ "<br>Первое поле содержит: " + Name.Text
+ "<br>Второе поле содержит: " + Address.Text;
}
protected void Button_Click(object sender, EventArgs e)
{
Title.Text = "Спасибо друг "
+ Name.Text + "!!!!!<br>"
+ "Мы рады, что Вы живете по адресу:<br>"
+ Address.Text + "!!!";
Result.Text = string.Empty;
}
}
Листинг
4.2.
Код файла Page1.aspx.cs
Поскольку мы установили свойство AutoPostBack текстовых полей в значение True, то любое из этих полей будет остсылать данные на сервер всякий раз, когда пользователь покидает поле редактирования (щелкает вне поля) или нажимает клавишу Enter после изменения содержимого поля. На сервер будет также отослана информация о том, что произошло событие Change, и будет выполнен обработчик этого события.
Упражнение 2. Web-элементы управления CheckBox, CheckBoxList, RadioButton, RadioButtonList
Элементы CheckBox и CheckBoxList позволяют размещать на Web-странице в пределах формы флажки и программировать их. Они генерируют html-код флажков, отсылаемый на броузер в зависимости от настройки этих элементов. Оба типов элементов очень похожи по своим характеристикам, но главное отличие между ними состоит в том, что элемент CheckBox позволяет настраивать и обрабатывать события для каждого из отдельных флажков, а элемент CheckBoxList позволяет настраивать и обрабатывать события для группы флажков как единого целого (одна группа - одно событие).
У элемента CheckBox есть свойство Text, значение которого означает надпись, стоящую рядом с флажком. У элемента CheckBoxList вместо свойства Text есть свойство Items, которое содержит список объектов и надписей для коллекции элементов. Там и там значение свойства TextAlign устанавливает, с какой стороны будут располагаться надписи рядом с флажком.
В элементе CheckBoxList флажки в пределах группы по умолчанию располагаются и выравниваются вертикально в один столбик. Однако порядок размещения и выравнивания флажков можно настраивать как в режиме проектирования, так и программно. Свойство RepeatDirection имеет два значения: Vertical и Horizontal. Свойство RepeatColumns задает максимальное количество колонок для выстраивания флажков. Вместе эти два свойства и определяют направление и порядок выстраивания флажков на странице.
Есть еще одно свойство RepeatLayout. Оно также определяет порядок закрепления позиции флажков. При использовании значения Table у свойства RepeatLayout для элемента CheckBoxList фоново создается таблица и флажки располагаются по одному в каждой ячейке этой фоновой таблицы.
Элементы флажков имеют события, которые позволяют отслеживать и своевременно обрабатывать действия пользователя. Но для того, чтобы страница немедленно реагировала на действия пользователя, нужно свойство AutoPostBack устанавливать в значение True. Но следует иметь ввиду, что злоупотребление этим свойством ведет к перегрузке линии связи - лучше все изменения сначала подготовить, затем все вместе отослать на сервер.
Все сказанное про флажки в равной мере относится и к радиокнопкам (элементы RadioButton и RadioButtonList ).
Приступим к выполнению упражнения.
-
Командой
главного меню оболочки Website/Add New Item добавьте
к проекту новую страницу типа Web Form с
отделенным кодовым файлом и именем Page2.aspx,
сделайте эту страницу стартовой
-
Разместите
на странице Web-элементы управления CheckBoxList, RadioButtonList и
другие в сочетании с необходимыми html-элементами. Задайте
им нужные значения свойств
Дизайн страницы должен выглядеть так
Обратите внимание, что только часть элементов мы задействовали как Web-элементы, а именно те из них, которые нужны нам для программирования. Остальные же являются просто элементами оформления дизайна. Желательно бы в окончательном варианте отключить рамку таблицы, здесь она оставлена для лучшего понимания композиции элементов на странице.
Код интерфейсной части будет таким
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Page2.aspx.cs" Inherits="Page2" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Упражнение 2</title>
</head>
<body>
<form id="form1" runat="server">
<div align="center">
<h1>
Испытание переключателей</h1>
<table border="1" cellpadding="1" cellspacing="1" width="100%">
<tr>
<td style="font-weight: bold">
<center>
Выберите актеров (живых или мертвых),
которые Вам нравятся
</center>
</td>
<td style="font-weight: bold">
<center>
Кого из предложенных лиц (живых или мертвых)
Вы хотели бы видеть Начальником Чукотки
</center>
</td>
</tr>
<tr>
<td bgcolor="#ffff99">
<asp:CheckBoxList ID="ActorList" runat="server"
AutoPostBack="True" RepeatLayout="Flow"
Width="194px">
<asp:ListItem Value="Высоцкий" />
<asp:ListItem Value="Галкин" />
<asp:ListItem Value="Жириновский" />
<asp:ListItem Value="Куценко" />
<asp:ListItem Value="Леонтьев" />
<asp:ListItem Value="Смоктуновский" />
<asp:ListItem Value="Пугачева" />
<asp:ListItem Value="Филатов" />
</asp:CheckBoxList>
</td>
<td bgcolor="#ffff99">
<asp:RadioButtonList ID="HeadList" runat="server"
AutoPostBack="True" Height="120px"
RepeatColumns="1" RepeatLayout="Flow"
Width="182px">
<asp:ListItem Selected="True" Value="Абрамович" />
<asp:ListItem Value="Алахтаева" />
<asp:ListItem Value="Григорьев" />
<asp:ListItem Value="Жданов" />
<asp:ListItem Value="Кривенко" />
<asp:ListItem Value="Пимашков" />
<asp:ListItem Value="Чубайс" />
<asp:ListItem Value="Шойгу" />
</asp:RadioButtonList></td>
</tr>
<tr>
<td>
Список понравившихся артистов:
</td>
<td>
Любимый Начальник Чукотки:
</td>
</tr>
<tr>
<td bgcolor="#ccffff">
<asp:Label ID="Actor" runat="server" Text="Actor" />
</td>
<td bgcolor="#ccffff" valign="top">
<asp:Label ID="Head" runat="server" Text="Head" />
</td>
</tr>
<tr>
<td align="center" colspan="2">
<asp:Button ID="Button" runat="server"
Text="Отправить на обработку" />
</td>
</tr>
<tr>
<td align="right">
<asp:HyperLink ID="HyperLink1" runat="server"
NavigateUrl="Page1.aspx" Text="Назад" />
</td>
<td>
<asp:HyperLink ID="HyperLink2" runat="server"
NavigateUrl="Page3.aspx" Text="Вперед" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Листинг
4.3.
Код интерфейсной части страницы Page2.aspx
-
Откройте
панель Document Outline и выделите последовательно
элементы CheckBoxList (ID=ActorList)
и RadioButtonList (ID=HeadList).
В панели Properties создайте обработчики
для события SelectedIndexChanged
-
Выделите
текстовую метку Actor и подсоедините ее
событие Load к обработчику ActorList_SelectedIndexChanged через
раскрывающийся список в поле значений
-
Выделите
текстовую метку Head и подсоедините ее
событие Load к обработчику HeadList_SelectedIndexChanged через
раскрывающийся список в поле значений
Текстовые метки мы присоединили к обработчикам события Load для того, чтобы при первой загрузке страницы в их свойствах Text установились значения, соответствующие начальному состоянию списков. Для списка ActorList ни один флажок в начальном состоянии не поднят, поэтому все-равно в текстовую метку Actor ничего загружаться не будет и можно было не присоединять обработчик к событию 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 Page2 : System.Web.UI.Page
{
static int countActor, countHead;
protected void Page_Load(object sender, EventArgs e)
{
// Предотвращение повторной инициализации
if (this.IsPostBack) return;
// Инициализация элементов управления
countActor = ActorList.Items.Count;
countHead = HeadList.Items.Count;
}
protected void ActorList_SelectedIndexChanged(object sender, EventArgs e)
{
// Блок выбора актеров
Actor.Text = "";
int j = 0;
for (int i = 0; i < countActor; i++)
if (ActorList.Items[i].Selected)
{
j++;
Actor.Text += j.ToString()
+ ") "
+ ActorList.Items[i].Text;
if (i < countActor - 1)
Actor.Text += "<br>";
}
}
protected void HeadList_SelectedIndexChanged(object sender, EventArgs e)
{
// Блок выбора Начальника
Head.Text = "";
int j = 0;
for (int i = 0; i < countHead; i++)
if (HeadList.Items[i].Selected)
{
j++;
Head.Text += j.ToString()
+ ") "
+ HeadList.Items[i].Text;
if (i < countHead - 1)
Head.Text += "<br>";
}
}
}
Листинг
4.4.
Код файла Page2.aspx.cs
-
Постройте
проект и испытайте работу переключателей
Отметьте, что при установленном в переключателях свойстве AutoPostBack страница реагирует на любые изменения в переключателях. Но это сильно замедляет динамику страницы и кнопка обратной отсылки оказывается лишней. Чтобы отключить свойство AutoPostBack, можно просто убрать атрибут AutoPostBack из дескриптора элемента списка или присвоить ему значение False, которое он имеет по умолчанию. Редактирование свойства через панель Properties убирает атрибут.
При отключенных свойствах AutoPostBack пользователь должен вначале изменить состояние всех Web-элементов страницы нужным образом и только потом осуществить общую обратную отсылку кнопкой Submit. Обратите внимание, что для кнопки на странице обработчик не создан, но события изменения состояния списков распознаются на сервере и код закрепленных за ними обработчиков выполняется.