AJAX означает асинхронный JavaScript и XML. Это кроссплатформенная технология, которая ускоряет время отклика. Серверные элементы управления AJAX добавляют на страницу скрипт, который выполняется и обрабатывается браузером.
Однако, как и другие серверные элементы управления ASP.NET, эти серверные элементы управления AJAX могут иметь связанные с ними методы и обработчики событий, которые обрабатываются на стороне сервера.
Панель инструментов управления в Visual Studio IDE содержит набор компонентов управления, называемых AJAX.
Элемент управления ScriptManager является наиболее важным элементом управления и должен присутствовать на странице, чтобы другие элементы управления работали.
Он имеет базовый синтаксис:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
Если вы создадите «Сайт с поддержкой Ajax» или добавите «Веб-форму AJAX» из диалогового окна «Добавить элемент», веб-страница автоматически сформируется и будет содержать элемент управления диспетчера сценариев. Элемент управления ScriptManager отвечает за создание сценариев на стороне клиента для всех элементов управления на стороне сервера.
Элемент управления UpdatePanel является контейнерным элементом управления и является производным от класса Control. Он работает как контейнер для дочерних элементов управления внутри него и не имеет собственного интерфейса. Когда один из его элементов управления запускает обратную отправку, UpdatePanel вмешивается, чтобы запустить асинхронно и обновить часть страницы.
Например, если элемент управления «Кнопка» находится внутри панели обновления и он нажат, это затронет только элементы управления на панели обновления, а элементы управления в других частях страницы не будут затронуты. Это называется возвратом частичной фиксации или возвратом асинхронной фиксации.
Добавьте веб-форму AJAX в свое приложение. Он содержит элемент управления диспетчером сценариев по умолчанию. Вставьте панель обновления. Поместите элемент управления «Кнопка» и метку метки внутри элемента управления «Панель обновления». Разместите еще один набор кнопок и надписей за пределами панели.
Представление о дизайне выглядит так:
Файл ресурсов выглядит следующим образом:
<form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server" /> </div> <asp:UpdatePanel ID="UpdatePanel1" runat="server" > <ContentTemplate> <asp:Button ID="btnpartial" runat="server" onclick="btnpartial_Click" Text="Partial PostBack"/> <br /> <br /> <asp:Label ID="lblpartial" runat="server"></asp:Label> </ContentTemplate> </asp:UpdatePanel> <p> </p> <p>Вне панели обновления</p> < p> <asp:Button ID="btntotal" runat="server" onclick="btntotal_Click" Text="Total PostBack" /> </p> <asp:Label ID="lbltotal" runat="server"></asp:Label></form>
Все кнопки управления имеют один и тот же код для обработчика времени:
string time = DateTime.Now.ToLongTimeString();lblpartial.Text = "Отображение времени с панели" + time;lbltotal.Text = "Отображение времени снаружи" + time;
Обратите внимание, что при запуске страницы, если нажать кнопку полного возврата отправки, она обновит все теги с указанием времени обновления, но если нажата кнопка частичного возврата отправки, она обновит только теги на панели обновления.
| свойство | описывать |
|---|---|
| ДетиАсТриггеры | Это свойство указывает, поступает ли возврат из дочернего элемента управления, что приведет к обновлению панели обновления. |
| Шаблон контента | Это шаблон контента, определяющий, что будет отображаться на панели обновления при ее появлении. |
| Контенттемплатеконтейнер | Извлекает динамически создаваемый объект-контейнер шаблона и используется для программного добавления дочерних элементов управления. |
| IsInPartialRendering | Указывает, обновляется ли панель в рамках возврата частичной фиксации. |
| Режим рендеринга | Показать режим рендеринга. Доступные режимы: блочный и встроенный. |
| Режим обновления | Получает или задает режим рендеринга, определяя некоторые условия. |
| Триггеры | Определите триггерные объекты коллекции, каждый из которых соответствует событию, которое запускает автоматическое обновление панели. |
В следующей таблице показаны методы управления панелью обновления:
| метод | описывать |
|---|---|
| Создатьконтенттемплатеконтейнер | Объект Control создается в качестве контейнера для дочерних элементов управления, определяющих содержимое элемента управления UpdatePanel. |
| CreateControlCollection | Возвращает коллекцию всех элементов управления, содержащихся в элементе управления UpdatePanel. |
| Инициализировать | Инициализирует коллекцию триггеров элемента управления UpdatePanel, если выполняется частичное рисование страницы. |
| Обновлять | Вызывает обновление содержимого элемента управления UpdatePanel. |
Поведение панели обновления зависит от значений свойства UpdateMode и свойства ChildrenAsTriggers.
| метод | описывать | Влияние |
|---|---|---|
| Всегда | ЛОЖЬ | Недопустимый параметр. |
| Всегда | Истинный | UpdatePanel обновляется, если обновляется вся страница или дочерний элемент управления над ней возвращается. |
| Условный | ЛОЖЬ | UpdatePanel обновляется, если обновляется вся страница или если сработавший элемент управления вне ее запускает обновление. |
| Условный | Истинный | UpdatePanel обновляется, если обновляется вся страница или дочерний элемент управления над ней возвращается, или запускающий элемент управления вне нее запускает обновление. |
Элемент управления UpdateProgress обеспечивает обратную связь от браузера при обновлении одного или нескольких элементов управления панели обновления. Например, ожидание ответа от сервера при входе пользователя в систему или при выполнении какой-либо работы с базой данных.
Он обеспечивает визуальное подтверждение, например «Загрузка страницы...», что работа обрабатывается.
Синтаксис элемента управления UpdateProgress:
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="true" AssociatedUpdatePanelID="UpdatePanel1" > <ProgressTemplate> Загрузка... </ProgressTemplate></asp:UpdateProgress>
В приведенном выше фрагменте показано простое сообщение с тегом ProgressTemplate. Однако это может быть изображение или другой связанный элемент управления. Элемент управления UpdateProgress отображает каждый асинхронный возврат, если он не указан как отдельная панель обновления с помощью свойства AssociatedUpdatePanelID.
В следующей таблице показаны свойства элемента управления ходом обновления.
| свойство | описывать |
|---|---|
| AssociatedUpdatePanelID | Получает и задает идентификатор панели обновления с элементом управления, с которым связан этот элемент управления. |
| Атрибуты | Получает и задает свойство каскадной таблицы стилей (CSS) элемента управления UpdateProgress. |
| ДисплейАфте | Получает и задает время в миллисекундах после отображения шаблона обработки. По умолчанию — 500. |
| Динамический макет | Указывает, отображаются ли шаблоны процессов динамически. |
| Шаблон прогресса | Указывает, что шаблон отображается во время возврата асинхронной фиксации, который занимает больше времени, чем время DisplayAfter. |
В следующей таблице показаны методы контроля хода обновления:
| метод | описывать |
|---|---|
| GetScriptDescriptors | Возвращает список компонентов, поведений и элементов управления на стороне клиента, необходимых для клиентской функциональности элемента управления UpdateProgress. |
| GetScriptReferences | Возвращает список элементов управления UpdateProgress, от которых зависят клиентские сценарии. |
Элемент управления таймером используется для автоматической инициализации возвратов отправки. Это можно сделать двумя способами:
(1) Установите свойство Triggers элемента управления UpdatePanel.
<Триггеры> <asp:AsyncPostBackTrigger ControlID="btnpanel2" EventName="Click" /></Triggers>
(2) Поместите элемент управления таймером непосредственно внутри UpdatePanel в качестве триггера для субэлемента управления. Один таймер может служить триггером для многих UpdatePanels.
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always"> <ContentTemplate> <asp:Timer ID="Timer1" runat="server" Interval="1000"> </asp:Timer> < asp:Label ID="Label1" runat="server" Height="101px" > </asp:Label> </ContentTemplate></asp:UpdatePanel>