AJAX для ASP.NET та шаблони на стороні клієнта, Різне, Програмування, статті

Властива часткової візуалізації простота робить її особливо привабливою для розробників додатків AJAX для ASP.NET: її застосування знижує кількість змін в існуючих сторінках і вимагає меншого рівня кваліфікації розробників. Однак часткова візуалізація – це всього лише прийом, що дозволяє обійти оглядач при виконанні запиту на зворотний передачу. Сторінки, на яких використовується часткова візуалізація, не є справжніми сторінками AJAX, тому що вони все ще використовують старий метод зворотного передачі. Тоді що ж є цим додатком AJAX?

По суті, цими додатками AJAX є ті, які використовують для обходу оглядача об’єкт XMLHttpRequest і встановлюють прямий зв’язок з веб-сервером і будь-якими розміщеними кінцевими точками HTTP. Такі програми здатні асинхронно отримувати необхідні дані і незалежно від цього оновлювати потрібні блоки інтерфейсу користувача. Використовуючи цей ключовий принцип, було розроблено декілька середовищ AJAX, що містять різні дози “синтаксичного цукру”, більші чи менші функціональні можливості, а також більш-менш великі набори елементів управління для користувача інтерфейсу. Одна з таких середовищ – це AJAX для ASP.NET.


Спроектувати і зібрати даний додаток AJAX непросто, тим більше за відсутності належних засобів програмування. У порівнянні з іншими платформами, AJAX для ASP.NET відрізняється хорошими можливостями доступу до коду на сервері. З точки зору розробника підключитися до підтримуючого сценарії веб-серверу або до служби Windows Communication Foundation (WCF) за допомогою AJAX для ASP.NET – Дріб’язкова справа. Потрібно просто послатися на URL-адресу, і платформа сама створить клас проксі на мові JavaScript. Це просто і ефективно. Клас проксі приховує всі деталі зв’язків об’єкта XMLHttpRequest, сериализацию і десеріалізацію, формати даних і пакетування в HTTP. Потрібно всього лише викликати метод асинхронно і отримати звичайний об’єкт передачі даних (тобто DTO) з його власним набором властивостей.


Однак для обробки завантажених даних в браузері платформа AJAX для ASP.NET не надає такого ж зручного механізму. Без сумніву, цей недолік буде незабаром виправлений, але поки в AJAX для ASP.NET немає такої ж багатофункціональної моделі інтерфейсу користувача для роботи на стороні клієнта, як моделі служб для роботи на стороні сервера.


Що ж можна зробити для поліпшення моделі користувальницького інтерфейсу в справжніх веб-додатках AJAX для ASP.NET? Минулого місяця я познайомив вас із концепцією односторінкового інтерфейсу (Single-Page Interface, SPI) і з парою простих шаблонів проектування, корисних при побудові сторінок SPI. Сьогодні ми обговоримо шаблони на стороні клієнта і прив’язку даних.


Типова функція AJAX


Класичною ілюстрацією можливостей підходу, пропонованого AJAX, є програма, яка виводить котирування акцій в реальному часі. Веб-сайти, що реалізують таку ж функціональність без застосування AJAX, використовують тег метаобновленія або рішення, засновані на таких підключаються модулях, як Flash, Silverlight ™ або керуючі елементи ActiveX ®. Зазвичай список величин котирувань прив’язаний на стороні сервера до керуючого елементу “сітка”, який оновлюється разом з рештою сторінкою при кожній наступній зворотної передачі або за запитом сторінки. Такі сторінки легко поліпшуються впровадженням часткової візуалізації. Це можна зробити наступним чином: розмітка, показана на рис. 1, поміщає керуючий елемент “сітка” в елемент UpdatePanel, який періодично оновлюється за допомогою керуючого елемента Timer.


Рис. 1 Інтерфейс сторінки виведення котирувань акцій в реальному часі

<asp:UpdatePanel runat=”server” ID=”UpdatePanel1″ UpdateMode=”Conditional”>
  <ContentTemplate>
   <div style=”margin:10px;”>
    <asp:Label runat=”server” ID=”Label2″ />
    <asp:GridView ID=”GridView1″ runat=”server” SkinID=”ClassicGrid”
     AutoGenerateColumns=”false” 
     OnRowDataBound=”GridView1_RowDataBound”>
     <Columns>
      <asp:BoundField DataField=”Symbol” HeaderText=”SYMBOL” />
      <asp:BoundField DataField=”Quote” HeaderText=”LAST” >
       <ItemStyle HorizontalAlign=”Right” />
      </asp:BoundField>
      <asp:BoundField DataField=”Change” HeaderText=”CHANGE” >
       <ItemStyle HorizontalAlign=”Right” />
      </asp:BoundField>
     </Columns>
    </asp:GridView>
    <small><asp:Label runat=”server” ID=”Label1″ /></small>
   </div> 
  </ContentTemplate>
  <Triggers>
   <asp:AsyncPostBackTrigger ControlID=”Timer1″ EventName=”Tick” /> 
  </Triggers> 
</asp:UpdatePanel>

<asp:Timer runat=”server” id=”Timer1″ Enabled=”true” 
  Interval=”600000″ OnTick=”Timer1_Tick” />


Керуючий елемент “сітка” прив’язаний до колекції об’єктів, що володіють як мінімум трьома властивостями: біржовий код, котирування і її зміна. Вміст сітки оновлюється кожні 10 хвилин. Керуючий елемент “Таймер” платформи AJAX для ASP.NET активує таймер на стороні клієнта, а коли час очікування закінчується, викликає зворотну передачу. Оскільки сітка обгорнута елементом UpdatePanel, котирування в ній оновлюються незалежно від решти сторінки. На стороні сервера при кожному сигналі таймера виповнюється наступний код:

protected void Timer1_Tick(object sender, EventArgs e)
{
   Label2.Text = “<b>Last update: </b>” + DateTime.Now.ToLocalTime();
   GridView1.DataSource = picker.Update();
   GridView1.DataBind();
}

Об’єкт “завантажувач” – це екземпляр користувача допоміжного класу StockPicker. В цьому класі знаходиться примірник службового класу, який отримує дані котирувань. Ось конструктор класу StockPicker:

public StockPicker(string stocks)
{
  string provider = ConfigurationManager.AppSettings[“StockProvider”];
  _service = GetFactory(serviceProvider, stocks);

   if (_service == null)
    return;

   _desc = _service.GetServiceDescription();


Завантажувач читає ім’я класу-постачальника даних з файлу налаштувань і створює екземпляр цього класу. Його взаємодія зі службовим класом задовольняє контрактом, представленому інтерфейсом IQuoteService:

interface IQuoteService
{
   StockInfoCollection GetQuotes();
   string GetServiceDescription();
}

У зразку коду, що поставляється з цією статтею, наведено імітатор служби вибірки котирувань, який у якості значень котирувань повертає випадкові числа. Однак код цієї сторінки легко налаштувати для використання цього постачальника котирувань. Все, що потрібно для цього зробити, – це створити клас, який реалізує інтерфейс IQuoteService, і підключитися до цього постачальника даних по акціях. У наведеному коді прив’язуються дані представлені колекцією об’єктів StockInfo:

public class StockInfo
{
   public string Symbol { get; set; }
   public string Quote { get; set; } 
   public string Change { get; set; }
   public string Day { get; set; }
   public string Time { get; set; } 
}

На рис. 2 показаний приклад сторінки AJAX для ASP.NET, заснованої на цьому інтерфейсі API, в дії.

 

Рис. 7 Нова сторінка, складена за допомогою будівника розмітки


Подальші перспективи


Чи є різниця між зазначенням шаблону у вигляді звичайної рядка і в якості вбудованого піддереві DOM або острова даних XML? З точки зору будівника розмітки ніякої різниці немає – все, що необхідно, це щоб рядок приєднувалася до буферу упорядника рядків З точки зору розробника, можливо, краще використовувати шаблони DOM – їх легко перевірити, а також можна завантажувати по URL-адресу.


Хоча представлене тут рішення розроблено для роботи тільки з колекціями даних, воно дотримується принципів проектування, застосовуваним у вільно розповсюджуваних платформах для роботи з шаблонами на стороні клієнта. Одна з таких середовищ, яку мені хотілося б згадати особливо, це PrototypeJS. Додаткова інформація, приклади і вихідний код знаходяться на сторінці prototypejs.org / api / template.


Чи можна поліпшити небудь ще? Звичайно! Зверніть увагу, що код, наведений у цій статті, реалізує тільки мінімальний набір функцій, які можна очікувати від підсистеми шаблонів і прив’язки даних на стороні браузера.


Як видно на рис. 7, в даній реалізації відсутня можливість розрізняти ціни ростуть і падають акцій за кольором, як у варіанті на рис. 2. В коді з рис. 2 подія RowDataBound елемента управління GridView обробляється самим кодом програми, і стилі порушених клітин змінюються прямо:

void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
   if (e.Row.Cells[2].Text.StartsWith(“+”))
     e.Row.Cells[2].ForeColor = Color.Green;
   if (e.Row.Cells[2].Text.StartsWith(“-“))
     e.Row.Cells[2].ForeColor = Color.Red;

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


Є й ще одна важлива відмінність між прикладами коду з рис. 2 і 7, якого не видно за надрукованими числами. Щоб знайти цю відмінність, спробуйте запустити обидві сторінки і натиснути на інші видимі кнопки (“Прогнози погоди” і “запустити завдання”). Сторінка, показана на рис. 7, не зупиняє інші завдання на час вилучення котирувань акцій, а її власний виклик служби на сервері не переривається запуском якогось іншого завдання.


У чому причина? Пам’ятайте, що у варіанті з частковою візуалізацією в один і той же час в одному і тому ж сеансі міг працювати тільки один запит – точно так само, як і на сторінці, де AJAX не використовується. Звичайно ж, якщо працювати прямо через XMLHttpRequest, що одночасно працюють викликів може бути скільки завгодно. Більш того, якщо викликати служби безпосередньо, то не потрібно стежити за станом подання і за тим, чи залишиться воно узгодженим після кількох запитів на часткову візуалізацію (це і є головна причина того, що часткова візуалізація не дає виконувати операції паралельно).


Прийом проектування: повідомлення HTML


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


Як можна використовувати цей прийом? Одним із прикладів застосування може бути виклик по віддаленому URL-Aдреса (служби або окремого обробника HTTP) і отримання готового до показу фрагмента коду HTML. Зауважте, що трафіку створюється більше, ніж при звичайному виклику служби, але менше, ніж при частковій візуалізації.


На сервері можна використовувати свіжі примірники керуючих елементів (без стану перегляду), щоб зібрати будь-яку потрібну видачу і накласти на неї стилі. Я повернуся до цього прийому в майбутній статті.


Пам’ятайте, що якщо ви працюєте з AJAX для ASP.NET, необхідно програмний засіб, яке визначало б рівень обслуговування AJAX викликало б його з клієнтського браузера. До того ж, потрібно універсальне засіб для того, щоб ефективно змінювати дані на клієнта, таке як заснований на JavaScript мова обробки даних і шаблонів.


Сподіваюся, що коли ви будете дивитися на реалізацію шаблону проектування AJAX BST, яку я описав у цій статті і порівняв його з частковою візуалізацією, ви неминуче прийдете до тих же висновків, що й я.

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


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

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

Ваш отзыв

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

*

*