Введение в AJAX и Atlas c использованием ASP.NET 2.0

ОГЛАВЛЕНИЕ

Веб-приложения оставляют желать лучшего, так как еще не совсем совершенны, в основном из-за цикла "запрос\ответ". Любое взаимодействие со страницей обычно требует postback к веб-серверу ("запрос"), которое впоследствии производит необходимую работу на сервере и возвращает разметку обновленной страницы ("ответ"). За пределами приложений интрасети такое поведение добавляет небольшую задержку во время взаимодействия со страницей. Одним из способов улучшения процесса является использование AJAX. AJAX - это метод для использования JavaScript и объекта XMLHttpRequest для того, чтобы создать легковесные HTTP - запросы на веб-сервер из скрипта клиентской части. Как только ответ был принят, внешний вид страницы может быть плавно обновлен , используя JavaScript для пересылки странице настроек Document Object Model (DOM) и CSS. Страницы, использующие AJAX, предусматривают быструю и отзывчивую работу, тем самым, делая веб-приложения похожими на системные приложения.
Atlas был обновлен до ASP.NET AJAX
В то время когда эта статья была написана, Microsoft ASP.NET AJAX Framework был все еще бета-версией и назывался "Atlas". После того, как эта статья была опубликована, AJAX Framework был официально выпущен и переименован в ASP.NET AJAX. Данная статья может содержать устаревший синтаксис.

В прошлом добавление такого AJAX поведения в ваше веб-приложение являлось сложной задачей, ведь AJAX охватывает целую "стаю" технологий (JavaScript, XML, XmlHttpObject, HTTP-запросы, DHTML, и т.д.). С приходом ASP.NET Atlas Framework стало гораздо меньше причин быть столь нагруженными, когда дело касается AJAX!

В данной статье я сначала представлю вам принципы AJAX и Microsoft Atlas Framework, касательно ASP.NET. Это поможет вам понять основы технологий и осознать причину того, почему вы можете использовать это в своих приложениях. Далее мы рассмотрим небольшой пример, который продемонстрирует основные принципы, рассмотренные в этой статье. Наконец, мы проработаем более сложный пример, в котором мы применим силу Atlas, чтобы добавить в элемент управления GridView поведение типа AJAX. Этот последний пример продемонстрирует простоту, с которой AJAX поведения могут быть добавлены как в уже существующие веб-приложения, так и в совершенно новые проекты.


 

Основные принципы AJAX и Atlas

AJAX расшифровывается как Asynchronous JavaScript and XML (Асинхронный JavaScript и XML). Используя данную технологию, вы можете сделать свои веб-приложения более быстрыми и интерактивными. В самом ядре AJAX находится объект XMLHttpRequest. Данный объект способствует асинхронной посылке небольшого количества данных на веб-сервер, вместо того чтобы обновлять всю страницу каждый раз, когда пользователь что-либо меняет на ней. Согласно сказанному выше, в прошлом было не так легко внедрить методы AJAX потому, что разработчики были ответственны за написание Java скрипта для клиентской стороны в целях создания асинхронного запроса и обработки его ответа, а также кода серверной стороны для обработки таких "частичных" постбэков. Более того, слабые различия между внедрением DOM и XMLHttp среди браузеров не помогли в упрощении процесса.

Atlas Framework является ответом Microsoft на трудности, присущие процессу внедрения методов AJAX. Atlas является расширением ASP.NET и, разумеется, может быть очень легко внедрен в ваши ASP.NET веб-приложения. Например, с Atlas вам не придется больше беспокоиться о совместимости среди браузеров, потому что фрэймворк вырабатывает правильный код в зависимости от веб-браузера клиента.

Остальная часть этой статьи демонстрирует метод использования Atlas по созданию веб-страниц, которые используют AJAX; оба примера могут быть загружены по ссылкам, указанным в конце статьи. Предполагается, что у вас есть в наличии Visual Studio версия 2005 (или Visual Web Developer) и SQL Server 2005 версия Express Edition. (Для тех, кто использует не express версию SQL Server 2005, указания по использованию второго примера будут представлены позже).


 

Элементарный  пример Atlas

