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

Visual Studio 2010

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

Для реализации этих процедур в вашей собственной среде разработки потребуется следующее.

  • Visual Studio или Microsoft Visual Web Developer, экспресс-выпуск.

    ПримечаниеПримечание

    Если используется Visual Studio, в пошаговом руководстве предполагается, что при первом запуске Visual Studio была выбрана коллекция параметров Веб-разработка. Дополнительные сведения см. в разделе Практическое руководство. Выбор параметров среды веб-разработки.

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

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

В данном пошаговом руководстве используется проект веб-сайта. Вместо этого можно использовать проект веб-приложения. Сведения о различиях между этими типами веб-проектов см. в разделе Сравнение проектов веб-приложений с проектами веб-сайтов.

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

  1. Откройте Visual Web Developer.

  2. В меню Файл выберите пункт Новый веб-узел.

    Откроется диалоговое окно Новый веб-узел.

  3. В разделе Установленные шаблоны щелкните Visual Basic или VisualC#, затем выберите Веб-сайт ASP.NET.

  4. В поле Расположениев Интернете выберите поле Файловая система и введите имя папки, в которой будут храниться страницы веб-сайта.

    Например, введите имя папки C:\WebSites.

  5. Нажмите кнопку ОК.

    Visual Studio создает проект веб-сайта, включающий стандартные функциональные возможности для макета (главную страницу, страницы содержимого Default.aspx и About.aspx и каскадную таблицу стилей), технологии Ajax (файлы клиентских скриптов) и проверки подлинности (членства ASP.NET).

    ПримечаниеПримечание

    В Visual Studio или Microsoft Visual Web Developer, экспресс-выпуск файлы клиентских скриптов, включенные в шаблон проекта веб-сайта ASP.NET являются файлами скриптов jQuery. В данном пошаговом руководстве данные файлы скриптов не используются. Вместо них будут использовать серверные веб-элементы управления ASP.NET, которые автоматически управляют клиентским скриптом для добавления функций Ajax на страницы веб-форм ASP.NET. Дополнительные сведения о jQuery см. на веб-сайте jQuery.

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

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

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

    Откроется диалоговое окно Добавление нового элемента.

  2. В меню Установленные шаблоны Visual Studio выберите Веб-форма.

  3. Назовите страницу Employees.aspx и снимите флажок Поместить код в отдельном файле.

  4. Выберите требуемый язык.

  5. Нажмите кнопку Добавить.

  6. Перейдите в представление конструирования.

  7. На вкладке расширения AJAX панели элементов дважды щелкните элемент управления ScriptManager, чтобы добавить его на страницу.

    Урок UpdatePanel
  8. Перетащите элемент управления UpdatePanel из панели элементов под элемент управления ScriptManager.

    Урок UpdatePanel

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

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

  1. Из вкладки Данные панели элементов перетащите элемент управления GridView в изменяемую область элемента управления UpdatePanel.

  2. В меню Задачи GridView выберите Автоформат.

  3. В панели Автоформат в области Выбор схемы выберите Цветная и нажмите кнопку ОК.

  4. В меню Задачи GridView в списке Выбор источника данных выберите пункт <Новый источник данных>.

    Отобразится мастер настройки источника данных.

  5. В поле Источник данных для приложения выберите База данных и затем нажмите кнопку ОК.

  6. В мастере Настройки источника данных на этапе Выбора подключения к базе данных выберите подключение к базе данных AdventureWorks и затем нажмите Далее.

  7. На этапе Настройка инструкции Select выберите Указать пользовательские инструкции SQL или хранимую процедуру и затем нажмите кнопку Далее.

  8. На вкладке SELECT этапа Определения пользовательской инструкции или хранимой процедуры введите следующую инструкцию SQL:

    SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName
    
  9. Нажмите кнопку Далее.

  10. Нажмите кнопку Готово.

  11. В меню Задачи GridView установите флажок Включить разбиение по страницам.

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

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

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

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

  1. Из вкладки Расширения AJAX в панели элементов перетащите элемент управления UpdateProgress на страницу и разместите его под элементом управления UpdatePanel.

  2. Выберите элемент управления UpdateProgress и в окне "Свойства" присвойте свойству AssociatedUpdatePanelID значение UpdatePanel1.

    Это связывает элемент управления UpdateProgress с добавленным ранее элементом UpdatePanel.

  3. В области редактирования элемента управления UpdateProgress введите "Getting Employees ...". .

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

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

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

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

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

  1. В элементе управления UpdatePanel выберите элемент управления GridView.

  2. В окне "Свойства" нажмите кнопку События.

  3. Дважды щелкните событие PageIndexChanged, чтобы создать обработчик событий.

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

    
    //Include three second delay for example only.
    System.Threading.Thread.Sleep(3000);
    
    
    
    ПримечаниеПримечание

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

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

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

Показ: