Модальні діалогові вікна на AJAX

Код доступний для завантаження за адресою: CuttingEdge2008_Launch.exe (419 KB)

Діалогові вікна використовуються в Windows ® вже давно, і у них є свої премущества. Але якщо вам потрібні діалогові вікна у веб-додатку, зазвичай доводиться використовувати спливаючі вікна, а користувачі, як відомо, зазвичай блокують їх за допомогою спеціальних програм. Що ж робити, якщо потрібно спливаюче діалогове вікно?
При використанні AJAX для Microsoft ® ASP.NET діалогові вікна особливо важливі для відображення конекстно-залежної інформації без перезавантаження сторінки або видачі нової сторінки. Тому важливо реалізувати такі діалогові вікна, які були б не менш ефективні, ніж модальні спливаючі вікна, але не створювали незручностей для користувача.
Ні ASP.NET, ні розширення AJAX не підтримують спливаючі вікна або діалогові веб-вікна, але це робить AJAX Control Toolkit. AJAX Control Toolkit – це бібліотека елементів управління розширеннями ASP.NET з вихідним кодом загального користування. Один з найбільш корисних елементів керування – ModalPopupExtender, про який я говорив трохи у випуску "Новітніх технологій" за січень 2008 р. (msdn.microsoft.com/msdnmag/issues/08/01/CuttingEdge). Розширення ModalPopup бере розмітку, створену серверної панеллю ASP.NET, і показує її користувачеві (або приховує від користувача), коли той клацає пов'язаний елемент HTML. Зазвичай спочатку діалогові вікна приховані і завантажуються клієнтом разом зі сторінкою, а потім виводяться і забираються на вимогу. Як забезпечується модальність? Погляньте на фрагмент коду на рис. 1.
Figure 1 Детальніше елемента управління ModalPopupExtender

// Code excerpted from modalpopupbehavior.js.
// Method initialize()
//
// Download the source code of the AJAX Control Toolkit from
// http://www.codeplex.com/atlascontroltoolkit.
//

/ / The panel defined as the popup is saved as the foreground element.
this._foregroundElement = this._popupElement;

/ / A new DIV tag is created as the background element for the panel.
/ / The panel is invisible and placed at 0,0 coordinates (fixed position).
/ / In addition, the background element is given a high z-index so that it
// sits above everything else.
this._backgroundElement = document.createElement(“div”);
this._backgroundElement.id = this.get_id () + "_backgroundElement";
this._backgroundElement.style.display = “none”;
this._backgroundElement.style.position = “fixed”;
this._backgroundElement.style.left = “0px”;
this._backgroundElement.style.top = “0px”;
this._backgroundElement.style.zIndex = 10000;

// The background element is styled as specified.
if (this._BackgroundCssClass)
{
this._backgroundElement.className = this._BackgroundCssClass;
}

/ / The background element is appended to the parent of the foreground
// element.
this._foregroundElement.parentNode.appendChild (this._backgroundElement);

/ / The foreground element is programmatically hidden from view. In
/ / Addition, it is given absolute positioning and an higher z-index than
// the background element.
this._foregroundElement.style.display = “none”;
this._foregroundElement.style.position = “fixed”;
this._foregroundElement.style.zIndex = $common.getCurrentStyle(
this._backgroundElement, "zIndex", this._backgroundElement.style.zIndex) + 1;

/ / A click handler is added to the target element of the extender. In
/ / This case, It is the DOM element whose ID is passed on as the
// TargetControlID property.
this._showHandler = Function.createDelegate (this, this._onShow);
$addHandler(this.get_element(), “click”, this._showHandler);


Код являє собою витримку з сценарію, використовуваного для запуску розширення ModalPopup на клієнті. Зауважте, що розширення AJAX для ASP.NET зазвичай складається з серверного елемента управління, розширення і класу поведінки клієнта, написаного на JavaScript. Код на рис. 1 – з класу поведінки клієнта розширення ModalPopup. Якщо ви завантажили вихідний код набору AJAX Control Toolkit зі сторінки codeplex.com / atlascontroltoolkit, вищевказаний код можна знайти у файлі modalpopupbehavior.js.
Як видно з рис. 1, кореневий елемент дерева розмітки вікна позначений як елемент переднього плану і програмним шляхом прихований з уваги. У той же час тег DIV створюється динамічно і призначається в якості фонового елемента. Йому дається фіксоване положення з координатами 0,0 і призначається соотвествующий стиль. Тегу DIV також присвоюється гранично високий (але довільний) індекс по осі z, який забезпечує його положення над усіма елементами документа, так як властивість індексу по осі z встановлює порядок елемента HTML в стеку, і елемент вище по поряду завжди відображається вище елементів з меншим порядком.
Потім DIV додається до моделі DOM (об'єктній моделі документів) як дочірній для елемента переднього плану. Нарешті, елемент переднього плану – вміст діалогового вікна – отримує індекс по осі z трохи вище фону.
Чистий ефект цього проміжного DIV в тому, що треба всіма елементами сторінки, крім спливаючої панелі, накладається прозорий елемент. Також динамічно застосовується обробник клацання, щоб всі дії користувача поза спливаючої панелі (на елементі переднього плану) не мали результату. Така поведінка забезпечує модальність.
Вміст серверної панелі, визначається у вихідній сторінці ASPX, спливає як модальне вікно, як звичайне діалогове вікно Windows. У той же час воно дає небувалий рівень гнучкості – врешті-решт, це панель ASP.NET, а її можна заповнювати будь-якими комбінаціями елементів управління і організовувати її як завгодно.


Елемент управління ModalPopupExtender


Створити модальне спливаюче вікно за допомогою бібліотеки AJAX Control Toolkit досить просто. Спочатку потрібно визначити панель, що забезпечує користувальницький інтерфейс, а потім додати кнопку, яка запускає відображення діалогового вікна:

<asp:Button runat=”server” ID=”btnEditCustomer”
Text=”Edit text” />
<asp:Panel runat=”server” ID=”pnlEditCustomer”>

</asp:Panel>

Потім потрібно налаштувати розширення і вказати ідентифікатори цільового елемента управління і спливаючого вікна:

<act:ModalPopupExtender ID=”ModalPopupExtender1″
runat=”server”
TargetControlID=”btnEditCustomer”
PopupControlID=”pnlEditCustomer”
BackgroundCssClass=”modalBackground”
OkControlID=”editBox_OK”
OnOkScript=”yes()” />

Ідентифікатор елемента керування мети розширення ModalPopup – ідентифікатор серверного елемента керування, який викликає появу діалогового вікна при натисканні. Ідентифікатор елемента управління спливаючого вікна – ідентифікатор того серверного елемента керування, який забезпечує вміст діалогового вікна.
Інфраструктура AJAX Control Toolkit не забезпечує для діалогових вікон стиль за замовчуванням. Щоб прибрати вікно, користувач повинен скористатися графічними елементами на панелі. На рис. 2 показано для прикладу дію діалогового вікна. Воно дає деяку інформацію і дозволяє підтвердити. Однак якщо потрібні контекстно-залежні вікна, що вимагають подальших дій користувача, доведеться попрацювати ще небагато.


Рис. 2 Приклад дії модального діалогового веб-вікна


Можна додати ряд функцій, щоб розширення ModalPopup виглядало схожим на діалогове вікно Windows. Наприклад, корисно додати можливість закрити діалогове вікно натисканням клавіші Esc – звичайна функція в Windows, поки не підтримувана AJAX Control Toolkit.
Перш, ніж розбиратися ці функції, я коротко розповім про методи і властивості елемента управління ModalPopupExtender. На рис. 3 перераховані його властивості, за винятком всіх, автоматично успадкованих від основних класів.
Figure 3 Властивості елемента керування ModalPopupExtender

BackgroundCssClass Клас CSS, пов'язаний з розміщують додатком і застосовується до будь-якого вмісту під відображуваним модальним спливаючим вікном.
DropShadow Логічне властивість, яке вказує, чи додасть автоматично розширення до модальною спливаючого вікна тінь. За замовчуванням "істина".
OkCancelID Ідентифікатор елемента моделі DOM у видимій інтерфейсі, який закриває модальне вікно дією "Відміна" (Cancel).
OkControlID Ідентифікатор елемента моделі DOM у видимій інтерфейсі, який закриває модальне вікно дією "OK".
OkCancelScript Назва функції JavaScript, пов'язаної з сторінкою, яка виконується при закриванні модального спливаючого вікна дією "Скасувати".
OnOkScript Назва функції JavaScript, пов'язаної з сторінкою, яка виконується при закриванні модального спливаючого вікна дією "ОК".
PopupControlID Ідентифікатор кореневого елемента дерева моделі DOM, відображуваного як вміст модального спливаючого вікна.
PopupDragHandleControlID Ідентифікатор вбудованого елементу, що містить заголовок / назва, які будуть використовуватися як "рукоятка" для перетягування всього вікна.
RepositionMode Вказує, чи слід переміщати спливаюче вікно при прокручуванні або зміну розміру вікна браузера. Допустимі значення належать до перераховуваній типу ModalPopupRepositionMode.
TargetControlID Ідентифікатор елемента моделі DOM, який активує при клацанні модальне спливаюче вікно.
X Координата по осі X верхнього лівого кута модального спливаючого вікна.
Y Координата по осі Y верхнього лівого кута модального спливаючого вікна.

Сигнатура класу елемента управління ModalPopupExtender така:

public class ModalPopupExtender :
DynamicPopulateExtenderControlBase

Тут основний клас – розширення, яке визначається бібліотекою і забезпечує підтримку DynamicPopulate для множинних розширень. DynamicPopulate – ще одне розширення AJAX Control Toolkit, що заміняє розмітку елемента DOM текстом, повернутим викликом до веб-службі. Розширення ModalPopup залежить від інших розширень AJAX Control Toolkit, включаючи DropShadow і DragPanel.
Вміст діалогового вікна повністю определеяется піддерево DOM, що мають коріння в елементі, зазначеному через властивість PopupControlID. Часто це серверний елемент управління ASP.NET, такий як Panel. Положення спливаючого вікна визначається властивостями X і Y, але якщо координати не вказані, вікно буде центровано по горизонталі.
Як і будь-класичне діалогове вікно Windows, модальне спливаюче веб-вікно можна перетягувати. Щоб це забезпечити, потрібно вказати у властивості PopupDragHandleControlID ідентифікатор елемента, який буде використовуватися як "ручка" для перетягування, а вбудований сценарій зробить все інше. Зауважте, що модальне вікно можна перетягувати тільки в межах області сторінки, покритої DOM. Іншими словами, якщо область сторінки визначена DIV як має висоту в 100 пікселів, а сторінка відображається у вікні браузера 1600 на 1024 пікселів, вікно можна буде перетягувати вертикально на 100 пікселів незалежно від фізичних розмірів вікна браузера.
Якщо встановити для властивості RepositionMode будь-яке значення крім "None" (за умовчанням), включиться сценарій поведінки, відновлювальний стан спливаючого вікна при прокручуванні або зміну розміру вікна браузера користувачем (див. рис. 4).


Рис. 4 Зміна положення модального діалогового вікна



Закриття спливаючого вікна клавішею Esc


У Windows користувач може закрити повідомлення або діалогове вікно, натиснувши клавішу Esc. Початково така можливість не закладена в поведінку модальних спливаючих вікон AJAX Control Toolkit. Зараз ви побачите, що виявити і обробити натискання клавіші Esc неважко. Подивіться на цей код JavaScript, пов'язаний з подією KeyDown в моделі DOM сторінки:

function OnKeyPress(args)
{
if(args.keyCode == Sys.UI.Key.esc)
{
$find(“ModalPopupExtender1”).hide();
}
}

Код запускається натисканнями клавіш, що впливають на весь документ. Оброблювач отримує об'єкт Sys.UI.DomEvent через параметр args. Об'єкт описує стан миші та клавіатури, коли перехоплюється подія на рівні моделі DOM. Зокрема, властивість keyCode вказує код ASCII натиснутої клавіші. Доступна додаткова інформація про клавіші Ctrl, Shift та Alt, а також інформація про стан курсору та стан кнопок. Перерахування Sys.UI.Key описує деякі зумовлені константи для коду найбільш часто використовуваних клавіш, в тому числі Esc, Enter і Del. За допомогою цих коштів виявити натискання клавіші Esc простіше простого. Подивимося, як запрограмувати приховування спливаючого вікна.
У розширенні AJAX Control Toolkit є інтерфейс програмування клієнта і сервера. Інтерфейс сервера – це серверний елемент управління ASP.NET; інтерфейс клієнта – клас поведінки JavaScript. Цей клас надає модель програмування JavaScript, що відображає модель програмування з боку сервера, тобто кожна з властивостей на рис. 3 має партнера в JavaScript. Контейнер цих властивостей – об'єкт з ідентифікатором елемента керування розширення ModalPopup. Цей елемент управління – не частина моделі DOM, так як створюється інфраструктурою бібліотеки Microsoft AJAX. Таким чином, не можна використовувати функцію $ get, щоб отримати екзмеплярів класу поведінки; потрібно замість цього використовувати функцію $ find. Для контролю видимості інтерфейси API модального спливаючого вікна і з боку сервера, і з боку клієнта мають методи відображення та приховування.
Зауважте, що обробник подій OnKeyPress не буде працювати, якщо не зареєструвала його в бібліотеці Microsoft AJAX. Найкраще виконати цей код реєстрації у функції pageLoad, ось так:

function pageLoad(sender, args)
{
$addHandler(document, “keydown”, OnKeyPress);
}

Бібліотека Microsoft AJAX викликає функцію pageLoad, коли закінчені всі завдання по запуску й ініціювати все в бібліотеці та на сторінці. Крім того, бібліотека автоматично пов'язує свою стадію завантаження з будь-якою функцією JavaScript, яку можна знайти на сторінці. Тепер будь-модальне спливаюче вікно під управлінням розширення ModalPopup AJAX Control Toolkit можна прибрати клавішею Esc.


Додавання анімації на екран


Закінчивши з цим, можна перейти до інших речей. Було б непогано використовувати щось на кшталт ефекту поступового появи, які використовує Windows Vista ® для веб-додатків, чи не так? Цей ефект вбудований в звичайні вікна під управлінням Windows, наприклад ті, які спливають при виклику методу window.alert. У користувацьких модальних спливаючих вікнах, на зразок тих, якими ми займаємося, доведеться робити це самим.
У найближчому майбутньому анімація може стати убудованою функцією розширення ModalPopup, але поки що змусити всі працювати досить легко завдяки вже готовому інтерфейсу API анімації в бібліотеці AJAX Control Toolkit. Наведений нижче код відноситься до розширення Animation, що забезпечує анімацію деяких заздалегідь готових подій моделі DOM, таких як OnLoad, OnClick, OnMouseOver, and OnMouseOut. TargetControlID вказує на елемент моделі DOM, події якого запустять анімацію:

 <Act: AnimationExtender ID = "popUpAnimation" runat = "server"
TargetControlID=”btnViewMore”>
<Animations>
<OnClick>
<Parallel AnimationTarget=”pnlViewCustomer”
Duration=”.3″ Fps=”25″>
<FadeIn />
</Parallel>
</OnClick>
</Animations>
</act:AnimationExtender>

Анімації можна збирати в послідовність, а деякі можна навіть програвати одночасно. Наведений вище код просто повільно виводить панель, пов'язану з модальним спливаючим вікном, за вказаний період часу і кількість кадрів після натискання кнопки. Код нижче показує більш складну анімацію, виконує декілька ефектів:

 <Act: AnimationExtender ID = "popUpAnimation" runat = "server"
TargetControlID=”btnViewMore”>
<Animations>
<OnClick>
<Parallel AnimationTarget=”pnlViewCustomer”
Duration=”.3″ Fps=”25″>
<Move Horizontal=”100″ Vertical=”100″ />
<Resize Width=”280″ Height=”180″ />
<Color PropertyKey=”backgroundColor”
StartValue=”#FFFFFF”
EndValue=”#FFFF00″ />
</Parallel>
</OnClick>
</Animations>
</act:AnimationExtender>

Тут модальне спливаюче вікно спершу пересувається в нове відносне положення, а потім масштабується і фарбується. Кілька прикладів можна знайти в галереї на сторінці asp.net / AJAX / AjaxControlToolkit / Samples / Animation / Animation.aspx; більшість з них можна застосувати до модальною спливаючого вікна, тільки змінивши вихідний код. Головна проблема полягає в тому, що модальне спливаюче вікно відображається до запуску анімації. Це може згодитися для простого ефекту повільного появи, але якщо вам потрібні ефекти вибуху або змивання, доведеться напружитися.
Розширення ModalPopup створює для клієнта декілька корисних подій, в тому числі подія відображення. Ось як можна на нього підписатися:

function pageLoad(sender, args)
{
$find(“ModalPopupExtender1”).add_showing(onModalShowing);
}

Будь-який код, пов'язаний з подією відображення, виконується безпосередньо перед відображенням спливаючого вікна. Цю подію можна використовувати для виконання будь-яких завдань ініціалізації на стороні клієнта. Інші події клієнта, до яких можна причепитися, включають hiding (приховування), hidden (приховано) і shown (відображує).
Ініціалізація елементів спливаючого вікна
На стороні клієнта розширення ModalPopup перемикає видимість дерева моделі DOM, що визначається атрибутом PopupControlID. У вихідному коді для поведінки клієнта можна побачити додатковий код для перехоплення розмітки, яка завантажена з сервера як складова частина сторінки сайту, який можна використовувати для відображення.
Тому неможливо вносити зміни до шаблону або вміст всплючающего вікна після завантаження сторінки. Розглянемо такий варіант. Користувач вибирає клієнта, покладемо, із списку, і дивиться подробиці. Йому може знадобитися змінити будь-яку інформацію про клієнта. У звичайному веб-додатку користувач перенаправлявся на нову сторінку або, припустимо, повертався назад із завантаженням іншого вмісту. У ASP.NET 2.0 і більше нових версіях це робить елемент управління DetailsView. У додатку для робочого середовища можна використовувати модального діалогоое вікно. Для додатків з підтримкою AJAX тепер доступні діалогові веб-вікна.
Діалогове вікно, використовуване для зміни клієнта, має постійну схему, яку заповнюють новим вмістом кожен раз, коли воно спливає. Припустимо, ви запускаєте повну зворотну передачу при виборі клієнта. У події зміни вибору оновлюється уявлення клієнта і, додатково, елементи управління модального спливаючого вікна. Таким чином, при натисканні кнопки спливає діалогове вікно з уже завантаженої останньою інформацією.
Але додаток AJAX зазвичай не виконує повних зворотних передач. На рис. 5 показано фрагмент сторінки AJAX для ASP.NET, що використовує часткову візуалізацію для оновлення представлення клієнта. Оновлювана область пов'язана з подією SelectedIndexChanged в дочірньому елементі управління розкривного списку. У свою чергу, властивість розкривного списку AutoPostBack має значення "істина". У підсумку виходить, що якщо користувач змінює вибір в списку, таблиця на рис. 5 оновлюється без перезавантаження сторінки. Поки все зрозуміло.
Figure 5 Використання часткової візуалізації для оновлення представлення клієнта

<table>
<tr>
<td valign=”top”>
<b>Customers</b><br />
<asp:DropDownList id=”ddlCustomers” runat=”server”
DataSourceID=”odsCustomers”
DataTextField=”CompanyName”
DataValueField=”ID”
AutoPostBack=”true”
OnSelectedIndexChanged = "ddlCustomers_SelectedIndexChanged"
ondatabound=”ddlCustomers_DataBound” />
<asp:ObjectDataSource ID=”odsCustomers” runat=”server”
TypeName=”IntroAjax.CustomerManager”
SelectMethod=”LoadAll”>
</asp:ObjectDataSource>
</td>
<td valign=”top”>
<asp:UpdatePanel ID=”UpdatePanel1″ runat=”server”>
<ContentTemplate>
<table>
<tr>
<td> <b> Customer ID: </ b> </ td>
<td>
<asp:Label runat="server" id="lblCustomerID" />
</td>
</tr>
<tr>
<td> <b> Company Name: </ b> </ td>
<td>
<asp:Label runat="server" id="lblCompanyName" />
</td>
</tr>
<tr>
<td> <b> Contact Name: </ b> </ td>
<td>
<asp:Label runat="server" id="lblContactName" />
</td>
</tr>
<tr>
<td><b>Country:</b></td>
<td> <asp:Label runat="server" id="lblCountry" /> </ td>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID=”ddlCustomers”
EventName=”SelectedIndexChanged” />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>

Наступний етап – оновити панель на рис. 6, яка представляє вміст модального спливаючого вікна. Панель має бути синхронізована з поданням клієнта.
Figure 6 Вміст модального спливаючого вікна підтримує часткову візуалізацію

<asp:Panel ID=”pnlEditCustomer” runat=”server”
CssClass=”modalPopup” style=”display:none”>
<div style=”margin:10px”>
<asp:UpdatePanel runat=”server” ID=”ModalPanel1″
RenderMode=”Inline” UpdateMode=”Conditional”>
<ContentTemplate>
<table>
<tr>
<td> <b> Customer ID: </ b> </ td>
<td>
<asp:Label runat="server" id="editCustomerID" />
</td>
</tr>
<tr>
<td> <b> Company Name: </ b> </ td>
<td>
<asp:TextBox runat="server" id="editTxtCompanyName" />
</td>
</tr>
<tr>
<td> <b> Contact Name: </ b> </ td>
<td>
<asp:TextBox runat="server" id="editTxtContactName" />
</td>
</tr>
<tr>
<td><b>Country:</b></td>
<td>
<asp:TextBox runat="server" id="editTxtCountry" />
</td>
</tr>
</table>
<hr />
<asp:Button ID=”btnApply” runat=”server”
Text=”Apply” OnClick=”btnApply_Click” />
</ContentTemplate>
</asp:UpdatePanel>

<asp:Button ID=”editBox_OK” runat=”server”
Text=”OK” OnClick=”editBox_OK_Click” />
<asp:Button ID="editBox_Cancel" runat="server" Text="Cancel" />
</div>
</asp:Panel>


Панель можна оновлювати при появі нового клієнта, коли панель з'явиться, або прямо перед відображенням панелі:

 <Act: ModalPopupExtender ID = "ModalPopupExtender1" runat = "server"
TargetControlID=”hiddenTargetControlForModalPopup”
PopupControlID=”pnlEditCustomer”
BackgroundCssClass=”modalBackground”
DropShadow=”false”
OkControlID=”editBox_OK”
OnOkScript=”ok()”
OnCancelScript=”cancel()”
CancelControlID=”editBox_Cancel” />

Якщо вміст спливаючого вікна оновлюється одразу перед відображенням (я рекомендую цей підхід), код інціалізаціі вікна повинен виконуватися на сервері, зате у вас не буде подій зворотної передачі від елементів управління, що виводять модальне вікно. Навіть якщо вони будуть, змінювати елементи керування діалогового вікна буде пізно. Розширення ModalPopup додає до цільового елементу управління обробник події клацання з боку клієнта і запобігає дії за умовчанням – в даному випадку зворотний передачу.
Значить, треба використовувати фіктивний цільовий елемент керування для розширення ModalPopup, щоб воно не викидалося з елемента автоматично. Як тоді запустити модальне спливаюче вікно? Наведемо приклад. При натисканні кнопки нижче над операцією часткової візуалізації виконується серверний обробник OnClick:

 <Asp: UpdatePanel runat = "server" ID = "DialogBoxUpdatePanel"
UpdateMode=”Conditional”>
<ContentTemplate>
<asp:Button runat=”server” ID=”btnEditText”
Text=”Edit text”
OnClick=”btnEditText_Click” />
</ContentTemplate>
</asp:UpdatePanel>

Це має дві переваги. По-перше, сторінка не оновлюється цілком. По-друге, код OnClick на сервері можна використовувати, щоб правильно ініціалізувати спливаючу панель, а потім вказати розширенню відобразити спливаюче вікно:

 protected void btnEditText_Click (object sender, EventArgs e)
{
InitDialog();
ModalPanel1.Update();
ModalPopupExtender1.Show();
}

Метод InitDialog містить внутрішній код, необхідний для ініціалізації всіх елементів управління в панелі на рис. 6. Код достатній, щоб змінити стан елементів управління, але не змінює їх розмітки. Так виходить тому, що код виконується над зворотного передачею часткової візуалізації. Наступним кроком потрібно оновити перезавантажуємо панель. Нарешті, викликати на розширення ModalPopup метод Show. Цей виклик забезпечує правильну завантаження в оглядач сценарію, що показує діалогове вікно при завантаженні сторінки. На рис. 7 показано діюча сторінка, створена за цим рекомендаціям.


Рис. 7 Модальні діалогові вікна з даними з поточного контексту


Чи так потрібні на сторінці всі ці області часткової візуалізації? Якщо ваша єдина завдання – з'ясувати, як запускати діалогові вікна серверним кодом, тоді, мабуть, без деяких областей можна обійтися. Але якщо діалогове вікно вимагає роботи з ініціалізації з боку сервера, то воно напевно має оновлювати підлягає сторінку зібраними даними. У цьому випадку доведеться повертати дані на сервер.


Повернення даних на сервер


Розширення ModalPopup дозволяє визначати елементи управління, службовці кнопками OK і Скасування за допомогою спеціальних властивостей OkControlID і CancelControlID. При натисканні на ці кнопки, спливаюче вікно закривається і, при необхідності, виконується якийсь код JavaScript. За допомогою властивостей OnOkScript і OnCancelScript можна визначити виконання будь-якої функції JavaScript при натисканні кнопок "OK" і "Скасувати". Вікно не робить зворотної передачі, якщо натиснуті передвстановлені кнопки "ОК" і "Скасувати". Пояснення – у наведеному фрагменті вихідного коду з файлу modalpopupbehavior.js. Код належить вбудованим обробникам події натискання для обох кнопок, "ОК" і "Скасувати":

var element = $get(this._OkControlID);
if (element && !element.disabled) {
if (this.hide() && this._OnOkScript) {
window.setTimeout(this._OnOkScript, 0);
}
e.preventDefault();
return false;
}

Ось приклад обробника кнопки ОК:

function onOK(sender, e)
{
// refresh the UI

// if you need to run server code, you
// can invoke a Web service method
}



Тепер ваш хід


Для виконання цього прикладу я не додавав код в існуючі елементи керування або поведінку клієнта. Я просто використав існуючий набір елементів (і клієнта, і сервера), щоб поліпшити ініціалізацію діалогового вікна і обмін даними з головною сторінкою. Щоб уникнути повного перезавантаження сторінки, я використовував часткову візуалізацію, де це було доречно.
Повторити те ж саме в своєму додатку можна, встановивши останню версію AJAX Control Toolkit і обернувши модальну панель в область UpdatePanel, звернувши увагу на те, щоб не включити кнопки "OK" і "Відміна" в часткову область. Потім прив'яжіть розширення ModalPopup до невидимого елементу управління та відображайте і приховуйте спливаюче вікно програмно. Нарешті, якщо потрібно додати у вікно додаткові кнопки, не закриваючи його, все, що потрібно – додати їх в панель UpdatePanel, що описує спливаюче вікно. Додаткові подробиць можна знайти у вихідному коді. Один рядок коду коштує тисячі слів!

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Трекбек і пінги

трекбеків / пінгів ще немає.

Відгуки

привіт

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*