Вместо того чтобы просто говорить об Atlas, мы сначала продемонстрируем основные идеи, используя простой пример. Вам сначала придется перейти на сайт Atlas (atlas.asp.net) , загрузить и установить файл April CTP setup (.msi) . Во время установки все настройки оставьте как они настроены по умолчанию. Этот конфигурационный файл установит шаблон веб-сайта Atlas в вашу установку Visual Studio 2005 либо Visual Web Developer .

Теперь, когда у вас уже установлен шаблон Atlas, мы можем перейти к нашему первому примеру. Запустите Visual Studio 2005. Когда он загрузится, нажмите на New Web Site в меню File. Вы увидите диалоговое окно похожее на то, что указано ниже.


Выберите пункт Atlas Web Site, располагающийся под My Templates, введите место расположения, и нажмите OK. Шаблон Atlas Web Site уже произвел некоторую предварительную установку за вас. Например, в проводнике solution, если вы посмотрите на директорию, ниже /bin, вы увидите, что Microsoft.Web.Atlas.dll уже был включен в ваш проект. Более того, если вы посмотрите на исходный код вашего Web.config файла, вы увидите все методы, которые необходимы для того, чтобы добавить функциональность Atlas в ваше веб-приложение. (Я не буду вдаваться во все подробности, принадлежащие коду, который Atlas внедряет в Web.config. Если вы желаете узнать больше о том, что же значит эта разметка, изучите документацию по Atlas (atlas.asp.net/docs)).

Наконец, если вы исследуете исходный код страницы Default.aspx вы сможете заметить что Atlas добавил новое объявление серверного элемента управления:

 <atlas:ScriptManager  ID="ScriptManager1" runat="server" />  

В каждой странице, где вы хотите внедрить функциональность Atlas, вы должны иметь в точности одно объявление элемента управления ScriptManager. Мы пока проигнорируем блок <script> в конце страницы и перейдем непосредственно к нашему примеру.

Для того, чтобы начать, вставьте следующий код в вашу Default.aspx страницу, тем самым заменяя код между тегами <form> :

 <form id="form1"  runat="server">
    <atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>
    
    <div style="background-color: Yellow; float: left; width: 100px;">
      <asp:Label ID="FullPostBackLabel" runat="server" /><br />
      <asp:Button ID="FullPostBackButton" runat="server" text="Full Post Back" OnClick="FullPostBackButton_OnClick" />
    </div>
    
    <atlas:UpdatePanel runat="server" ID="UpdatePanel1" Mode="Conditional">
      <ContentTemplate>
        <div style="background-color: Lime; width: 100px;">
          <asp:Label ID="PartialPostBackLabel" runat="server" /><br />
          <asp:Button ID="PartialPostBackButton" runat="server" text="Partial Post Back" OnClick="PartialPostBackButton_OnClick" />
        </div>
      </ContentTemplate>
    </atlas:UpdatePanel>
</form>

Вкратце, эта декларативная разметка создает два пользовательских интерфейса, которые обновляют элемент управления Label согласно текущим времени и дате на сервере. Первый интерфейс использует стандарт, запрос\ответ постбэк ("Full Post Back" элементы управления), в то время как второй будет использовать AJAX для того, чтобы создавать частичные постбэки. Я опущу обсуждение элементов управления "Full Post Back", так как они не должны требовать объяснений; вместо этого, мы сфокусируемся на "Partial Post Back" элементах управления.

Как вы могли уже заметить, атрибут EnablePatialRendering из элемента управления ScriptManager был добавлен и его значение установлено в "Истина". Это позволит ASP.NET посылать только части страницы назад на сервер , вместо того чтобы обновлять страницу каждый раз. Мы как раз этого и хотим! Для того чтобы обработать асинхронный постинг информации назад на веб-сервер, вам необходимо добавить элемент управления UpdatePanel на вашу страницу:

 <atlas:UpdatePanel runat="server"  ID="UpdatePanel1"  Mode="Conditional">
    <ContentTemplate>
    </ContentTemplate>
</atlas:UpdatePanel>

Поместите те элементы управления ASP.NET, которые участвуют в асинхронном постбэке , между тегами <ContentTemplate> UpdatePanel . Атрибут Mode UpdatePanel указывает, когда частичный постбэк успешно произошел. Для этой страницы установите атрибут Mode в значение Conditional, что означает, что UpdatePanel будет посылать свою информацию назад на сервер в случае, если одно из этих трех событий произойдет:

  1. если метод Update() UpdatePanel был вызван напрямую
  2. событие UpdatePanel является причиной неявного вызова метода Update()
  3. серверный элемент управления, который находится в пределах UpdatePanel, вызывает постбэк
