Блокування екрану під час постбека (postback), Різне, Програмування, статті

В ідеальному світі всі програми повинні бути швидкими і винахідливими, і не повинно існувати такого поняття, як тривалий постбек. Але в реальному світі існує безліч випадків, коли потрібно декілька секунд для завершення постбека. Наприклад, коли користувач відвідує сайт резервації квитків і вводить інформацію про місце відбування та прибуття, то висновок результатів як звичайно може зайняти кілька секунд. Аналогічно цим прикладом, існують програми, які динамічно генерують і висилають поштою великі PDF-файли при натисканні кнопки, або яким необхідно здійснити запит по дуже повільно працює базі даних, розташованої в офісах в іншій частині світу. У таких випадках користувачу часто доводиться вичікувати деякий час з моменту відсилання даних і до отримання відповіді з веб-сервера.


У той час, як оглядачі надають будь-яку відповідну реакцію користувачеві про те, що форма була вислана і відповідь очікується, дані візуальні підказки розташовані на кордонах оглядача і дозволяють користувачеві взаємодіяти зі сторінкою, повторно натиснути кнопку або взаємодіяти з іншим елементом управління користувальницького інтерфейсу сторінки. Багато сайтів посилають користувачеві повідомлення, зразок “Будь ласка, почекайте поки ми опрацюємо результати …” при відсилання запиту. Це надає дві речі: візуальну реакцію користувачеві про те, що їхні дані були прийняті, і запобігає повторну відсилання пошукового запиту під час обробки першого.


Ви можете повторити цю функціональність в одній сторінці за допомогою невеликого блоку JavaScript і CSS, який блокує екран з реалізації певної дії з клієнтської сторони (найчастіше це відсилання даних), при цьому відображаючи повідомлення і забороняючи користувачеві взаємодіяти з веб-сторінкою. Дана стаття демонструє спосіб впровадження даної функціональності в веб-сторінку ASP.NET. Читайте далі, щоб дізнатися більше про це!


Блокування екрану за допомогою каскадних таблиць стилів (CSS)


Кожен HTML-елемент на веб-сторінці включає в себе безліч атрибутів зовнішнього вигляду, включаючи висоту, ширину, колір, межі і т.д. Менш відомим атрибутом є z-index, цілочисельне значення, яке вказує порядок абсолютно позіційованої елемента. Якщо коротко, ви можете використовувати властивість z-index для розташування HTML-елемента поверх всіх інших HTML-елементів на сторінці. Якщо у вас є два елементи на сторінці, то той елемент, у якого буде більше значення z-index з’явиться поверх того, у якого дане значення відповідно менше.


Значення z-index може бути використано для блокування екрану і запобігання виникнення взаємодії користувача з іншими елементами на веб-сторінці. Це передбачає створення HTML-елемента, який настільки великий, що він покриває екран і має найбільше значення z-index серед усіх елементів сторінки. Такий елемент покриє всі інші елементи на сторінці, отже заборонить користувачеві натискання по посиланнях, кнопкам або інших елементів управління для користувача інтерфейсом під “покриттям”.


Уявіть собі наступний примі: дана сторінка містить певний текст, елемент TextBox, кнопку і елемент . Елемент абсолютно позиціонується у верхньому лівому кутку – його ширина і висота рівні 200 пікселям. Його значення z-index більше значень будь-якого іншого елемента на сторінці. Отже, елемент покриє вміст, що знаходиться під ним.

<html> 
<body>
   <h2>Overlay Test Page</h2>
   <p>
      Please enter your name:
      <input type=”text” name=”name” />
   </p>
   <p>
      <input type=”submit” value=”Click Me!” />
   </p>
   <div style=”background-color: #ccc; position: absolute; top: 0px; left: 0px; width: 200px; height: 200px; z-index: 999;”>
      This content overlays the elements beneath it!
   </div>
</body>
</html> 

Замітка: блокування екрану просто запобігає взаємодія користувача з елементами управління сторінки, наприклад, таким як натискання кнопок у вікні браузера. Але він все ж може натиснути кнопку Back у браузері, оновити сторінку, або використовувати інші можливості браузера.


Ми можемо заблокувати екран повністю створивши елемент , який буде настільки широкий, що покриє весь екран (а не квадрат зі стороною в 200 пікселів). Але замість елемента , що відображається весь час (як це видно в зазначеному вище прикладі), нам необхідно всього лише заблокувати екран в момент, коли користувач виконає будь-які дії з клієнтської сторони, наприклад, такі як відсилання форми. На додаток, також було б непогано відображати деякий повідомлення, наприклад “Ваш запит обробляється …” в той час, коли екран заблокований.


Блокування екрану у відповідь на дії з клієнтської сторони


Елемент , який блокує екран в HTML-прикладі, згаданому вище, відображається постійно. Що нам необхідно зробити, так це змусити даний елемент відображатися тільки тоді, коли користувач натискає кнопку “Click Me!”. (Ідея полягає в тому, що коли користувач натискає кнопку, форма буде відправлена ​​і оглядач оновиться як тільки сервер поверне відповідь. Поки ми чекаємо відповіді, необхідно заблокувати екран, тому, відображаючи елемент при натисканні кнопки екран буде заблокований до того моменту, як буде повернуто відповідь з веб-сервера, після чого оглядач відобразить нову сторінку.)


Дана функціональність можлива за допомогою невеликого блоку JavaScript і CSS коду. Замість того, щоб жорстко програмувати настройки стилю в атрибуті style елемента , давайте спробуємо використовувати класи CSS. Наступний приклад включає в себе два CSS класу:



Клас CSS переключається за допомогою функції JavaScript skm_LockScreen, яка також встановлює атрибут innerHTML елемента в передану рядок str. Функція skm_LockScreen викликається при допомогою кнопки “Click Me!” і відображає повідомлення “Ми обробляємо ваш запит …”

<html> 
<head>
   <style type=”text/css”>
      .LockOff {
         display: none;
         visibility: hidden;
      }

      .LockOn {
         display: block;
         visibility: visible;
         position: absolute;
         z-index: 999;
         top: 0px;
         left: 0px;
         width: 105%;
         height: 105%;
         background-color: #ccc;
         text-align: center;
         padding-top: 20%;
         filter: alpha(opacity=75);
         opacity: 0.75;
      }
   </style>

   <script type=”text/javascript”>
      function skm_LockScreen(str)
      {
         var lock = document.getElementById(“skm_LockPane”);
         if (lock)
            lock.className = “LockOn”;

         lock.innerHTML = str;
      }
   </script>
</head>
<body>
   <h2>Overlay Test Page</h2>
   <p>
      Please enter your name:
      <input type=”text” name=”name” />
   </p>
   <p>

   </p>

   <div id=”skm_LockPane” class=”LockOff”></div>
</body>
</html>


Упаковка функціональності блокування екрану в спеціалізований клас базової сторінки (ASP.NET Base Page Class)


Блокування екрану вимагає додавання HTML-елементів до сторінки (елемент “lock” ), функції JavaScript skm_LockScreen та коду JavaScript для виклику даної функції при певних діях з клієнтською сторони (таких як, натискання кнопки). Ми можемо спростити процес додавання цієї функціональності до ASP.NET-Сторінці шляхом впровадження JavaScript і елемента з коду серверної сторони. Більш того, розташувавши дану функціональність у спеціалізованому базовому класі сторінок ми можемо розширити дане поведінку і використовувати його на всіх сторінках вашого ASP.NET додатки.


Код, доступний в кінці статті, включає в себе спеціалізований клас базової сторінки (BasePage), який містить три методи:




Додаток в кінці цієї статті включає в себе приклад ASP.NET-сторінки, який демонструє спосіб використання методів класів спеціалізованої базової сторінки. Даний приклад включає в себе елемент управління Button, при натисканні якої блокується екран, а також DropDownList, який блокує екран будучи зміненим. Також є елемент Button, який не блокує екран, тому ви зможете порівняти нормальну поведінку з блокуванням екрана. При виконанні постбека, ASP.NET-сторінки “спить” 5 секунд для симуляції.


Наступний малюнок демонструє користувальницький інтерфейс із заблокованим вікном після того, як був натиснутий елемент Button. Зверніть увагу на те, що екран заблокований і відображує повідомлення “Processing Request … “. Як уже було згадано раніше в попередніх прикладах, в той час як екран є заблокованим, користувач не може взаємодіяти з елементами користувальницького інтерфейсу, що знаходяться під “покриттям”.



Даний приклад був протестований і працює як належить в браузерах Safari 3.2 (для PC), Firefox 3.0, Internet Explorer 7.0 і Google Chrome 1.0.








Блокування екрану при виконанні часткового постбека
Техніка блокування, обговорювана в цій статті, фокусується на блокування екрану у відповідь на повний постбек. Проте, дана техніка може бути також використана в додатках, що підтримують Ajax.


Висновок


У той час як оглядачі надають візуальні підказки про те, що запит був відісланий на сервер і що очікується відповідь, вони розташовані по периметру і не забороняють користувачеві повторно вислати форму або взаємодіяти з іншими елементами на сторінці. Багато веб-сайти використовують деякі механізми для блокування екрану після того, як користувач запустив потенційно тривалий постбек. Деякі веб-сайти навіть мають окрему сторінку, типу “Ми обробляємо ваш запит …”.


Дана стаття демонструє спосіб блокування екрану використовуючи деякий код JavaScript і CSS. За допомогою даного підходу ви можете використовувати скрипт для того, щоб елемент був відображений у відповідь на дії з клієнтської сторони. Даний елемент простягається на весь екран і покриває всі інші елементи на сторінці, тим самим забороняючи користувачеві повторно висилати форму. Це також служить хорошою підказкою користувачеві про те, що його дія була прийнята і що скоро буде отриманий результат.


Веселого програмування!


Scott Mitchell

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


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

Коментарів поки що немає.

Ваш отзыв

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

*

*