Пошаговое руководство. Создание веб-узла с поддержкой AJAX

Статья
11/05/2008

Обновлен: Ноябрь 2007

В этом руководстве создается веб-узел ASP.NET с веб-страницей, на которой показаны некоторые возможности библиотеки ASP.NET AJAX, включенной в Visual Studio. Далее выполняется построение приложения, отображающего страницы данных сотрудников из примера базы данных AdventureWorks. Приложение использует элемент управления UpdatePanel для обновления меняющейся части страницы без мигания страницы, которое происходит при обратной передаче. Это называется частичным обновлением страницы. В примере приложения также используется элемент управления UpdateProgress для отображения сообщения о состоянии во время частичного обновления страницы.

Обязательные компоненты

Для реализации процедур в собственной среде разработки потребуются:

Microsoft Visual Studio 2005 или Microsoft Visual Web Developer, экспресс-выпуск.
Образец базы данных AdventureWorks. Можно загрузить и установить базу данных AdventureWorks из Центра загрузки Майкрософт. (выполните поиск "Установка образцов кода и образцов баз данных SQL Server 2005 (Декабрь 2006") (SQL Server 2005 Samples and Sample Databases (декабрь 2006)).

Создание веб-узла

Если веб-узел уже создан в Visual Web Developer (например, в результате выполнения шагов в разделе Пошаговое руководство. Создание базовой веб-страницы в Visual Web Developer), можно использовать этот веб-узел и перейти к следующему разделу Создание главной страницы. В противном случае создайте новый веб-узел и страницу, выполнив следующие шаги.

Создание веб-узла на базе файловой системы

Откройте Visual Web Developer.
В меню Файл выберите Создать веб-узел.

Откроется диалоговое окно Создать веб-узел.
В разделе Установленные шаблоны Visual Studio выберите Веб-узел ASP.NET.
В поле Расположение введите имя папки, где следует хранить страницы веб-узла.

Например, введите имя папки C:\WebSites.
В списке Язык выберите предпочтительный язык программирования.
Нажмите кнопку ОК.

Visual Web Developer создаст папку и новую страницу с именем Default.aspx.

Добавление элемента управления UpdatePanel на веб-страницу ASP.NET

После создания веб-узла создается веб-страница ASP.NET, которая включает элемент управления UpdatePanel. Перед добавлением элемента управления UpdatePanel необходимо добавить элемент управления ScriptManager. Элемент управления UpdatePanel использует элемент ScriptManager для управления частичным обновлением страницы.

Создание новой веб-страницы ASP.NET

В обозревателе решений щелкните правой кнопкой мыши имя веб-узла и выберите Добавление нового элемента.

Откроется диалоговое окно Добавление нового элемента.
В меню Установленные шаблоны Visual Studio выберите Веб-форма.
Назовите страницу Employees.aspx и снимите флажок Поместить код в отдельном файле.
Выберите требуемый язык.
Нажмите кнопку Добавить.
Перейдите в представление конструирования.
На вкладке расширения AJAX панели элементов дважды щелкните элемент управления ScriptManager, чтобы добавить его на страницу.
Перетащите элемент управления UpdatePanel из панели элементов под элемент управления ScriptManager.

Добавление содержимого элемента управления UpdatePanel

Элемент управления UpdatePanel выполняет частичные обновления страницы и определяет содержимое, которое обновляется независимо от остальной страницы. В этой части руководства добавляется элемент управления с привязкой к данным, отображающий данные из базы данных AdventureWorks.

Чтобы добавить содержимое в элемент управления UpdatePanel, выполните следующие действия:

Из вкладки Данные панели элементов перетащите элемент управления GridView в изменяемую область элемента управления UpdatePanel.
В меню Задачи GridView выберите Автоформат.
В панели Автоформат в области Выбор схемы выберите Цветная и нажмите кнопку ОК.
В меню Задачи GridView в списке Выбор источника данных выберите пункт <Новый источник данных>.

Отобразится мастер настройки источника данных.
В поле Источник данных для приложения выберите База данных и затем нажмите кнопку ОК.
В мастере Настройки источника данных на этапе Выбора подключения к базе данных выберите подключение к базе данных AdventureWorks и затем нажмите Далее.
На этапе Настройка инструкции Select выберите Указать пользовательские инструкции SQL или хранимую процедуру и затем нажмите кнопку Далее.
На вкладке SELECT этапа Определения пользовательской инструкции или хранимой процедуры введите следующую инструкцию SQL:
```
SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName
```
Нажмите кнопку Далее.
Нажмите кнопку Готово.
В меню Задачи GridView установите флажок Включить разбиение по страницам.
Сохраните изменения и нажмите CTRL + F5 для просмотра страницы в обозревателе.

Обратите внимание, что при выборе различных страниц данных нет мигания страницы. Это происходит из-за того, что страница не выполняет обратную передачу и не обновляет всю страницу.

Добавление элемента управления UpdateProgress на страницу

Элемент управления UpdateProgress отображает сообщение о состоянии, когда запрашивается новое содержимое для элемента управления UpdatePanel.

Чтобы добавить элемент управления UpdateProgress на страницу, выполните следующие действия.

Из вкладки Расширения AJAX в панели элементов перетащите элемент управления UpdateProgress на страницу и разместите его под элементом управления UpdatePanel.
Выберите элемент управления UpdateProgress и в окне "Свойства" присвойте свойству AssociatedUpdatePanelID значение UpdatePanel1.

Это связывает элемент управления UpdateProgress с добавленным ранее элементом UpdatePanel.
В области редактирования элемента управления UpdateProgress введите текст Получение данных о сотрудниках ... .
Сохраните изменения и нажмите CTRL + F5 для просмотра страницы в обозревателе.

Если во время выполнения SQL-запроса и получения данных есть задержка, элемент управления UpdateProgress отображает сообщение, введенное в элемент управления UpdateProgress.

Добавление задержки в пример приложения

Если приложение быстро обновляет все страницы данных, содержимое элемента управления UpdateProgress можно не увидеть. Элемент управления UpdateProgress поддерживает свойство DisplayAfter, позволяющее задать задержку перед отображением элемента управления. Это помогает предотвратить мигание элемента управления, если обратная передача происходит очень быстро. По умолчанию задержка равна 500 миллисекундам (0,5 секунды), что означает, что элемент управления UpdateProgress не будет отображаться, если обновление занимает меньше половины секунды.

В среде разработки можно добавить искусственную задержку в приложение, чтобы обеспечить должное функционирование элемента управления UpdateProgress. Этот этап является необязательным, он предназначен для проверки приложения.

Чтобы добавить задержку в пример приложения, выполните следующие действия.

В элементе управления UpdatePanel выберите элемент управления GridView.
В окне "Свойства" нажмите кнопку События.
Дважды щелкните событие PageIndexChanged, чтобы создать обработчик событий.

Добавьте следующий код к обработчику PageIndexChanged, который искусственно создает трехсекундную задержку:

'Include three second delay for example only.
System.Threading.Thread.Sleep(3000)

//Include three second delay for example only.
System.Threading.Thread.Sleep(3000);

Примечание.
Обработчик события PageIndexChanged намеренно использует задержку для этого пошагового руководства. На практике в такой задержке нет необходимости. Вместо этого задержка будет возникать в результате трафика сервера или серверного кода, для обработки которого требуется длительное время (например, при долго выполняющихся запросах к базе данных).

Обработчик события PageIndexChanged намеренно использует задержку для этого пошагового руководства. На практике в такой задержке нет необходимости. Вместо этого задержка будет возникать в результате трафика сервера или серверного кода, для обработки которого требуется длительное время (например, при долго выполняющихся запросах к базе данных).

Сохраните изменения и нажмите CTRL + F5 для просмотра страницы в обозревателе.

Из-за трехсекундной задержки при перемещении на новую страницу пользователь может видеть элемент управления UpdateProgress.