Модальні діалогові вікна на ajax, ajax - програмні продукти

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

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

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

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

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

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

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

Тут основний клас - розширення, яке визначається бібліотекою і забезпечує підтримку 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 x 1024 пікселів, вікно можна буде перетягувати вертикально на 100 пікселів незалежно від фізичних розмірів вікна браузера.
Якщо встановити для властивості RepositionMode будь-яке значення крім "None" (за замовчуванням), включиться сценарій поведінки, відновлювальний положення спливаючого вікна під час переміщення або зміну розміру вікна оглядача користувачем (див. Рис. 4).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тепер ваш хід

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