Опубликован: 13.07.2010 | Доступ: свободный | Студентов: 891 / 20 | Оценка: 4.40 / 4.20 | Длительность: 77:34:00
Тема: Программирование
Специальности: Программист, Архитектор программного обеспечения
Самостоятельная работа 3:
Управление HTML-элементами в ASP.NET
Упражнение 12. Элемент управления HTMLSelect
Элемент управления HTMLSelect позволяет программировать HTML-тег выпадающего списка <select> и встроенные в него теги пунктов списка <option>. Добавим страничку к нашему проекту, где продемонстрируем этот элемент.
-
Добавьте
к проекту активную страницу Web Form с
отделенным кодом и именем HTMLSelect.aspx.
Сделайте
страницу стартовой для удобства отладки -
Настройте
редактор Web-формы на абсолютное позиционирование добавляемых
элементов пользовательского интерфейса. Для этого переведите
страницу в режим редактирования Design и
выполните команду Layout/Position/Auto-position Options.
В появившемся окне включите верхний флажок "Change
positioning ..." и удостовертесь, чтобы выпадающий список имел значение "Absolutely positioned"
-
В
панели Toolbox откройте вкладку HTML и
перенесите на форму компоненты, которые нужно расположить
в соответствии с рисунком
- Контейнер Div с размещенным в нем текстом "Элемент управления HTMLSelect" заголовка страницы
- Компонент Input (Text) текстового поля с идентификатором id=optionTag
- Контейнер Div с размещенным в нем текстом "Новая опция:" для маркировки текстового поля optionTag
- Контейнер Div с размещенным в нем текстом "Результат" и идентификатором id=message для программного управления
- Контейнер Div с размещенным в нем текстом "Сообщения:" для маркировки контейнера message
- Компонент Select с идентификатором id=selectTag для программного управления
- Кнопку Input (Submit) с идентификатором id=AddOption для программного управления и Value="Добавить новую опцию"
- Кнопку Input (Submit) с идентификатором id=GetSelected для программного управления и Value="Показать выбор"
- Компонент Horizontal Rule
-
Скопируйте
с предыдущей страницы таблицу с размещенными в ней
ссылками для перехода и в панели свойств отредактируйте
их так
<a href="HTMLInputText.aspx">Назад</a>
<a href="HTMLTable.aspx">Вперед</a>-
Разместите
компоненты так, как показано на рисунке. Задайте
для элементов управления, которые будут участвовать в программном
управлении ( optionTag, selectTag, message, AddOption, GetSelected),
атрибут runat="server" и
проследите
за появлением зеленых маркеров на элементах управления, превращенных
в серверные
-
Создайте
обработчики для кнопок AddOption, GetSelected и
заполните их так
protected void Page_Load(object sender, EventArgs e)
{
selectTag.Items[0].Text = "Первая опция";
}
protected void AddOption_ServerClick(object sender, EventArgs e)
{
selectTag.Items.Add(optionTag.Value);
int count = selectTag.Items.Count;
message.InnerText = "В список добавлена " +
count + " опция";
selectTag.SelectedIndex = count - 1;// Сделать текущей
}
protected void GetSelected_ServerClick(object sender, EventArgs e)
{
message.InnerHtml = "Вы выбрали: ";
for (int i = 0; i <= selectTag.Items.Count - 1; i++)
{
if (selectTag.Items[i].Selected)
message.InnerHtml += selectTag.Items[i].Text;
}
}
Листинг
3.25.
Обработчики в файле HTMLSelect.aspx.cs
-
Постройте
приложение и проверьте его работоспособность
Как можно убедиться в ассоциированном файле по всплывающей подсказке при позиционировании курсора на объекте selectTag, элемент управления Select поддерживается библиотечным классом System.Web.UI.HtmlControls.HtmlSelect. В нашем случае экземпляром этого класса является объект с идентификатором selectTag. В этом объекте свойство Items, представляющее собой ссылку на экземпляр класса System.Web.UI.WebControls.ListItemCollection, содержит элементы списка и члены для управления этими элементами. Некоторые из этих членов приведены в таблице
Упражнение 13. Элемент управления HTMLTable (HTMLTableRow, HTMLTableCell)
Эти классы управляют тегами, отображающими таблицу. Через эти классы можно динамически изменять свойства тегов <table> - таблица в целом, <tr> - строка таблицы, <th> - заголовочный столбец, <td> - простой столбец. Можно, также, добавлять и уничтожать строки и ячейки. Приведем пример, в котором будем программно управлять таблицей с помощью выпадающих списков.
-
Добавьте
к проекту новую страницу типа Web Form с
отделенным кодом и именем HTMLTable.aspx
-
Назначьте
ее стартовой для удобства отладки
-
Используя
компоненты вкладки HTML панели Toolbox,
оформите интерфейсную часть страницы так, как показано
на рисунке, где программируемые (серверные) элементы отмечены
зеленым маркером. Списки Select и подписи
для них поместите в локализующую таблицу размером 2x6 с невидимыми
границами
-
Гиперссылки
вместе с локализующей таблицей скопируйте из предыдущей страницы
и откорректируйте так
<a href="HTMLSelect.aspx">Назад</a> <a href="HTMLTextArea.aspx">Вперед</a>
-
Через
меню свойств назначьте таблице идентификатор table,
спискам соответственно bgColor, border, cellPad, cellSpac, selectRow, rowColor, Execute
-
Войдите
в Source -режим и вручную присвойте дескрипторам <tr> таблицы table атрибуты runat="server" и id=Tr1, id=Tr2, id=Tr3
Дерево интерфейсных элементов с присвоенными им идентификаторами хорошо просматривается в панели Document Outline
-
Создайте
обработчик для кнопки Submit, по щелчку
на которой информация о текущем состоянии элементов управления
в броузере будет собрана отправлена на сервер, и заполните
обрабатывающий файл HTMLTable.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 HTMLTable : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// Динамическое заполнение списков
// выполнить только при первом запросе
if (!this.IsPostBack)
{
// Заполнение списка bgColor
bgColor.Items[0].Text = "None";
bgColor.Items[0].Value = "";
bgColor.Items.Add("White");
bgColor.Items.Add("Red");
bgColor.Items.Add("Green");
bgColor.Items.Add("Blue");
bgColor.Items.Add("Yellow");
// Заполнение списка border
border.Items[0].Text = "0";
border.Items.Add("1");
border.Items.Add("2");
border.Items.Add("3");
border.Items.Add("4");
border.Items.Add("5");
border.SelectedIndex = 1;// Сделать текущей
// Заполнение списка cellPad
cellPad.Items[0].Text = "0";
cellPad.Items.Add("1");
cellPad.Items.Add("2");
cellPad.Items.Add("3");
cellPad.Items.Add("4");
cellPad.Items.Add("5");
// Заполнение списка cellSpace
cellSpac.Items[0].Text = "0";
cellSpac.Items.Add("1");
cellSpac.Items.Add("2");
cellSpac.Items.Add("3");
cellSpac.Items.Add("4");
cellSpac.Items.Add("5");
// Заполнение списка selectRow
selectRow.Items[0].Text = "1";
selectRow.Items.Add("2");
selectRow.Items.Add("3");
// Заполнение списка rowColor
rowColor.Items[0].Text = "None";
rowColor.Items[0].Value = "";
rowColor.Items.Add("White");
rowColor.Items.Add("Red");
rowColor.Items.Add("Green");
rowColor.Items.Add("Blue");
rowColor.Items.Add("Yellow");
}
}
protected void Execute_ServerClick(object sender, EventArgs e)
{
// Управление атрибутами всей таблицы
table.BgColor = bgColor.Value;
table.Border = Convert.ToInt32(border.Value);
table.CellPadding = Convert.ToInt32(cellPad.Value);
table.CellSpacing = Convert.ToInt32(cellSpac.Value);
// Управление атрибутами отдельных строк
if (selectRow.Value == "1")
Tr1.BgColor = rowColor.Value;
else if (selectRow.Value == "2")
Tr2.BgColor = rowColor.Value;
else if (selectRow.Value == "3")
Tr3.BgColor = rowColor.Value;
}
}
Листинг
3.26.
Код файла HTMLTable.aspx.cs
-
Постройте
приложение и убедитесь в его работоспособности. Результат
внешне должен выглядеть примерно так
Обратите внимание, что изменение фонового цвета всей таблицы не может изменить фоновый цвет, определенный для конкретной строки. Этим демонстрируется важное правило HTML и CSS (каскадные таблицы стилей), что внутренний атрибут всегда отменяет значение одноименного внешнего атрибута (своя рубаха ближе к телу).
-
Исходный
код интерфейсной части может быть таким (приводится из милости
к любимым студентам)
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="HTMLTable.aspx.cs" Inherits="HTMLTable" %>
<html>
<head>
<title>HTMLTable</title>
</head>
<body>
<div align="center">
<form id="form1" runat="server" method="post">
<h1>
Программное управление свойствами таблицы</h1>
<div>
Управляемая таблица
</div>
<table id="table" runat="server" border="1" width="550">
<tr id="Tr1" runat="server">
<td style="width: 77px">
Стих 1
</td>
<td>
Мы рубим ступени - ни шагу назад
</td>
</tr>
<tr id="Tr2" runat="server">
<td style="width: 77px">
Стих 2
</td>
<td>
И от напряжения колени дрожат
</td>
</tr>
<tr id="Tr3" runat="server">
<td style="width: 77px">
Стих 3
</td>
<td>
И сердце к вершине готово бежать из груди
</td>
</tr>
</table>
<br />
<table border="0" width="100%">
<tr align="center">
<td style="width: 17%">
Background Color</td>
<td style="width: 17%">
Border</td>
<td style="width: 17%">
Cellpadding</td>
<td style="width: 17%">
Cellspacing</td>
<td style="width: 17%">
Select a Row</td>
<td style="width: 17%">
Row Color</td>
</tr>
<tr align="center">
<td>
<select id="bgColor" runat="server" style="width: 138px;">
<option selected=""></option>
</select></td>
<td>
<select id="border" runat="server" style="width: 74px;">
<option selected=""></option>
</select></td>
<td>
<select id="cellPad" runat="server" style="width: 90px;">
<option selected=""></option>
</select></td>
<td>
<select id="cellSpac" runat="server" style="width: 84px;">
<option selected=""></option>
</select></td>
<td>
<select id="selectRow" runat="server" style="width: 102px;">
<option selected=""></option>
</select></td>
<td>
<select id="rowColor" runat="server" style="width: 82px;">
<option selected=""></option>
</select></td>
</tr>
</table>
<br />
<input id="Execute" runat="server" type="submit"
value="Submit" onserverclick="Execute_ServerClick">
<br />
<br />
<table id="Table2" border="0" cellpadding="1" cellspacing="1" width="160">
<tr>
<td align="right">
<a href="HTMLSelect.aspx">Назад</a></td>
<td style="width: 20px"></td>
<td>
<a href="HTMLTextArea.aspx">Вперед</a></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Листинг
3.27.
Код интерфейсной части страницы HTMLTable.aspx