Программирование с использованием ajax. Программирование

Программирование >> Программирование с использованием ajax

1 ... 231 232 233 [ 234 ] 235 236 237 ... 396

7. Запустите приложение и попробуйте пощелкать на кнопках. Выполнение щелчка на кнопке AJAX Post back (Отправка AJAX) будет приводить к обновлению только первой надписи, а на кнопке ASP.NET Postback (Отправка ASP.NET) - к обновлению всей страницы.

0 ияМк5 Рад* Windows imMt Ехрккег

3 25 34 PM r~AJAXPQ >n 3 25 2 3 PM ASP rCT Ро 1мск

% Local iNlren*! I ProlecteO UoOetOn

4lOO* -

Puc. 22.1. Форма сайта A JAXWebsite

Описание полученных результатов

Для любой страницы ASP.NET требуется один объект ScriptManager. Этот класс предусматривает загрузку JavaScript-функций для нескольких средств. Его еще также можно использовать и для загрузки своих собственных специальных сценариев. Все доступные свойства этого класса кратко описаны в табл. 22.3.

Таблица 22.3. Свойства класса ScriptManager

Свойство ScriptManager

Описание

EnablePageMethods

EnablePartialRendering

LoadScriptsBeforeUI

ScriptMode ScriptPath Scripts Services

Указывает, должны ли общедоступные статические методы, определенные в АЗРХ-странице, быть пригодными для вызова из клиентского сценария в качестве методов Web-службы

Для включения функции частичной визуализации в UpdatePanel для этого свойство должно быть установлено значение true, которое является значением по умолчанию

Определяет позицию, в которой сценарии должны размещаться в возвращаемой HTML-странице. В случае их размещения внутри элемента <head> они будут загружаться перед загрузкой пользовательского интерфейса

Указывает, какая версия сценариев должна использоваться - отладочная или рабочая

Указывает путь к корневому каталогу, в котором находятся специальные сценарии

Содержит коллекцию файлов специальных сценариев, которые должны визуализироваться для клиента

Содержит коллекцию ссылок на Web-службы, которые могут вызываться из клиентского сценария

Элемент управления UpdatePanel с триггерами

L Откройте созданный ранее Web-сайт AJAXWebsite.

2. Добавьте новую Web-форму AJAX по имени UpdatePanelWithTrigger. aspx и сделайте ее стартовой страницей приложения. В состав этого шаблона уже входит элемент управления ScriptManager.

3. Добавьте два элемента управления UpdatePanel.

4. Добавьте в каждый из элементов управления UpdatePanel элементы управления Label и Button.

5. Назначьте обоим элементам управления Button в качестве обработчика событий Click метод OnButtonClick и реализуйте этот метод, как показано ниже:

protected void OnButtonClick (object sender, EventArgs e) {

Labell.Text = DateTime.Now.ToLongTimeString(); Label2.Text = DateTime.Now.ToLongTimeString();

6. Запустите приложение. Щелчок на любой из кнопок будет приводить к изменению обоих элементов управления Label (как показано на рис. 22.2).

Элементы управления ASP.NET типа Button на странице приводят к созданию клиентом HTML-кнопок типа Submit (Отправка). Button2 отправляет серверу обычный HTTP-запрос POST, а Buttonl - Аах-запрос POST, потому что она находится внутри UpdatePanel и клиентский сценарий присоединяется к ее событию Click. Аах-запрос POST подразумевает использование объекта XmlHttpRequest для отправки запроса серверу. Сервер возвращает только данные, требуемые для обновления пользовательского интерфейса. Эти данные интерпретируются, после чего код JavaScript изменяет HTML-элементы управления внутри UpdatePanel для получения нового пользовательского интерфейса:

<asp:ScriptManager ID= ScriptManagerl runat= server > </asp:ScriptManager> </div>

<asp:UpdatePanel ID= UpdatePanell runat= server > <ContentTemplate> <asp:Label ID= Labell runat= server Text= Label > </asp:Label> <asp:Button ID= Buttonl runat= server Text= AJAX Postback onclick= OnButtonClick /> </ContentTemplate> </asp:UpdatePanel>

<asp:Label ID= Label2 runat= server Text= Label > </asp:Label> <asp:Button ID= Button2 runat= server Text= ASP.NET Postback

onclick= OnButtonClick /> </form>

Ha странице может присутствовать и несколько элементов управления UpdatePanel. Давайте испробуем эту возможность в следующем практическом занятии.



w umMedPage

932 26РмГо !
% Local tntranet Protected Mod	в:

Рис. 22.2. Изменение элементов управления Label после щелчков на кнопках

7. Измените значение свойства UpdateMode обоих элементов управления UpdatePanel с Always на Conditional.

8. Запустите приложение снова. Теперь выполнение щелчка на каждой из кнопок будет приводить к изменению только элемента управления Label, который находится внутри того же элемента UpdatePanel, что и данная кнопка.

9. Выберите первый элемент управления UpdatePanel и щелкните на кнопке с изображением символа троеточия напротив свойства Triggers, чтобы открыть диалоговое окно UpdatePanelTrigger Collection Editor (Редактор коллекции UpdatePanelTrigger), показанное на рис. 22.3. Добавьте триггер AsyncPostback, укажите для свойства ControlID в качестве значения кнопку второго элемента управления UpdatePanel, т.е. Button2, а для свойства EventName - значение Click.

10. Запустите приложение. Теперь выполнение щелчка на кнопке Button2 должно приводить к обновлению содержимого обоих элементов управления UpdatePanel, а на кнопке Buttonl - к обновлению только содержимого первого элемента управления UpdatePanel.

w СоИесСюл EdUor

AiyncPoitBaci БиПоп2,С1к : piopfrtiM-Со гоИО Button?

Controno

The trigger s target confiol ID

Puc. 22.3. Диалоговое сукно UpdatePanelTrigger Collection Editor

1 ... 231 232 233 [ 234 ] 235 236 237 ... 396