Управление состоянием страниц на клиенте
Упражнение 1. Программирование словаря ViewState страницы
В этом упражнении будем использовать программирование словаря ViewState самой страницы. Мы создадим форму с интерфейсными элементами, в которых отключим автоматическое сохранение состояния вида, а будем его сохранять и восстанавливать вручную.
Интерфейсные элементы TextBox мы позиционируем в серверной таблице и они будут размещены в коллекции Page.Controls. Мы будем использовать рекурсивную логику для опроса всех дочерних элементов таблицы, чтобы выявить объекты TextBox. В качестве ключа для доступа к элементам словаря ViewState уровня страницы будем использовать идентификаторы объектов типа TextBox, а сохранять будем значение свойства Text.
- Добавьте к проекту новую Web-страницу с отделенным кодом и именем ViewStateTest.aspx, назначьте ее стартовой
- Запустите командой Website/ASP.NET Configuration страницу WAT (Web Site Administration Tool) и выполните команду Application Configuration/Configure debugging and tracing
- На появившейся странице включите флажок Enable debugging и закройте WAT
Таким действием мы создали файл конфигурации Web.config с настройкой отладки.
- В панели Solution Explorer щелкните на кнопке Refresh, чтобы увидеть файл конфигурации в составе проекта
- Откройте интерфейсную часть страницы ViewStateTest.aspx в режиме Source и вставьте внутрь дескрипторного блока < div></div> следующий заголовок
<h1 style="color: Red">Заполните анкету</h1>
- Добавьте в открывающую часть парного дескриптора <div> внутренний стиль
<div style="text-align: center">
- Откройте интерфейсную часть страницы ViewStateTest.aspx в режиме Design и поместите на нее элемент Table из вкладки HTML панели Toolbox
- Щелкните на элементе Table правой кнопкой мыши и выполните опцию Run As Server Control, чтобы превратить его в серверный
- Откорректируйте интерфейсный HTML-код заготовки таблицы следующим образом
<table id="Table1" runat="server" style="text-align: left; width: 500px;"> <tr> <td style="width: 200px"> </td> <td> </td> </tr> <tr> <td style="width: 200px"> </td> <td> </td> </tr> <tr> <td style="width: 200px"> </td> <td> </td> </tr> <tr> <td style="width: 200px"> </td> <td> </td> </tr> <tr> <td style="width: 200px"> </td> <td> </td> </tr> <tr> <td style="width: 200px"> </td> <td> </td> </tr> </table>Листинг 35.2. Интерфейсный код таблицы Table1
Созданная таблица имеет 6 строк и 2 столбца.
- Поместите после таблицы три кнопки Button из вкладки Standard панели Toolbox и присвойте им имена cmdSubmit, cmdSave и cmdRestore соответственно
- Поместите в первую строку и первый столбец таблицы приведенный ниже текст, а в остальные ячейки второго столбца - элемент TextBox из вкладки Standard панели Toolbox
После этих действий интерфейс страницы в режиме проектирования будет таким
Его обеспечивает следующий код разметки страницы
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ViewStateTest.aspx.cs" Inherits="ViewStateTest" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div style="text-align: center"> <h1 style="color: Red">Заполните анкету</h1> <table id="Table1" runat="server" style="text-align: left; width: 500px;"> <tr> <td style="width: 200px"> <b>Наименование</b></td> <td> <b>Значение</b></td> </tr> <tr> <td style="width: 200px"> Имя:</td> <td> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td> </tr> <tr> <td style="width: 200px"> Учетный номер:</td> <td> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td> </tr> <tr> <td style="width: 200px"> Возраст:</td> <td> <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox></td> </tr> <tr> <td style="width: 200px"> E-mail:</td> <td> <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox></td> </tr> <tr> <td style="width: 200px"> Пароль:</td> <td> <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox></td> </tr> </table> <br /> <asp:Button ID="cmdSubmit" runat="server" Text="Отправить" /> <asp:Button ID="cmdSave" runat="server" Text="Сохранить" /> <asp:Button ID="cmdRestore" runat="server" Text="Восстановить" /> </div> </form> </body> </html>Листинг 35.3. Код интерфейсной части страницы ViewStateTest.aspx
- Двойным щелчком на каждой из двух последних кнопок cmdSave и cmdRestore в интерфейсной части страницы создайте для них заготовки обработчиков с именами по умолчанию
- Откройте застраничный файл и заполните его следующим кодом
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 ViewStateTest : System.Web.UI.Page { protected void cmdSave_Click(object sender, EventArgs e) { // Сохраняем присланные значения текстовых полей SaveAllText(Table1.Controls); } private void SaveAllText(ControlCollection controls) { // Перебираем все дочерние элементы в переданной коллекции таблицы foreach (Control control in controls) { // Выбираем элементы текстовых полей и сохраняем // их содержимое в свойстве ViewState объекта страницы, // используя в качестве ключа идентификатор элемента if (control is TextBox) { this.ViewState[control.ID] = ((TextBox)control).Text; } // На верхних уровнях объекта Table1 дочерними элементами // являются строки и ячейки таблицы, поэтому продолжаем // рекурсивно спускаться ниже, пока не встретим объекты TextBox if (control.Controls != null) { SaveAllText(control.Controls); } } } protected void cmdRestore_Click(object sender, EventArgs e) { // Извлекаем пришедший с обратной отсылкой сохраненный текст предыдущей // обратной отсылки и вставляем его в текстовые поля, готовя новый отклик RestoreAllText(Table1.Controls); } void RestoreAllText(ControlCollection controls) { // Перебираем все элементы таблицы, включая вложенные, чтобы // использовать их идентификаторы как ключи для извлечения // возможно сохраненных значений из словаря ViewState foreach (Control control in controls) { // Нашли текстовое поле if (control is TextBox) { // Убеждаемся, что есть в словаре if (this.ViewState[control.ID] != null) { // Приводим типы и восстанавливаем ((TextBox)control).Text = (string)this.ViewState[control.ID]; } } // Рекурсивно спускаемся ниже к дочерним элементам if (control.Controls != null) { RestoreAllText(control.Controls); } } } }Листинг 35.4. Содержимое файла ViewStateTest.aspx.cs