Если опустить атрибут Mode, он будет всегда установлен в значени и по умолчанию Always, что будет причиной обновления UpdatePanel , когда какой-либо элемент управления на странице вызывает постбэк. В данном примере мы будем использовать третий вариант для постбэка UpdatePanel (то есть , UpdatePanel будет постить назад, когда элемент управления в нем вызовет постбэк). Как вы могли уже заметить, у нас есть элементы управления Label и Button между тегами <ContentTemplate>. Тем самым, UpdatePanel будет выполнять постбэк , когда будет нажат элемент управления Button.

Наконец, добавьте следующий <script> блок для серверной стороны между тегами <head> страницы (вы также можете добавить это к страничному классу code-behind, если вам угодно):

 <script runat="server">
  void FullPostBackButton_OnClick(object sender, EventArgs e)
  {
    FullPostBackLabel.Text = DateTime.Now.ToString();
  }

  void PartialPostBackButton_OnClick(object sender, EventArgs e)
  {
    PartialPostBackLabel.Text = DateTime.Now.ToString();
  }
</script>

Это обработчики события на серверной стороне для двух элементов управления Button (один располагается в пределах UpdatePanel, а другой - за пределами), которые будут обновлять Labels , находящиеся над ними, записывая в них информацию о текущих времени и дате, присланных с сервера.

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


Нажав на кнопку "Partial Post Back", вы увидите, как время и дата над ней обновляются без какого-либо мигания на странице, без полностраничного постбэка, и без изменений времени и даты в другой секции! Нажатие кнопки "Partial Post Back" запускает асинхронный постбэк на веб-сервер, используя объект XMLHttpRequest; веб-сервер затем посылает информацию назад, что было использовано для динамического обновления страницы. Этот простой пример демонстрирует простоту реализации AJAX поведений в вашем приложении используя Atlas.

На этой стадии ваше воображение наверняка бушует, думая о различных возможностях использования ASP.NET 2.0 Web элементов управления в сценариях AJAX. В нашем следующем примере мы будем использовать элемент управления GridView. Мы покажем насколько просто добавление частичных постбэков в целях обновления, сортировки и листания по записям!


 

Создание GridView при помощи Atlas

После небольшой практики в предыдущем примере нам пора посмотреть на более практичный пример с использованием элемента управления GridView. Для начала, закройте ваш текущий проект, если он все еще открыт, и создайте новый проект, основанный на шаблоне Atlas. Для того чтобы облегчить вам работу по соединению с источником информации и чтобы у вас были те же результаты, что мы получим в примере, необходимо скачать исходный материал. В папке с названием App_Data под AtlasSecondExample folder вы найдете базу данных, названную Database.mdf. Скопируйте этот файл в вашу только что созданную папку веб-сайта App_Data.

Если вы не используете SQL Server 2005 Express Edition, то...

Если у вас установлена полная версия SQL Server 2005, вместо SQL Server Express, вам необходимо приложить файл базы данных, который вы скачали, к вашей копии SQL Server 2005. Более того, далее, когда мы откроем мастер по настройке конфигурации TableAdapter Configuration Wizard, вас попросят выбрать ваш источник данных, и вместо того, чтобы выбрать файл Database.mdf, вам понадобится нажать на New Connection и тем самым создать новое соединение на вашу SQL Server 2005 базу данных, которую вы подгрузили. (Конечно, вы всегда можете загрузить и установить SQL Server 2005 Express Edition; данная установка бесплатна и может быть установлена параллельно другим версиям SQL Server 2005...)

Откройте страницу Default.aspx в режиме кода и создайте код, расположенный между тегами <form> похожим на следующий пример:

 <form id="form1"  runat="server">
  <atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>

  <atlas:UpdatePanel runat="server" ID="UpdatePanel1" Mode="Conditional">
    <ContentTemplate>

    </ContentTemplate>
  </atlas:UpdatePanel>  
</form>

Мы пояснили этот код в первом примере, так что здесь не должно быть ничего не понятного для вас.

