Опубликован: 13.07.2010 | Доступ: свободный | Студентов: 891 / 20 | Оценка: 4.40 / 4.20 | Длительность: 77:34:00
Самостоятельная работа 35:

Управление состоянием страниц на клиенте

Упражнение 1. Программирование словаря ViewState страницы

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

Интерфейсные элементы TextBox мы позиционируем в серверной таблице и они будут размещены в коллекции Page.Controls. Мы будем использовать рекурсивную логику для опроса всех дочерних элементов таблицы, чтобы выявить объекты TextBox. В качестве ключа для доступа к элементам словаря ViewState уровня страницы будем использовать идентификаторы объектов типа TextBox, а сохранять будем значение свойства Text.

  • Создайте пустой проект с именем ViewState командой File/New/Web Site

  • Добавьте к проекту новую 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="Отправить" />
        &nbsp;&nbsp;&nbsp; &nbsp;
        <asp:Button ID="cmdSave" runat="server" Text="Сохранить" />
        &nbsp;&nbsp;&nbsp; &nbsp;
        <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
  • Испытайте работу страницы и убедитесь, что в любое время можно восстановить состояние элементов управления, сохраненное ранее в словаре ViewState страницы