Управление Web-элементами в ASP.NET

Файлы к лабораторной работе Вы можете скачать здесь.

Web-элементы размещены на вкладке Standard панели Toolbox среды Visual Studio .NET. В дальнейшем будем их называть просто серверными Web-элементами, поскольку они разработаны специально для поддержки сервером ASP.NET страниц. По сравнению с серверными html-элементами, Web-элементы имеют больше функциональных возможностей высокого уровня и автоматически приспосабливаются к типу броузера клиента, посетившего страницу.

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

Распознавание броузера

В мире существует множество различных типов броузеров, хотя наибольшее распространение имеют только два: Netscape Navigator и Microsoft Internet Explorer. Но разработчик должен стремиться к возможности корректного отображения его страницы на наибольшем количестве броузеров. Простой html-код не дает таких возможностей.

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

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

Сравнение html-элементов и Web-элементов

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

При помещении Web-элемента управления на страницу создается элемент управления для сервера, а не для клиента. Сервер принимает этот элемент управления и генерирует соответствующий html-код на основе функциональных возможностей самого элемента управления. В html-представлении ASP.NET страницы каждый Web-элемент управления описывается открывающим и закрывающим дескриптором с префиксом asp:, например, для Web-элемента Label это может выглядеть так

<asp:Label [attributes]>Hello World!</asp:Label>

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

Web-элементы и их программирование

Наконец-то Web-страницы со сложной функциональностью можно программировать в том же стиле, как это делается при создании локальных Windows-приложений с использованием компонентов. При помещении Web-компонента на Web-форму оболочка автоматически генерирует в нем атрибут runat="server". Это означает, что элемент и сопутствующий ему код обязательно будут обработаны сервером.

Все элементы управления вкладки Standard поддерживаются классами, размещенными в простанстве имен System.Web.UI.WebControls. Они произведены от общего класса WebControl, а значит наследуют все его свойства и методы. Сам же класс WebControl наследует, в свою очередь, от класса Control. В таблице перечислены все элементы управления, содержащиеся во вкладке Standard панели Toolbox.

Этапы взаимодействия броузера и сервера в ASP.NET

Рассмотрим механизм работы ASP.NET по шагам на примере простой формы с текстовым полем и кнопкой типа submit, при нажатии на которую должно быть сгенерировано привествие.

Состояние вида

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

Информация о сотоянии Web-формы называется состоянием представления или состоянием вида (view state). Среда исполнения ASP.NET, если ей указать, может автоматически сохранять состояние вида Web-формы либо на сервере, либо на клиенте. Такие возможности называются управлением сеансами или состоянием приложения. Для сохранения на клиенте состояние вида упаковывается в скрытые текстовые поля типа

<input type="hidden" name="__VIEWSTATE" value="......." />

Модель событий Web-форм

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

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

Наибелее часто из событий автоматического обращения к серверу используется событие щелчка на кнопке. Другие события, например, выбор элемента из списка, установка или сброс флажка, не приводят к немедленному обращению к серверу (если только их свойство AutoPostBack не было установлено в True ). Такого рода события накапливаются в буфере броузера до тех пор, пока событие щелчка на кнопке не вызовет отправку сообщения на сервер вместе с накопленными событиями. Получив обратную отсылку, сервер распознает накопленные события, изменяющие состояние элементов формы, и обрабатывает их, причем последовательность обработки поступивших событий произвольная.

Обработка страницы

Страница совместно обрабатывается Web-сервером, средой выполнения ASP.NET и кодом фонового файла или кодом, включенным в страницу как сценарий. Наследуемый класс System.Web.UI.Page содержит ряд событий, методов и свойств, с помощью которых можно управлять обработкой страницы. В процессе стандартной обработки страницы на сервере происходит ряд событий уровня всей страницы.

События класса Page

Свойства класса Page

Приступим к разработке демонстрационных страниц с использованием высокоразвитых Web-элементов из вкладки Standard панели Toolbox. Создадим проект с начальной страницей и далее будем добавлять к нему все новые страницы, на которых будем размещать те или иные Web-элементы управления.

Упражнение 1. Web-элементы управления Label, TextBox,Button, HyperLink

Командой File/New/Web Site создайте новый пустой проект с именем WebControls, заполнив мастер так

В панели 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>nbsp;
                <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>nbsp;
                <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>

Переключите панель 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;
    }
}

Поскольку мы установили свойство 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>

Откройте панель 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>";
            }
    }
}

Постройте проект и испытайте работу переключателей

Отметьте, что при установленном в переключателях свойстве AutoPostBack страница реагирует на любые изменения в переключателях. Но это сильно замедляет динамику страницы и кнопка обратной отсылки оказывается лишней. Чтобы отключить свойство AutoPostBack, можно просто убрать атрибут AutoPostBack из дескриптора элемента списка или присвоить ему значение False, которое он имеет по умолчанию. Редактирование свойства через панель Properties убирает атрибут.

Отключите свойство AutoPostBack от списков переключателей и вновь испытайте работу страницы

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

Упражнение 3. Web-элементы управления DropDownList и ListBox

Рассмотрим списковые элементы управления DropDownList и ListBox на примере их использования. Эти элементы способны генерировать гибкий html-код для представления на стороне клиента информации в виде традиционных списков.

Этап проектирования

Добавьте к проекту новую страницу (с отделенным или совмещенным кодом - безразлично) с именем Page3.aspx и сделайте эту страницу стартовой

Разместите на странице html-элемент Table и установите для него в исходном html-коде 6 строк и 4 столбца. Для этого:

<table width="100%">
            <tr>
                <td width="25%">
                </td>
                <td width="25%">
                </td>
                <td width="25%">
                </td>
                <td width="25%">
                </td>
            </tr>
        </table>

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

В режиме Design выделите первую строку таблицы и выполните команду главного меню Layout/Merge Cells

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

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

Последовательно позиционируйте текстовый курсор рядом с элементами, помещенными в ячейки таблицы, затем удерживая клавишу Shift, стрелками клавиатуры выделите элемент и командой меню Format/Justify/Center отцентрируйте их положение в пределах ячейки. То же самое можно сделать через панель инструментов Formatting, если включить ее командой Tools/Customize. Не центрируйте только элементы Label1,...,Label4

