Исправление недостатков в поддержке механизма закладок и кнопок Назад/Вперед с помощью элементов управления из пакета ASP.NET AJAX Futures

Начиная с мая 2007 года в состав пакета ASP.NET AJAX Futures CTP входит элемент управления, позволяющий устранить недостатки в поддержке механизма закладок и кнопок Назад/Вперед. Этот элемент управления очень похож на тот, что рассматривался в этой главе ранее, но его прикладной интерфейс несколько отличается. Поскольку содержимое пакета Futures постоянно изменяется, в этой главе рассматриваются оба элемента управления.

Между элементом управления UpdateHistory и соответствующим ему элементом управления из пакета Futures существует несколько отличий:
• Имя элемента управления изменилось на History.
• Запись информации о текущем состоянии страницы в объект History производится с помощью метода AddHistoryPoint(). Этот метод принимает два аргумента – ключ и значение, так как каждая запись в журнале – это объект Dictionary.
• Получить доступ к информации о текущем состоянии можно с помощью свойства State объекта HistoryEventArgs. Как только что упоминалось – это объект Dictionary.

В примере 20.2 приводится измененный код страницы, которая на этот раз вместо элемента управления Котхари использует элемент управления из пакета Futures. Обратите внимание: здесь в качестве ключа к информации о состоянии используется значение "myHistory".


Данное название было выбрано совершенно произвольно – требуется лишь использовать одно и то же значение при чтении и записи данных.

Пример 20.2. Исправление недостатков в поддержке механизма закладок и кнопок Назад/Вперед средствами пакета Futures
BookmarksUpdatePanel.aspx
<%@ Page Language="C#" %>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1?transitional.dtd">
ASP.NET AJAX

(body)
(asp:ScriptManager ID="ScriptManager1" runat="server" /)
(asp:History ID="History1" runat="server" OnNavigate="historyNavigate" /)
(asp:UpdatePanel ID="UpdatePanel1" runat="server"
UpdateMode="Conditional")

(asp:Wizard ID="Wizard1" runat="server"
OnActiveStepChanged="stepChanged")

(asp:WizardStep runat="server" Title="Step 1")

Ready ...


(/asp:WizardStep)
(asp:WizardStep runat="server" Title="Step 2")

Set ...


(/asp:WizardStep)
(asp:WizardStep runat="server" Title="Step 3")

Go!


(/asp:WizardStep)

(/asp:Wizard)

(/asp:UpdatePanel)

(/body)


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


Благодаря этому вам даже не потребуется добавлять элемент управления UpdatePanel. Если управление информацией о состоянии производится с помощью JavaScript, можно будет использовать JavaScript-интерфейс элемента управления History для записи информации о состоянии (которая, в свою очередь, будет добавлена в хеш URL). Кроме того, данный элемент управления автоматически вызывает функцию pageNavigate(). С ее помощью можно привести состояние страницы в соответствие с данными, полученными из элемента управления History.

Для следующего примера мы попробуем самостоятельно реализовать клиентскую версию (пусть и ограниченную) элемента управления ASP.NET 2.0 Wizard. Три шага мастера моделируются тремя строками HTML-таблицы, которые изначально невидимы:
style="height: 100%; width: 100%; border?collapse: collapse;">


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


На этот раз ссылки будут иметь реализацию на JavaScript:
border="0" style="border?collapse: collapse;">


(a id="Wizard1_SideBarContainer_SideBarList_ctl00_SideBarButton"
href="javascript:gotoStepClick(1)")
Step 1(/a)
(a id="Wizard1_SideBarContainer_SideBarList_ctl01_SideBarButton"
href="javascript:gotoStepClick(2)")
Step 2(/a)
(a id="Wizard1_SideBarContainer_SideBarList_ctl02_SideBarButton"
href="javascript:gotoStepClick(3)")
Step 3(/a)>


Функция gotoStepClick() сначала добавляет новую запись в журнал посещений. Метод на JavaScript, соответствующий методу addHistoryPoint() серверного элемента управления History, выглядит следующим образом:
function gotoStepClick(nr) {
Sys.Application.get_history().addHistoryPoint({myHistory: nr});
Затем gotoStepClick() вызывает еще одну вспомогательную функцию
gotoStep():
gotoStep(nr);
}

Функция gotoStep() отвечает за корректное отображение текущего шага мастера (и сокрытие остальных). Кроме того, текст ссылки, соответствующей текущему шагу, выводится жирным шрифтом:
function gotoStep(nr) {
if (nr >= 1 && nr <= 3) {
$get("Wizard1_Step1").style.display = "none";
$get("Wizard1_Step2").style.display = "none";
$get("Wizard1_Step3").style.display = "none";
$get("Wizard1_SideBar1").style.fontWeight = "normal";
$get("Wizard1_SideBar2").style.fontWeight = "normal";
$get("Wizard1_SideBar3").style.fontWeight = "normal";
$get("Wizard1_Step" + nr).style.display = "";
$get("Wizard1_SideBar" + nr).style.fontWeight = "bold";
}
}

Заключительный фрагмент этого примера выполняет восстановление состояния страницы, когда пользователь щелкает на кнопке броузера Вперед или Назад. Как уже упоминалось ранее, сделать это можно с помощью JavaScript?функции pageNavigate(). Второй аргумент, который передается функции автоматически, содержит все переменные с информацией о состоянии. Значения этих переменных извлекаются с помощью метода get_state(). Поскольку ранее, при добавлении записи в журнал посещений, использовался ключ myHistory, для извлечения конкретной информации о состоянии, сохраненной ранее, необходимо использовать конструкцию get_state().myHistory:
function pageNavigate(sender, e) {
var step = 1;
if (e.get_state().myHistory != null) {
step = e.get_state().myHistory;
}
gotoStep(step);
}

Вот и все! Полный код страницы этого примера приводится в примере 20.3, а на рис. 20.5 показано, как выглядит наш мастер в окне броузера.
Пример 20.3. Исправление недостатков в поддержке механизма закладок и кнопок Назад/Вперед средствами JavaScript
BookmarksJavaScript.aspx
<%@ Page Language="C#" %>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1?transitional.dtd"> ASP.NET AJAX


(body)
(asp:ScriptManager ID="ScriptManager1" runat="server" /)
(asp:History ID="History1" runat="server" /)
style="bordercollapse: collapse;">



id="Wizard1_SideBarContainer_SideBarList" cellspacing="0" border="0" style="
bordercollapse:collapse;">
id="Wizard1_SideBarContainer_SideBarList_ctl00_SideBarButton"
href="javascript:gotoStepClick(1)">Step 1
id="Wizard1_SideBarContainer_SideBarList_ctl01_SideBarButton"
href="javascript:gotoStepClick(2)">Step 2
id="Wizard1_SideBarContainer_SideBarList_ctl02_SideBarButton"
href="javascript:gotoStepClick(3)">Step 3
cellpadding="0" border="0" style="height:100%;width:100%;border?
collapse: collapse;">


(/body)


Оцените статью: (0 голосов)
0 5 0

Статьи из раздела ASP.NET AJAX на эту тему:
Исправление недостатков программным способом
Исправление недостатков в поддержке механизма закладок и кнопок Назад/Вперед с помощью элемента управления UpdateHistory

Вернуться в раздел: ASP.NET AJAX / Кнопки Назад/Вперед и закладки