Далее, создайте строго-типизированный источник данных DataSet, во время процесса создания вам предложат возможность автоматически сгенерировать SQL операторы по вставке, обновлению и удалению. Исследование эффективности строго-типизированных DataSet и способов их создания выходит за рамки данной статьи.

Чтобы создать ваш собственный DataSet, начните с выбора File / New File, выберите DataSet и нажмите Add (тем самым, оставляя DataSet названным DataSet1). Потом вы будете опрошены, на случай если бы вы хотели сохранить новый файл в папке App_Code; это наилучшее решение, так что нажмите Yes. Далее вас переведут к дизайнеру DataSet Designer, и мастер конфигурации TableAdapter отобразит:


Будьте уверены, что ваш файл Database.mdf выбран в выпадающем списке и нажмите Next три раза. Теперь пришло время ввести оператор SELECT который будет использован для заполнения DataSet записями из базы данных. Впишите выражение показанное ниже, далее нажмите Next дважды, и, наконец Finish.

 SELECT * 
FROM Employees

Наш оператор SELECT просто возвратит все поля и записи из таблицы Employees. Сохраните строго-типизированный DataSet и далее закройте DataSet Designer.

Теперь, когда мы закончили с настройкой нашего DataSet, мы можем уделить внимание связыванию его с GridView, использующим AJAX. Переключитесь в режим дизайна для просмотра вашей Default.aspx страницы и перетащите элемент управления GridView в UpdatePanel на странице. Вы мгновенно увидите всплывающий smart тег GridView. В "Choose Data Source" выберите "New Data Source". Далее вы будете переведены к мастеру конфигурации Data Source. Выберите "Object" и просто оставьте default ID, далее нажмите OK. На следующем окне, в выпадающем списке\меню вы должны увидеть TableAdapter, который мы создали и назвали DataSet1TableAdapters.EmployeesTableAdapter. выберите этот пункт, нажмите Next, и, наконец, Finish.

Мы почти достигли цели! Из смарт-тега GridView отметьте пункты "Enable Paging", "Enable Sorting" и "Enable Editing". Последнее, что необходимо сделать, это запустить проект. Вы должны увидеть результат, похожий на то, что отображено в следующем изображении.


Понажимайте, тестируя сортировку, листинг и функциональность правки. Заметьте что все нормальные функции GridView (т.е листинг, сортировка, обновление  и т.д...) выполняются асинхронно! Этот пример завершает наше введение в Atlas используя ASP.NET 2.0.

До того, как вы завершите читать эту статью, я хотел бы упомянуть об одной вещи. Многие пользователи во время взаимодействия с динамической веб-страницей привыкают к эффекту постбэка, когда экран "мерцает" и все элементы на странице заново загружаются. По традиции, пользователь уже догадывается, что что-то произошло. Когда эти заминки искоренены при помощи AJAX, было бы неплохо предоставить пользователю какое-нибудь визуальное оповещение о том, что страница обрабатывает их действие. Одним из легко реализуемых путей исполнения этого является использование одного из Atlas встроенных серверных элементов управления, а именно UpdateProgess. Вы можете добавить элемент управления на любую страницу, и когда UpdatePanel посылает информацию назад, все то, что находится внутри тегов <ProgressTemplate> UpdateProgress, будет отображено до того, как обновление будет выполнено. Вы даже можете отобразить анимированное GIF изображение в нем, чтобы оповестить пользователя о том, что страница обрабатывается.

<atlas:UpdateProgress  ID="UpdateProgress1"  runat="server">
  <ProgressTemplate>
    Please wait...
  </ProgressTemplate>
</atlas:UpdateProgress>


Заключение

В данной статье мы убедились, как при помощи Microsoft Atlas можно легко и просто применить функциональность AJAX типа в вашем новом или уже существующем веб-приложении. Мы изучили два примера: один – демонстрирующий основные принципы AJAX и Atlas Framework, и другой - показывающий, как мы можем расположить серверный элемент управления ASP.NET внутри соответствующего серверного Atlas элемента управления, чтобы использовать AJAX в них. Надеюсь, что в данной статье (при помощи данной статьи) я помог прояснить вам сущность AJAX и Atlas, а также подогрел интерес к последующему исследованию этих технологий.

Erich Peterson

Исходные коды примеров