Визуальное представление страницы будет таким

Выделите элементы ListBox и задайте им свойство SelectionMode=Multiple для возможности выделения многих элементов списка

Проверьте, что AutoPostBack=False - для запрещения самовольной отсылки при каждом новом изменении в списке, а только по щелчку на кнопке

Выделите элемент DropDownList1 и заполните его свойство Items (в свойстве заполняйте поле Value, а свойство Text будет заполняться оболочкой).

Войдите в режим Source-редактирования, найдите код списка DropDownList1

<asp:DropDownList ID="DropDownList1" runat="server">
                        <asp:ListItem Value="Ачинск1"></asp:ListItem>
                        <asp:ListItem Value="Москва1"></asp:ListItem>
                        <asp:ListItem Value="Назарово1"></asp:ListItem>
                        <asp:ListItem Value="Казань1"></asp:ListItem>
                        <asp:ListItem Value="Красноярск1"></asp:ListItem>
                        <asp:ListItem Value="Петербург1"></asp:ListItem>
                        <asp:ListItem Value="Тула1"></asp:ListItem>
                        <asp:ListItem Value="Рязань1"></asp:ListItem>
                        <asp:ListItem Value="Воронеж1"></asp:ListItem>
                    </asp:DropDownList>

и скопируйте выделенные опции ListItem внутрь заготовки ListBox1 и вместо 1 подставьте 2 в конце каждого значения, чтобы получился код списка

<asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple">
                        <asp:ListItem Value="Ачинск2"></asp:ListItem>
                        <asp:ListItem Value="Москва2"></asp:ListItem>
                        <asp:ListItem Value="Назарово2"></asp:ListItem>
                        <asp:ListItem Value="Казань2"></asp:ListItem>
                        <asp:ListItem Value="Красноярск2"></asp:ListItem>
                        <asp:ListItem Value="Петербург2"></asp:ListItem>
                        <asp:ListItem Value="Тула2"></asp:ListItem>
                        <asp:ListItem Value="Рязань2"></asp:ListItem>
                        <asp:ListItem Value="Воронеж2"></asp:ListItem>
                    </asp:ListBox>

Будем считать, что мы заполнили два левых списка декларативно (на этапе проектирования).

Задайте элементам HyperLink1 и HyperLink2 значения свойств

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

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

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="Page3.aspx.cs" Inherits="Page3" %>
    
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table width="100%" bgcolor="#CCFFFF">
            <tr bgcolor="white">
                <td colspan="4" style="text-align: center">
                    <asp:Label ID="lblTitle" runat="server" Text="Label"></asp:Label></td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: center">
                    Заполняется декларативно
                </td>
                <td colspan="2" style="text-align: center">
                    Заполняется программно
                </td>
            </tr>
            <tr>
                <td width="25%" style="text-align: center">
                    DropDownList1<br />
                    <asp:DropDownList ID="DropDownList1" runat="server">
                        <asp:ListItem Value="Ачинск1"></asp:ListItem>
                        <asp:ListItem Value="Москва1"></asp:ListItem>
                        <asp:ListItem Value="Назарово1"></asp:ListItem>
                        <asp:ListItem Value="Казань1"></asp:ListItem>
                        <asp:ListItem Value="Красноярск1"></asp:ListItem>
                        <asp:ListItem Value="Петербург1"></asp:ListItem>
                        <asp:ListItem Value="Тула1"></asp:ListItem>
                        <asp:ListItem Value="Рязань1"></asp:ListItem>
                        <asp:ListItem Value="Воронеж1"></asp:ListItem>
                    </asp:DropDownList></td>
                <td width="25%" style="text-align: center">
                    ListBox1<br />
                    <asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple">
                        <asp:ListItem Value="Ачинск2"></asp:ListItem>
                        <asp:ListItem Value="Москва2"></asp:ListItem>
                        <asp:ListItem Value="Назарово2"></asp:ListItem>
                        <asp:ListItem Value="Казань2"></asp:ListItem>
                        <asp:ListItem Value="Красноярск2"></asp:ListItem>
                        <asp:ListItem Value="Петербург2"></asp:ListItem>
                        <asp:ListItem Value="Тула2"></asp:ListItem>
                        <asp:ListItem Value="Рязань2"></asp:ListItem>
                        <asp:ListItem Value="Воронеж2"></asp:ListItem>
                    </asp:ListBox></td>
                <td width="25%" style="text-align: center">
                    DropDownList2<br />
                    <asp:DropDownList ID="DropDownList2" runat="server">
                    </asp:DropDownList></td>
                <td width="25%" style="text-align: center">
                    ListBox2<br />
                    <asp:ListBox ID="ListBox2" runat="server" SelectionMode="Multiple"></asp:ListBox></td>
            </tr>
            <tr bgcolor="#CCFF00">
                <td width="25%">
                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></td>
                <td width="25%">
                    <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label></td>
                <td width="25%">
                    <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label></td>
                <td width="25%">
                    <asp:Label ID="Label4" runat="server" Text="Label"></asp:Label></td>
            </tr>
            <tr>
                <td colspan="4" style="text-align: center">
                    <asp:Button ID="Button1" runat="server" Text="Отослать на сервер" /></td>
            </tr>
            <tr>
                <td width="25%">
                </td>
                <td width="25%" style="text-align: right">
                    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="Page2.aspx">Назад</asp:HyperLink></td>
                <td width="25%">
                    <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="Page4.aspx">Вперед</asp:HyperLink></td>
                <td width="25%">
                </td>
            </tr>
        </table>
     </div>
    </form>
</body>
</html>

Этап программирования

Здесь мы построим программную часть функционирования страницы при загрузке на сервер. Еще раз вспомним, что результатом выполнения кода страницы является генерация html-отклика и отправка его клиенту.

Через меню View/Code оболочки перейдите к редактированию CodeBehind-файла Page3.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 Page3 : System.Web.UI.Page
{
    static int count1, count2, count3, count4;
    
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Page.IsPostBack) return; // Выполнять только раз
    
        // Заполнить первую строку таблицы
        lblTitle.Text = "<h1 style='color: #FF0000'>Элементы "
            + "управления DropDownList и ListBox</h1>";
    
        // Заполнить программно DropDownList2
        // Способ 1 - нормальный
        DropDownList2.Items.Add("Москва3");
        DropDownList2.Items.Add("Назарово3");
        DropDownList2.Items.Add("Казань3");
        DropDownList2.Items.Add("Красноярск3");
        // Способ 2 - извращенный
        DropDownList2.Items.Add(new ListItem("Петербург3"));
        DropDownList2.Items.Add(new ListItem("Тула3"));
        DropDownList2.Items.Add(new ListItem("Рязань3"));
        DropDownList2.Items.Add(new ListItem("Воронеж3"));
        // Способ 3 - добавить спереди
        DropDownList2.Items.Insert(0, "Ачинск3");
        // Выбрать элемент списка
        DropDownList2.Items[4].Selected = true;
    
        // Заполнить программно ListBox2
        // Можно заполнить точно также, но мы это
        // сделаем через промежуточный источник
        // Создать источник данных
        ArrayList tmp = new ArrayList();
        tmp.Add("Москва4");
        tmp.Add("Назарово4");
        tmp.Add("Казань4");
        tmp.Add("Красноярск4");
        tmp.Add("Петербург4");
        tmp.Add("Тула4");
        tmp.Add("Рязань4");
        tmp.Add("Воронеж4");
        tmp.Insert(0, "Ачинск4");
        // Привязать данные к списку ListBox2
        ListBox2.DataSource = tmp;
        ListBox2.DataBind();
        // Выбрать элемент списка
        ListBox2.Items.FindByText("Красноярск4").Selected = true;
    
        // Списки сформированы, можно определить их длину
        count1 = DropDownList1.Items.Count;
        count2 = ListBox1.Items.Count;
        count3 = DropDownList2.Items.Count;
        count4 = ListBox2.Items.Count;
    
        // Выделить в ListBox1 последний элемент
        ListBox1.Items[count2 - 1].Selected = true;
    
        // Сбросить значения текстовых меток
        Label1.Text = Label2.Text = Label3.Text = Label4.Text = "";
    }
}

В этом примере программного заполнения элементов списка продемонстрировано три способа:

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

protected void Button1_Click(object sender, EventArgs e)
    {
        int j;
    
        // Первый список
        Label1.Text = "";
        j = 0;
        for (int i = 0; i < count1; i++)
            if (DropDownList1.Items[i].Selected)
            {
                j++;
                Label1.Text += j.ToString()
                    + ") "
                    + DropDownList1.Items[i].Text;
                if (i < count1 - 1)
                    Label1.Text += "<br>";
            }
    
        // Второй список
        Label2.Text = "";
        j = 0;
        for (int i = 0; i < count2; i++)
            if (ListBox1.Items[i].Selected)
            {
                j++;
                Label2.Text += j.ToString()
                    + ") "
                    + ListBox1.Items[i].Text;
                if (i < count1 - 1)
                    Label2.Text += "<br>";
            }
    
        // Третий список
        Label3.Text = "";
        j = 0;
        for (int i = 0; i < count3; i++)
            if (DropDownList2.Items[i].Selected)
            {
                j++;
                Label3.Text += j.ToString()
                    + ") "
                    + DropDownList2.Items[i].Text;
                if (i < count3 - 1)
                    Label3.Text += "<br>";
            }
    
        // Четвертый список
        Label4.Text = "";
        j = 0;
        for (int i = 0; i < count4; i++)
            if (ListBox2.Items[i].Selected)
            {
                j++;
                Label4.Text += j.ToString()
                    + ") "
                    + ListBox2.Items[i].Text;
                if (i < count4 - 1)
                    Label4.Text += "<br>";
            }
    }

Постройте страницу и проверьте ее работоспособность

Внешне она должна быть примерно такой

Упражнение 4. Некоторые другие Web-элементы управления

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

Через панель Solution Explorer добавьте к проекту каталог с именем Resources

Вызовите для созданного каталога Resources контекстное меню и командой Add Existing Item добавьте в него выделенное на рисунке содержимое из прилагаемого каталога Source

Этап проектирования

Создайте новую страницу с отделенным кодом и именем Page4.aspx, сделайте ее стартовой

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

Настройте декларативные свойства элементов управления ( на этапе проектирования ), как приведено в листинге

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="Page4.aspx.cs" Inherits="Page4" %>
    
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <h1 align="center">
        Программирование элементов WebControls
    </h1>
    <form id="WebControls" runat="server">
        <table align="center" width="100%" border="1">
            <tr>
                <th bgcolor="#95fbfb" style="width: 102px">
                    Элемент
                </th>
                <th bgcolor="#95fbfb" style="width: 277px">
                    Представление элемента
                </th>
                <th bgcolor="#95fbfb" >
                    Программируемое событие</th>
            </tr>
            <tr>
                <td bgcolor="#ffff96" style="width: 102px">
                    Button
                </td>
                <td bgcolor="#95fbfb" style="width: 277px">
                    <asp:Button ID="Button1" runat="server" />
                </td>
                <td bgcolor="#95fbfb" >
                    Click
                </td>
            </tr>
            <tr>
                <td bgcolor="#ffff96" style="width: 102px">
                    Button
                </td>
                <td bgcolor="#95fbfb" style="width: 277px">
                    <asp:Button ID="Button2" runat="server" />
                </td>
                <td bgcolor="#95fbfb" >
                    Command
                </td>
            </tr>
            <tr>
                <td bgcolor="#ffff96" style="width: 102px">
                    CheckBox
                </td>
                <td bgcolor="#95fbfb" style="width: 277px">
                    <asp:CheckBox ID="CheckBox1" runat="server" Font-Bold="True" 
                                  Font-Size="Medium" Height="20px"
                                  Text="CheckBox Control" TextAlign="Left" />
                </td>
                <td bgcolor="#95fbfb" >
                    CheckedChanged
                </td>
            </tr>
            <tr>
                <td bgcolor="#ffff96" style="width: 102px">
                    RadioButton
                </td>
                <td bgcolor="#95fbfb" style="width: 277px">
                    <asp:RadioButton ID="RadioButton1" runat="server" GroupName="Group" />
                    <br />
                    <asp:RadioButton ID="RadioButton2" runat="server" GroupName="Group" />
                </td>
                <td bgcolor="#95fbfb" >
                    CheckedChanged
                </td>
            </tr>
            <tr>
                <td bgcolor="#ffff96" style="width: 102px">
                    HyperLink
                </td>
                <td bgcolor="#95fbfb" style="width: 277px">
                    <asp:HyperLink ID="HyperLink1" runat="server"></asp:HyperLink>
                </td>
                <td bgcolor="#95fbfb" >
                </td>
            </tr>
            <tr>
                <td bgcolor="#ffff96" style="width: 102px">
                    Image
                </td>
                <td bgcolor="#95fbfb" style="width: 277px">
                    <asp:Image ID="Image1" runat="server" /></td>
                <td bgcolor="#95fbfb" >
                </td>
            </tr>
            <tr>
                <td bgcolor="#ffff96" style="width: 102px">
                    ImageButton
                </td>
                <td bgcolor="#95fbfb" style="width: 277px">
                    <asp:ImageButton ID="ImageButton1" runat="server" 
                                     BorderColor="Blue" BorderStyle="Solid"
                                     BorderWidth="2px" />
                </td>
                <td bgcolor="#95fbfb" >
                    Click
                </td>
            </tr>
            <tr>
                <td bgcolor="#ffff96" style="width: 102px">
                    Label
                </td>
                <td bgcolor="#95fbfb" style="width: 277px">
                    <asp:Label ID="Label1" runat="server"></asp:Label>
                </td>
                <td bgcolor="#95fbfb" >
                </td>
            </tr>
            <tr>
                <td bgcolor="#ffff96" style="width: 102px">
                    LinkButton
                </td>
                <td bgcolor="#95fbfb" style="width: 277px">
                    <asp:LinkButton ID="LinkButton1" runat="server"></asp:LinkButton>
                </td>
                <td bgcolor="#95fbfb" >
                    Click
                </td>
            </tr>
            <tr>
                <td bgcolor="#ffff96" style="width: 102px; height: 26px;">
                    Literal
                </td>
                <td bgcolor="#95fbfb" style="width: 277px; height: 26px;">
                    <asp:Literal ID="Literal1" runat="server"></asp:Literal>
                </td>
                <td bgcolor="#95fbfb"  style="height: 26px">
                </td>
            </tr>
            <tr>
                <td bgcolor="#ffff96" style="width: 102px">
                    Panel
                </td>
                <td bgcolor="#95fbfb" style="width: 277px">
                    <asp:Panel ID="Panel1" runat="server" />
                </td>
                <td bgcolor="#95fbfb" >
                </td>
            </tr>
            <tr>
                <td bgcolor="#ffff96" style="width: 102px">
                    Table</td>
                <td bgcolor="#95fbfb" style="width: 277px">
                    <asp:Table ID="Table1" runat="server" />
                </td>
                <td bgcolor="#95fbfb">
                </td>
            </tr>
            <tr>
                <td bgcolor="#ffff96" style="width: 102px">
                    TextBox
                </td>
                <td bgcolor="#95fbfb" style="width: 277px">
                    <asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
                </td>
                <td bgcolor="#95fbfb" >
                    TextChanged
                </td>
            </tr>
            <tr>
                <td bgcolor="#ffff96" style="width: 102px">
                    XML
                </td>
                <td bgcolor="#95fbfb" style="width: 277px">
                    <asp:Xml ID="Xml1" runat="server"></asp:Xml>
                </td>
                <td bgcolor="#95fbfb">
                </td>
            </tr>
        </table>
    </form>
    <hr>
    <p align="center">
        <asp:HyperLink ID="HyperLink2" runat="server" 
                       NavigateUrl="Page3.aspx">Назад</asp:HyperLink>
        <asp:HyperLink ID="HyperLink3" runat="server" 
                       NavigateUrl="Page5.aspx">Вперед</asp:HyperLink></p>
</body>
</html>

Этап программирования

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

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.htmlControls;
using System.Drawing;
    
public partial class Page4 : System.Web.UI.Page
{
    private string message;
    
    protected void Page_Load(object sender, EventArgs e)
    {
        Button1.Text = "Пошлите запрос";
        Button1.ToolTip = "Щелкните здесь";
    
        Button2.Text = "Пошлите команду";
        Button2.ToolTip = "Щелкните здесь";
        Button2.CommandName = "Go";
        Button2.CommandArgument = "Now";
    
        CheckBox1.Text = "Элемент CheckBox";
        CheckBox1.TextAlign = TextAlign.Left;
        CheckBox1.ToolTip = "Это флажок";
        CheckBox1.Font.Bold = true;
        CheckBox1.Font.Size = FontUnit.Larger;
        CheckBox1.AutoPostBack = true;
    
        RadioButton1.Text = "Радиокнопка 1";
        RadioButton1.ToolTip = "Это радиокнопка1";
        RadioButton1.Style.Add("color", "red");
        RadioButton1.AutoPostBack = true;
    
        RadioButton2.Text = "Радиокнопка 2";
        RadioButton2.ToolTip = "Это радиокнопка2";
        RadioButton2.Style.Add("color", "blue");
        RadioButton2.AutoPostBack = true;
    
        HyperLink1.NavigateUrl = "Resources/Thanks.htm";
        HyperLink1.Text = "Приветствие!!!";
        HyperLink1.Attributes.Add("OnClick"
            , @"javascript:alert('Сейчас будет приветствие\nв новом окне!');");
        // Должно быть что-то непустое, тогда будет создано новое окно
        HyperLink1.Target = "_blank";
    
        Image1.ImageUrl = "Resources/pict1.gif"; 
        Image1.AlternateText = "Добыча знаний по ASP.NET";
        Image1.Enabled = true;
        Image1.Font.Italic = true;
        Image1.ImageAlign = ImageAlign.AbsMiddle;
    
        ImageButton1.ImageUrl = "Resources/pict2.gif";
        ImageButton1.AlternateText = "Это рисунок-кнопка";
        ImageButton1.Enabled = true;
        ImageButton1.Font.Italic = true;
        ImageButton1.ImageAlign = ImageAlign.AbsMiddle;
    
        Label1.Text = "Это элемент Label текстовой метки ";
    
        LinkButton1.Text = "Это элемент LinkButton";
        LinkButton1.CausesValidation = false;
        LinkButton1.ToolTip = "Это LinkButton";
    
        Literal1.Text = "<b>Пусть это некоторый код</b>";
    
        Panel1.BackImageUrl = "Resources/grid_background.gif";
        Panel1.HorizontalAlign = HorizontalAlign.Center;
        Panel1.Wrap = true;  // Значение по умолчанию
        Panel1.Width = Unit.Pixel(150); // Заворот строк
        Panel1.Controls.Add(new LiteralControl(
            "<font color=\"white\">Это литерал на панели</font>"));
        Panel1.Controls.Add(new TextBox());
        Panel1.Controls.Add(new Button());
    
        // Динамическое создание элементов таблицы
        Table1.CellPadding = 10;
        Table1.CellSpacing = 10;
        Table1.BackColor = Color.Red;
        TableRow TableRow1 = new TableRow();    // Создали
        Table1.Controls.Add(TableRow1);         // Добавили в коллекцию родителя
        TableRow1.Height = 20;                  // Настроили
        TableCell TableCell1 = new TableCell(); // Создали
        TableRow1.Controls.Add(TableCell1);     // Добавили в коллекцию родителя
        TableCell1.BackColor = Color.White;     // Настроили...
        TableCell1.BorderColor = Color.Blue;
        TableCell1.BorderWidth = 5;
        TableCell1.BorderStyle = BorderStyle.Dashed;
        TableCell1.Text = "Содержание TableCell";
    
        TextBox1.Text = "Содержание TextBox";
        TextBox1.Rows = 3;
        TextBox1.Columns = 40;
        TextBox1.ReadOnly = false;
        TextBox1.TextMode = TextBoxMode.MultiLine;
    
        System.Xml.XmlDocument xmlDoc = new System.Xml.XmlDocument();
        xmlDoc.InnerXml = "<foo>Это конструкция XML</foo>";
        Xml1.Document = xmlDoc;
    }
    
    protected void Button1_Click(object sender, EventArgs e)
    {
        printResult("Нажата кнопка");
    }
    
    protected void Button2_Command(object sender, CommandEventArgs e)
    {
        message = "Послана команда.";
        message += "<br>Имя команды Go, параметр ("
            + e.CommandArgument + ")";
        printResult(message);
    }
    
    protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
    {
        message = "Элемент CheckBox находится в состоянии ";
        if (CheckBox1.Checked)
            message += "\"ВКЛЮЧЕНО\"";
        else
            message += "\"ВЫКЛЮЧЕНО\"";
        printResult(message);
    }
    
    protected void RadioButton1_CheckedChanged(object sender, EventArgs e)
    {
        message = "Левая радиокнопка в состоянии ";
        if (RadioButton1.Checked)
            message += "\"ВКЛЮЧЕНО\"";
        else
            message += "\"ВЫКЛЮЧЕНО\"";
    
        message += "<br>Правая радиокнопка в состоянии ";
        if (RadioButton2.Checked)
            message += "\"ВКЛЮЧЕНО\"";
        else
            message += "\"ВЫКЛЮЧЕНО\"";
        printResult(message);
    }
    
    protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
    {
        printResult("Нажата кнопка ImageButton");
    }
    
    protected void LinkButton1_Click(object sender, EventArgs e)
    {
        printResult("Нажата кнопка LinkButton");
    }
    
    protected void TextBox1_TextChanged(object sender, EventArgs e)
    {
        printResult("Текстовое поле ввода TextBox изменилось");
    }
    
    protected void printResult(string message)
    {
        Response.Write("<font color=red><h1 align=center>");
        Response.Write(message);
        Response.Write("</font></h1>");
    }
}

Постройте страницу и проверьте ее работоспособность

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

Упражнение 5. Привязка данных к Web-элементам управления

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

Привязка данных (data binding) - процесс связывания свойства элемента управления (отображения) со свойством другого объекта (источника данных), при котором изменения в элементе управления отражаются в источнике данных и наоборот. Привязка данных всегда выполняется между свойствами двух объектов.

Этап проектирования

Создайте новую страницу с отделенным кодом и именем Page5.aspx, сделайте ее стартовой

Разместите на странице таблицу для позиционирования элементов и поместите в нее элементы управления RadioButtonList и DropDownList из вкладки Standard панели Toolbox, как показано ниже

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

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="Page5.aspx.cs" Inherits="Page5" %>
    
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <h1 align="center">
            Привязка данных к Web-элементам управления 
            через промежуточный источник данных</h1>
        <p align="center">
            Выберите любой элемент</p>
        <table align="center" border="1" width="100%">
            <tr>
                <td valign="top">
                    <asp:RadioButtonList ID="RadioButtonList1" 
                                         runat="server" AutoPostBack="True">
                    </asp:RadioButtonList>
                </td>
                <td valign="top">
                    <asp:DropDownList ID="DropDownList1" 
                                      runat="server" AutoPostBack="True">
                    </asp:DropDownList>
                </td>
            </tr>
        </table>
    </form>
    <hr>
    <center>
        <a href="Page4.aspx">Назад</a> 
            nbsp;nbsp;nbsp;nbsp;nbsp; 
        <a href="Page6.aspx">Вперед</a>
    </center>
</body>
</html>

Этап программирования

Как видно из кода интерфейсной части, мы на этапе проектирования практически не присвоили никаких значений свойствам элементов управления, кроме свойства AutoPostBack. Это свойство задает режим автоматической отправки формы на сервер при любом изменении состояния своего элемента управления. Все настройки списков, их инициализацию и обработчики событий определим в файле Page5.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 Page5 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (this.IsPostBack) return;// Инициализация только раз
    
        ArrayList Cities = new ArrayList(); // Создать промежуточный источник
        Cities.Add("Красноярск");           // Добавить...
        Cities.Add("Ачинск");
        Cities.Add("Пермь");
        Cities.Add("Минусинск");
        Cities.Add("Барнаул");
        Cities.Add("Новосибирск");
        Cities.Add("Омск");
        Cities.Add("Иркутск");
        Cities.Add("Чита");
    
        DropDownList1.DataSource = Cities;  // Связать список с источником
        DropDownList1.DataBind();           // Загрузить список
    
        RadioButtonList1.DataSource = Cities;// Связать список с источником
        RadioButtonList1.DataBind();         // Загрузить список
    
        // Установить начальные позиции списков
        DropDownList1.SelectedIndex = 0;
        RadioButtonList1.SelectedIndex = DropDownList1.SelectedIndex;
    }
    
    protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        DropDownList1.SelectedIndex = RadioButtonList1.SelectedIndex;
    }
    
    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        RadioButtonList1.SelectedIndex = DropDownList1.SelectedIndex;
    }
}

Постройте страницу и убедитесь в ее функциональности

Упражнение 6. Обмен списков данными

Этап проектирования

Создайте новую страницу с отделенным кодом и именем Page6.aspx, сделайте ее текущей

Разместите на странице таблицу для позиционирования элементов и поместите в нее два списка ListBox и две кнопки Button из вкладки Standard панели Toolbox, как показано ниже

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

<%@ Page Language="C#" AutoEventWireup="true" 
         CodeFile="Page6.aspx.cs" Inherits="Page6" %>
    
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server" method="post">
        <h1 align="center">
            Обмен элементами в двух списках
        </h1>
        <p align="center">
            Выделите элементы в одном списке и перешлите в другой, используя кнопки
        </p>
        <table align="center" border="1" width="100%">
            <tr>
                <td align="center">
                    <asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple" 
                                 Width="100%"></asp:ListBox>
                </td>
                <td style="width: 91px">
                    <p align="center">
                        <asp:Button ID="Button1" runat="server" Font-Bold="True" 
                                    Font-Size="Large" Text="->" />
                        <br>
                        <asp:Button ID="Button2" runat="server" Font-Bold="True" 
                                    Font-Size="Large" Text="<-" />
                    </p>
                </td>
                <td align="center">
                    <asp:ListBox ID="ListBox2" runat="server" SelectionMode="Multiple" 
                                 Width="100%"></asp:ListBox>
                </td>
            </tr>
        </table>
    </form>
    <hr>
    <center>
        <a href="Page5.aspx">Назад</a> 
        nbsp;nbsp;nbsp;nbsp;nbsp;
        <a href="Page7.aspx">Вперед</a>
    </center>
</body>
</html>

Этап программирования

Создайте обработчики для каждой кнопки и заполните их так, как показано ниже

protected void Page_Load(object sender, EventArgs e)
    {
        if (this.IsPostBack) return;// Только для инициализации
    
        ArrayList tmp = new ArrayList();// Создать промежуточный источник
        tmp.Add("Красноярск"); // Наполнить источник
        tmp.Add("Ачинск");
        tmp.Add("Пермь");
        tmp.Add("Минусинск");
        tmp.Add("Барнаул");
        tmp.Add("Новосибирск");
        tmp.Add("Омск");
        tmp.Add("Иркутск");
        tmp.Add("Чита");
        ListBox1.DataSource = tmp;// Связать
        ListBox1.DataBind(); // Загрузить
        ListBox1.Rows = ListBox2.Rows = 6; // Высота списков в строках
    }
    
    protected void Button1_Click(object sender, EventArgs e)
    {
        // Создаем коллекцию для временного хранения строк списка
        ListItemCollection tmp = new ListItemCollection();
        // Перебираем левый список и ищем выделенное
        foreach (ListItem s in ListBox1.Items)
        {
            if (s.Selected)
                tmp.Add(s);
        }
    
        // Слева уничтожаем, справа добавляем то, что нашли выделенное
        foreach (ListItem s in tmp)
        {
            ListBox1.Items.Remove(s);
            ListBox2.Items.Add(s);
        }
    }
    
    protected void Button2_Click(object sender, EventArgs e)
    {
        // Создаем коллекцию для временного хранения строк списка
        ListItemCollection tmp = new ListItemCollection();
        // Перебираем правый список и ищем выделенное
        foreach (ListItem s in ListBox2.Items)
        {
            if (s.Selected)
                tmp.Add(s);
        }
    
        // Справа уничтожаем, слева добавляем то, что нашли выделенное
        foreach (ListItem s in tmp)
        {
            ListBox2.Items.Remove(s);
            ListBox1.Items.Add(s);
        }
    }

Постройте приложение и убедитесь в его работоспособности

Упражнение 7. Привязка Web-элементов управления к базе данных

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

Этап проектирования

Создайте новую страницу с отделенным кодом и именем Page7.aspx и сделайте ее текущей

Разместите на странице таблицу для позиционирования элементов и поместите в нее список DropDownList и текстовую метку Label из вкладки Standard панели Toolbox, как показано ниже

Интерфейсная часть страницы определяется кодом

<%@ Page Language="C#" AutoEventWireup="true" 
         CodeFile="Page7.aspx.cs" Inherits="Page7" %>
    
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server" method="post">
        <h1 align="center">
            Соединение раскрывающегося списка с базой данных Northwind
        </h1>
        <p align="center">
            Выделите элемент в списке и получите дополнительные сведения
        </p>
        <table align="center" border="1" width="100%">
            <tr>
                <td align="center" style="width: 474px">
                    <asp:DropDownList ID="ProductsList" runat="server" 
                                      AutoPostBack="True" Width="100%">
                    </asp:DropDownList>
                </td>
                <td align="right" style="width: 400px">
                    <p align="right">
                        Запасы выделенного товара:
                    </p>
                </td>
                <td align="left" style="width: 287px">
                    <asp:Label ID="ProductSelection" runat="server" Font-Bold="True">
                    </asp:Label>
                </td>
            </tr>
        </table>
    </form>
    <hr>
    <center>
        <a href="Page6.aspx">Назад</a> 
            nbsp;nbsp;nbsp;nbsp;nbsp;
        <a href="Page8.aspx">Вперед</a>
    </center>
</body>
</html>

Этап программирования

Создайте обработчик события SelectedIndexChanged для элемента управления "раскрывающийся список", перейдите в файл Page7.aspx.cs и откорректируйте его так

using System;
using System.Data;
using System.Web.UI.WebControls;
    
public partial class Page7 : System.Web.UI.Page
{
    // Объявляем ссылку на поставщика данных
    protected System.Data.SqlClient.SqlDataAdapter DSAdapter;
    
    // Объявляем ссылку на набор данных 
    protected System.Data.DataSet ProductsData;
    
    // Создаем SQL-команду для выборки данных поставщиком
    protected System.String cmd = "SELECT ProductID, ProductName FROM Products";
     
    protected void Page_Load(object sender, EventArgs e)
    {
        if (this.IsPostBack) return;// Только для инициализации
    
        // Создали поставщик данных с нужными настройками
        DSAdapter = new System.Data.SqlClient.SqlDataAdapter(
            cmd, "server=localhost; uid=sa; pwd=; database=Northwind");
    
        // Создали набор данных
        ProductsData = new DataSet();
    
        // Заполнили набор данными из поставщика
        DSAdapter.Fill(ProductsData, "Products");
    
        // Подсоединяем список к набору данных как источнику данных
        ProductsList.DataSource = ProductsData.Tables["Products"].DefaultView;
    
        // Указываем, из какой колонки брать видимые тексты элементов списка
        ProductsList.DataTextField = "ProductName";
    
        // Указываем, из какой колонки брать невидимые значения элементов списка
        ProductsList.DataValueField = "ProductID";
    
        // Заполняем список из присоединенного источника данных ProductsData
        ProductsList.DataBind();
    
        // Выводим в текстовую метку выделенное значение
        ProductSelection.Text = ProductsList.SelectedItem.Value;
    }
    
    protected void ProductsList_SelectedIndexChanged(object sender, EventArgs e)
    {
        // Выводим в текстовую метку выделенное значение
        ProductSelection.Text = ProductsList.SelectedItem.Value;
    }
}

Разберитесь в коде, постройте приложение и проверьте его работу

Для программного подключения к базе необходим запущенный SQL-сервер.

Упражнение 8. Web-элемент AdRotator для управления рекламными баннерами

Элемент AdRotator (Advertisement - рекламные объявления, Rotator - вращатель) предназначен для управления на странице появлением рисунков с рекламными объявлениями - баннеров. При каждом новом обращении к серверу этот элемент меняет закрепленный за ним рисунок на иной случайным образом с вероятностью, установленной в связанном с элементом конфигурационном файле XML. В таблице приведены свойства и события элемента AdRotator

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

Этап проектирования

Добавьте к проекту в каталог Resources из прилагаемого каталога Source рисунки с баннерами книжного магазина

Создайте новую страницу Page8.aspx с отделенным кодом и сделайте ее стартовой

Поместите на страницу элемент управления AdRotator из вкладки Standard панели Toolbox и текстовую метку Label

Добавьте к странице ссылки на соседние страницы

Скомпонуйте интерфейсную часть страницы в соответствии с рисунком

Назначьте для объекта AdRotator значения свойств: ID=BooksRotator, AdvertisementFile=books.xml, а для текстовой метки ID=AdCaption

После выполнения указанных действий код интерфейсной части страницы Page8.aspx должен стать таким

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="Page8.aspx.cs" Inherits="Page8" %>
    
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server" method="post">
        <h1 align="center">
            Испытание элемента AdRotator
        </h1>
        <p align="center">
            Обновляйте страницу и считайте частоту смены баннеров
        </p>
        <table align="center" border="1" width="100%">
            <tr>
                <td align="center">
                    <asp:AdRotator ID="BooksRotator" runat="server" 
                                   AdvertisementFile="books.xml" />
                    <br>
                    <asp:Label ID="AdCaption" runat="server">Label</asp:Label>
                </td>
            </tr>
        </table>
    </form>
    <hr>
    <center>
        <a href="Page7.aspx">Назад</a> 
        nbsp;nbsp;nbsp;nbsp;nbsp;
        <a href="Page9.aspx">Вперед</a>
    </center>
</body>
</html>

Через главное меню оболочки Website/Add New Item добавьте к проекту новый пустой XML-файл с именем books.xml

Наполните файл books.xml следующим XML-кодом

<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
	<Ad>
		<ImageUrl>Resources/04_29.jpg </ImageUrl>
		<NavigateUrl>Details.htm#04_29.jpg </NavigateUrl>
		<AlternateText>Баннер для программирования Active Server Pages 3.0</AlternateText>
		<Keyword>web</Keyword>
		<Impressions>50</Impressions>
		<PercentOff>10</PercentOff>
		<Caption>Книги по технологии программирования 04_29.jpg.0</Caption>
	</Ad>
	<Ad>
		<ImageUrl>Resources/04_30.jpg </ImageUrl>
		<NavigateUrl>Details.htm#html</NavigateUrl>
		<AlternateText>Баннер для программирования html</AlternateText>
		<Keyword>web</Keyword>
		<Impressions>50</Impressions>
		<PercentOff>20</PercentOff>
		<Caption>Книги по использованию языка html</Caption>
	</Ad>
	<Ad>
		<ImageUrl>Resources/04_32.jpg</ImageUrl>
		<NavigateUrl>Details.htm#linuxprogramming</NavigateUrl>
		<AlternateText>Баннер для программирования Linux</AlternateText>
		<Keyword>Linux</Keyword>
		<Impressions>50</Impressions>
		<PercentOff>15</PercentOff>
		<Caption>Книги по программированию Linux</Caption>
	</Ad>
	<Ad>
		<ImageUrl>Resources/04_33.jpg</ImageUrl>
		<NavigateUrl>Details.htm#linuxsocket</NavigateUrl>
		<AlternateText>Баннер для программирования Linux Socket</AlternateText>
		<Keyword>Linux</Keyword>
		<Impressions>50</Impressions>
		<PercentOff>50</PercentOff>
		<Caption>Книги по сокетам Linux</Caption>
	</Ad>
	<Ad>
		<ImageUrl>Resources/04_31.jpg</ImageUrl>
		<NavigateUrl>Details.htm#java2</NavigateUrl>
		<AlternateText>Баннер для программирования Java 2</AlternateText>
		<Keyword>web</Keyword>
		<Impressions>50</Impressions>
		<PercentOff>50</PercentOff>
		<Caption>Книги по программированию на java2</Caption>
	</Ad>
	<Ad>
		<ImageUrl>Resources/04_34.jpg</ImageUrl>
		<NavigateUrl>Details.htm#xml</NavigateUrl>
		<AlternateText>Баннер для программирования XML</AlternateText>
		<Keyword>web</Keyword>
		<Impressions>50</Impressions>
		<PercentOff>15</PercentOff>
		<Caption>Книги по технологии на основе XML</Caption>
	</Ad>
</Advertisements>

Через главное меню оболочки Website/Add New Item добавьте к проекту новый html-файл с именем Details.htm

Наполните файл Details.htm следующим кодом

<html>
<head>
    <title>Каталог книг</title>
    <meta content="text/html; charset=windows-1251" 
          http-equiv="Content-Type" />
</head>
<body>
    <h1>
        <font color="#FF0000">Каталог книг </font>
    </h1>
    <h2>
        <a name="04_29.jpg" ></a>
        <font color="#0000FF">Это книги по 04_29.jpg </font></h2>
    <p>
        <img alt="" src="Resources/04_29.jpg"></p>
    <h2>
        <a name="html"></a>
        <font color="#0000FF">Это книги по html</font></h2>
    <p>
        <img alt="" src="Resources/04_30.jpg" ></p>
    <h2>
        <a name="linuxprogramming"></a>
        <font color="#0000FF">Это книги по linuxprogramming</font></h2>
    <p>
        <img alt="" src="Resources/04_32.jpg"></p>
    <h2>
        <a name="linuxsocket"></a>
        <font color="#0000FF">Это книги по linuxsocket</font></h2>
    <p>
        <img alt="" src="Resources/04_33.jpg"></p>
    <h2>
        <a name="java2"></a>
        <font color="#0000FF">Это книги по java2</font></h2>
    <p>
        <img alt="" src="Resources/04_31.jpg"></p>
    <h2>
        <a name="xml"></a>
        <font color="#0000FF">Это книги по xml</font></h2>
    <p>
        <img alt="" src="Resources/04_34.jpg"></p>
</body>
</html>

Установите для AdRotator свойство KeywordFilter=web, тем самым мы установим тематику выборки рисунков, помеченную свойством Keyword=web в конфигурационном XML-файле. Только баннеры тематики web будут появляться в элементе AdRotator

Установите свойство Target=_blank элемента AdRotator, чтобы при щелчке пользователем по баннеру файл Details.htm загружался в отдельном окне броузера

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

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

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

Усовершенствование настройки элемента AdRotator

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

Добавьте в каждый блок описания баннера в файле books.xml элемент <Caption> Некоторый текст </Caption>, где текст возьмите из таблицы ниже

Можно вставить, например, после элемента <PercentOff> </PercentOff> в конце каждого блока. У нас 6 баннеров, значит в конфигурационном файле 6 блоков и пусть дополнения выглядят так

Вызовите контекстное меню на поле редактирования файла books.xml и выполните команду View Data Grid, чтобы увидеть представление конфигурационного XML-файла в табличной форме

Выделите элемент AdRotator и через панель Properties создайте обработчик события AdCreated, который заполните следующим кодом

protected void BooksRotator_AdCreated(object sender, AdCreatedEventArgs e)
    {
        AdCaption.Text = "<b>"
            + "Это рекламный баннер:<br>"
            + e.AdProperties["Caption"]
            + "<br>со скидкой "
            + e.AdProperties["PercentOff"]
            + " %."
            + "</b>";
    }

В теле обработчика мы использовали свойство AdProperties класса AdCreatedEventArgs, экземпляр которого передается через заголовок обработчика. Это свойство является ассоциативным массивом, содержащим все свойства данного баннера, извлеченные из конфигурационного файла. Мы копируем в текстовую метку значения элементов <Caption> и <PercentOff> для текущего баннера, выбранного элементом AdRotator в конфигурационном файле.

Постройте страницу и проверьте введенную функциональность

Экран должен быть примерно таким

Упражнение 9. Web-элемент управления Calendar

Создадим новую страницу, на которой познакомимся с элементом управления Calendar вкладки Standard панели Toolbox.

Добавьте в проект новую страницу с именем Page9.aspx, поместите на нее таблицу, кнопку, тег заголовка и элемент управления Calendar с именем Cal. Сделайте страницу стартовой

Source-код страницы должен быть примерно таким

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="Page9.aspx.cs" Inherits="Page9" %>
    
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <h1 align="center">
            Испытание элемента Calendar</h1>
        <p align="center">
            Выберите режим и щелкните по кнопке</p>
        <table align="center" border="1" width="100%">
            <tr>
                <td align="center">
                    <asp:Calendar ID="Cal" runat="server" Width="172px" />
                    <asp:Button ID="Button1" runat="server" 
                                Text="Восстановить текущую дату" />
                </td>
                <td align="center">
                    <h1 id="result" runat="server" style="color: Red">
                        Результат
                    </h1>
                </td>
            </tr>
        </table>
    </form>
    <hr>
    <center>
        <a href="Page8.aspx">Назад</a> 
            nbsp;nbsp;nbsp;nbsp;nbsp;
        <a href="Page1.aspx">В начало</a>
    </center>
</body>
</html>

Внешне страница должна выглядеть так

Элемент Calendar имеет ряд свойств и событий, представленных в таблице

Создайте обработчики для кнопки и календаря и заполните их кодом, приведенным ниже

protected void Cal_SelectionChanged(object sender, EventArgs e)
    {
        result.InnerText = "Установлена дата "
            + Cal.SelectedDate.ToShortDateString();
    }
    
    protected void Button1_Click(object sender, EventArgs e)
    {
        Cal.SelectedDate = Convert.ToDateTime(DateTime.Now);
        result.InnerText = "Сегодня "
            + Cal.SelectedDate.ToShortDateString();
    }

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

После настройки календари должны выглядеть так