Россия, Санкт Петербург |
Знакомство с AJAX-технологией
Учебную базу данных Microsoft Northwind можно скачать по ссылке: http://www.microsoft.com/downloads/details.aspx?FamilyID=06616212-0356-46A0-8DA2-EEBC53A68034&displaylang=en. Презентацию к данной лекции Вы можете скачать здесь.
Технология AJAX (Асинхронный JAVASCRIPT+XML) - это набор приемов, обеспечивающих динамическое обновление содержимого Web-страниц без полной их перезагрузки, а также организацию взаимодействия с сервером, при которой можно рационально распределить вычислительные ресурсы между клиентом и сервером.
В рамках данного занятия мы создадим asp.net-сайт с поддержкой технологии AJAX. Затем, добавим web-страничку, содержащую элемент управления Update Panel. Этот элемент управления является неким "окном", асинхронно связанным с web-сервером. Содержимое этого окна обновляется независимо от остальной web-странички. В UpdatePanel мы разместим элемент управления GridView, с помощью которого можно отображать и редактировать табличные данные. В нашем случае мы воспользуемся учебной базой данных Northwind, разработанной Microsoft для обучения работе с MS SQL-Server.
Итак, вначале нам потребуется скачать и установить учебную базу данных Northwind. Для этого зайдите на ссылку
там мы увидим сообщение Northwind and pubs Sample Databases for SQL Server 2000, нажмите на кнопку Download. После скачивания файла SQL2000SampleDb.msi запустите его. Базы данных сохранятся в папке C:\SQL Server 2000 Sample Databases.
Далее, запустим программу MS Visual Web Developer 2008 Express Edition и создайте проект ASP.NET Web Application. Назовите проект AJAX.
Затем добавим ASP.NET -страницу с помощью следующей последовательности действий: Правая кнопка мыши на названии проекта Add New Item Web Form Products.aspx.
Перейдем в режим Design и из панели инструментов перетащим на страницу элемент управления Script Manager.
После этого под ScriptManager разместим элемент управления UpdatePanel.
Далее, разместим внутри UpdatePanel элемент управления GridView.
Активизируем элемент управления GridView. Нажмите на пункт GridView Tasks Autoformat Colorful OK.
Выберем пункт Choose Data Source. В качестве источника данных укажите Database (База данных).
Далее, нажмем на кнопку New Connection…. Укажите, что источником данных является файл базы данных Northwind.mdf, расположенный в каталоге C:\SQL Server 2000 Sample Databases.
Укажем путь к файлу базы данных, нажав на кнопку Browse.
Нажмем кнопку OK.
Нажмем кнопку Next.
Выберем пункт Specify a custom SQL statement or store procedure и нажмем кнопку Next.
Введем запрос SELECT TOP (5) ProductName, UnitPrice FROM Products ORDER BY UnitPrice DESC. С помощью этого запроса мы отберем пять самых дорогих товаров. Нажмем кнопку Next.
C помощью кнопки Test Query можно убедиться, что запрос работает.
Нажмем кнопку Finish. Запустите проект, выбрав пункт Modify the Web.config file to enable debugging.
Убедимся, что пример работает.
Краткие итоги
Мы освоили процесс создания ASP.NET -страниц с поддержкой технологии AJAX. В процессе работы мы использовали такие AJAX -расширения, как ScriptManager и UpdatePanel. Из элементов управления, предназначенных для доступа к данным мы использовали GridView. Мы скачали и установили учебную базу данных Northwind. Затем мы установили соединение с базой данных и настроили SQL-запрос, вычисляющий пять самых дорогих товаров. Результаты вычислений мы отобразили с помощью GridView, расположенного в UpdatePanel.
Набор для практики
Вопросы:
- Приведите примеры использования технологии AJAX
- Какие преимущества дает использование AJAX?
Упражнения:
Создайте web-страничку publishing.aspx. Выберите классическую тему оформления ( Autoformat Classic ). В качестве файла базы данных выберите pubs.mdf. В качестве запроса используете следующее выражение:
SELECT au_lname, au_fname, city FROM authors WHERE (au_lname LIKE 'G%') ORDER BY city
(Отобрать фамилии, имена и города проживания авторов, фамилии, которых начинаются на букву 'G', отсортированные по городу.). Вы должны получить такой результат: