Главные страницы и ASP.NET AJAX (VB)

Скотт Митчелл

Обсуждаются варианты использования ASP.NET AJAX и мастер-страниц. Просматривает использование класса ScriptManagerProxy; Описывает, как загружаются различные файлы JS в зависимости от того, используется ли ScriptManager на главной странице или на странице содержимого.

Введение

За последние несколько лет все больше разработчиков создали веб-приложения с поддержкой AJAX. Веб-сайт с поддержкой AJAX использует ряд связанных веб-технологий, чтобы обеспечить более адаптивный пользовательский интерфейс. Создание приложений с поддержкой AJAX ASP.NET удивительно легко благодаря платформе Microsoft ASP.NET AJAX. ASP.NET AJAX встроен в ASP.NET 3.5 и Visual Studio 2008; Он также доступен в виде отдельного скачивания для ASP.NET приложений версии 2.0.

При создании веб-страниц с поддержкой AJAX с помощью платформы ASP.NET AJAX необходимо добавить точно один элемент управления ScriptManager на каждую и каждую страницу, использующую платформу. Как подразумевает его имя, ScriptManager управляет клиентским скриптом, используемым на веб-страницах с поддержкой AJAX. По крайней мере, ScriptManager выдает HTML-код, который указывает браузеру скачать файлы JavaScript, создающие клиентскую библиотеку ASP.NET AJAX. Его также можно использовать для регистрации пользовательских файлов JavaScript, веб-служб с поддержкой скриптов и пользовательских функций службы приложений.

Если на сайте используются главные страницы (как это должно), вам не обязательно нужно добавить элемент управления ScriptManager на каждую страницу содержимого; вместо этого можно добавить элемент управления ScriptManager на главную страницу. В этом руководстве показано, как добавить элемент управления ScriptManager на главную страницу. Также показано, как использовать элемент управления ScriptManagerProxy для регистрации пользовательских скриптов и служб скриптов на определенной странице содержимого.

Изучение разметки, созданной элементом управления ScriptManager

Элемент управления ScriptManager выдает разметку, которая указывает браузеру скачать файлы JavaScript, создающие клиентскую библиотеку ASP.NET AJAX. Он также добавляет немного встроенного JavaScript на страницу, которая инициализирует эту библиотеку. В следующей разметке показано содержимое, которое добавляется к отрендеренному выводу страницы, включающей элемент управления ScriptManager.

<script src="/ASPNET_MasterPages_Tutorial_08_CS/WebResource.axd?d=T8EVk6SsA8mgPKu7_sBX5w2 t=633363040378379010" type="text/javascript"></script>

<script src="/ASPNET_MasterPages_Tutorial_08_CS/ScriptResource.axd?d=SCE1TCh8B24VkQIU5a8iJFizuPBIqs6Lka7GEkxo-6ROKNw5LVPCpF_pmLFR-R-p_Uf42Ahmr_SKd8lwgZUWb2uPJmfX0X_H6oLA50bniyQ1 t=633465688673751480" type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>

<script src="/ASPNET_MasterPages_Tutorial_08_CS/ScriptResource.axd?d=SCE1TCh8B24VkQIU5a8iJFizuPBIqs6Lka7GEkxo-6ROKNw5LVPCpF_pmLFR-R-phT96yZPngppiP_VXlN4Vz2RuVtvwDiQzF9xt42dUCiYjL0UylAJoyYzStwvObx0U0 t=633465688673751480" type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
Sys.Application.initialize();
//]]>
</script>

<script src="url"></script> Теги указывают браузеру скачать и выполнить файл JavaScript по URL-адресу. ScriptManager выдает три таких тега; один ссылается на файл WebResource.axd, а другие два ссылаются на файл ScriptResource.axd. Эти файлы на самом деле не существуют как файлы на веб-сайте. Вместо этого, когда запрос на любой из этих файлов поступает на веб-сервер, подсистема ASP.NET проверяет строку запросов и возвращает соответствующее содержимое JavaScript. Скрипт, предоставляемый этими тремя внешними файлами JavaScript, представляет собой клиентскую библиотеку платформы AJAX ASP.NET. Другие <script> теги, создаваемые ScriptManager, включают встроенный скрипт, который инициализирует эту библиотеку.

Внешние ссылки на скрипты и встроенный скрипт, создаваемый ScriptManager, важны для страницы, которая использует платформу ASP.NET AJAX, но не требуется для страниц, которые не используют платформу. Поэтому можно решить, что это идеально добавлять ScriptManager только на страницы, использующие платформу ASP.NET AJAX. И этого достаточно, но если у вас есть много страниц, использующих фреймворк, вы в конечном итоге добавите элемент управления ScriptManager ко всем страницам, что, мягко говоря, является повторяющейся задачей. Кроме того, можно добавить ScriptManager на главную страницу, которая затем внедряет этот необходимый скрипт во все страницы содержимого. При таком подходе не нужно заботиться про добавление ScriptManager на новую страницу, которая использует платформу ASP.NET AJAX, так как ScriptManager уже включен главной страницей. Шаг 1 описывает добавление ScriptManager на главную страницу.

Одним из недостатков добавления ScriptManager на главную страницу является то, что приведенный выше скрипт создается на каждой странице независимо от того, требуется ли его. Это явно приводит к потере пропускной способности для тех страниц, которые включают ScriptManager (через главную страницу), но не используют какие-либо функции платформы AJAX ASP.NET. Но сколько пропускной способности тратится?

• Общее содержимое, создаваемое ScriptManager (показанное выше), составляет чуть более 1 КБ.
• Однако три внешних файла скриптов, на которые <script> ссылается элемент, составляют примерно 450 КБ несжатых данных; на веб-сайте, использующего сжатие gzip, эта общая пропускная способность может быть сокращена около 100 КБ. Однако эти файлы скриптов кэшируются браузером в течение одного года, что означает, что их нужно скачать только один раз, а затем повторно использовать на других страницах на сайте.

В лучшем случае, если файлы скриптов кэшируются, общая стоимость составляет 1 КБ, что незначительно. В худшем случае — когда файлы скриптов еще не загружены, и веб-сервер не использует никакой формы сжатия — нагрузка на полосу пропускания составляет около 450 КБ, что может привести к увеличению времени загрузки от одной-двух секунд по широкополосному подключению до одной минуты для пользователей через модемы коммутируемого доступа. Хорошая новость заключается в том, что, поскольку внешние файлы скриптов кэшируются браузером, этот худший сценарий происходит редко.

Шаг 1. Добавление элемента управления ScriptManager на главную страницу

Каждая веб-страница, использующая платформу AJAX ASP.NET, должна содержать именно один элемент управления ScriptManager. Из-за этого требования обычно имеет смысл разместить один элемент управления ScriptManager на мастер-странице, чтобы элемент управления ScriptManager автоматически включался во все страницы содержимого. Кроме того, диспетчер скриптов должен располагаться перед любыми серверными элементами управления AJAX в ASP.NET, такими как элементы управления UpdatePanel и UpdateProgress. Поэтому лучше поместить ScriptManager перед элементами управления ContentPlaceHolder в веб-форме.

Site.master Откройте главную страницу и добавьте элемент управления ScriptManager на страницу внутри веб-формы, но перед элементом <div id="topContent"> (см. рис. 1). Если вы используете Visual Web Developer 2008 или Visual Studio 2008, элемент управления ScriptManager находится на панели элементов на вкладке "Расширения AJAX". Если вы используете Visual Studio 2005, сначала необходимо установить платформу ASP.NET AJAX и добавить элементы управления в панель элементов. Перейдите на страницу загрузки ASP.NET AJAX, чтобы получить платформу для ASP.NET 2.0.

После добавления ScriptManager на страницу измените его ID с ScriptManager1 на MyManager.

Рис. 01. Добавление ScriptManager на главную страницу (щелкните, чтобы просмотреть изображение полного размера)

Шаг 2. Использование платформы AJAX ASP.NET на странице содержимого

С помощью элемента управления ScriptManager, добавленного на главную страницу, теперь можно добавить ASP.NET функциональные возможности платформы AJAX на любую страницу содержимого. Создадим новую страницу ASP.NET, отображающую случайный выбор продукта из базы данных Northwind. Мы будем использовать элемент управления таймером AJAX платформы ASP.NET для обновления этого дисплея каждые 15 секунд, чтобы показывать новый продукт.

Начните с создания новой страницы в корневом каталоге с именем ShowRandomProduct.aspx. Не забудьте привязать эту новую страницу к главной Site.master странице.

Рис. 02. Добавление новой страницы ASP.NET на веб-сайт (щелкните, чтобы просмотреть изображение полного размера)

Помните, что в руководстве по указанию заголовка, мета тегов и других заголовков HTML на главной странице[SKM1] мы создали пользовательский базовый класс страницы с именем BasePage , который создал заголовок страницы, если он не был явно задан. Перейдите к классу code-behind страницы ShowRandomProduct.aspx и наследуйтесь от BasePage (а не от System.Web.UI.Page).

Наконец, обновите Web.sitemap файл, чтобы добавить запись этого урока. Добавьте следующую разметку под <siteMapNode> для урока "Взаимодействие главного контента со страницей".

<siteMapNode url="~/ShowRandomProduct.aspx" title="Master Pages and ASP.NET AJAX" />

Добавление этого <siteMapNode> элемента отражается в списке уроков (см. рис. 5).

Отображение случайно выбранного продукта

Вернитесь в ShowRandomProduct.aspx. В конструкторе перетащите элемент управления UpdatePanel из панели инструментов MainContent в элемент управления Content и задайте для его свойства ID значение ProductPanel. UpdatePanel представляет область на экране, которая может быть асинхронно обновлена с помощью частичной обратной передачи страницы.

Наша первая задача — отобразить сведения о случайно выбранном продукте в UpdatePanel. Начните с перетаскивания элемента управления DetailsView в UpdatePanel. Установите свойство ID элемента управления DetailsView в ProductInfo, а также очистите свойства Height и Width. Разверните смарт-тег DetailsView, а затем в раскрывающемся списке «Выбор источника данных» выберите привязку DetailsView к новому элементу управления SqlDataSource с именем RandomProductDataSource.

Рис. 03. Привязка DetailsView к новому элементу управления SqlDataSource (щелкните, чтобы просмотреть изображение полного размера)

Настройте элемент управления SqlDataSource для подключения к базе данных Northwind через NorthwindConnectionString (который мы создали в учебнике по взаимодействию с главной страницей из контент-страницы [SKM2]). При настройке инструкции select выберите пользовательскую инструкцию SQL, а затем введите следующий запрос:

SELECT TOP 1 ProductName, UnitPrice
FROM Products
ORDER BY NEWID()

Ключевое TOP 1 слово в предложении SELECT возвращает только первую запись, возвращаемую запросом. Функция NEWID() создает новое глобально уникальное значение идентификатора (GUID) и может использоваться в ORDER BY предложении для возврата записей таблицы в случайном порядке.

Рис. 04. Настройка SqlDataSource для возврата одной случайно выбранной записи (щелкните, чтобы просмотреть изображение полного размера)

После завершения работы мастера Visual Studio создает объект BoundField для двух столбцов, возвращаемых запросом, указанным выше. На этом этапе декларативная разметка страницы должна выглядеть примерно так:

<asp:UpdatePanel ID="ProductPanel" runat="server">
 <ContentTemplate>
 <asp:DetailsView ID="ProductInfo" runat="server" AutoGenerateRows="False" 
 DataSourceID="RandomProductDataSource">
 <Fields>
 <asp:BoundField DataField="ProductName" HeaderText="ProductName" 
 SortExpression="ProductName" />
 <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" 
 SortExpression="UnitPrice" />
 </Fields>
 </asp:DetailsView>
 <asp:SqlDataSource ID="RandomProductDataSource" runat="server" 
 ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT TOP 1 ProductName, UnitPrice FROM Products ORDER BY NEWID()"></asp:SqlDataSource>
 </ContentTemplate>
</asp:UpdatePanel>

На рисунке 5 показана ShowRandomProduct.aspx страница при просмотре через браузер. Нажмите кнопку "Обновить" браузера, чтобы перезагрузить страницу; вы увидите значения ProductName и UnitPrice для новой случайно выбранной записи.

Рис. 05. Отображается имя и цена случайного продукта (щелкните, чтобы просмотреть изображение полного размера)

Автоматическое отображение нового продукта каждые 15 секунд

Платформа AJAX ASP.NET включает элемент управления Таймером, который выполняет обратную передачу данных в указанное время; при обратной передаче возникает событие Таймера Tick. Если элемент управления Таймер помещается в UpdatePanel, он активирует частичное обновление страницы, во время которого можно повторно привязывать данные к DetailsView для более точного отображения случайно выбранного нового продукта.

Для этого перетащите таймер из панели элементов и введите его в UpdatePanel. Измените таймер с ID на Timer1ProductTimer и его свойство Interval с 60000 на 15000. Свойство Interval указывает количество миллисекунд между отправками; если его значение установить на 15000, таймер будет активировать частичное возвращение страницы каждые 15 секунд. На этом этапе декларативная разметка таймера должна выглядеть примерно так:

<asp:UpdatePanel ID="ProductPanel" runat="server" onload="ProductPanel_Load">
 <ContentTemplate>
 ...

 <asp:Timer ID="ProductTimer" runat="server" Interval="15000">
 </asp:Timer>
 </ContentTemplate>
</asp:UpdatePanel>

Создайте обработчик событий для события Таймера Tick . В этом обработчике событий необходимо повторно привязать данные к DetailsView путем вызова метода DetailsView DataBind . Таким образом, DetailsView получает команду повторно запрашивать данные у элемента управления источником данных, который будет выбирать и отображать новую случайным образом выбранную запись (так же, как при перезагрузке страницы, нажимая кнопку "Обновить" браузера).

Protected Sub ProductTimer_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles ProductTimer.Tick
 ProductInfo.DataBind()
End Sub

Вот и всё! Просмотрите страницу через браузер. Изначально отображаются сведения о случайном продукте. Если вы терпеливо смотрите экран, вы заметите, что через 15 секунд информация о новом продукте волшебно заменяет существующий дисплей.

Чтобы лучше узнать, что происходит здесь, давайте добавим элемент управления Label в UpdatePanel, который отображает время последнего обновления дисплея. Добавьте элемент управления Label на UpdatePanel, задайте для него значение IDLastUpdateTime, и очистите его свойство Text. Затем создайте обработчик событий для события UpdatePanel Load и отобразите текущее время в метке. Событие Load элемента UpdatePanel срабатывает при каждом полном или частичном постбэке страницы.

Protected Sub ProductPanel_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles ProductPanel.Load
 LastUpdateTime.Text = "Last updated at " & DateTime.Now.ToLongTimeString()
End Sub

После завершения этого изменения страница включает время загрузки текущего продукта. На рисунке 6 показана страница при первом посещении. На рисунке 7 показана страница через 15 секунд после того, как элемент управления Таймер "сработал" и UpdatePanel был обновлён для отображения сведений о новом продукте.

Рис. 06. Случайный выбор продукта отображается на странице загрузки (щелкните, чтобы просмотреть изображение полного размера)

Рис. 07. Каждые 15 секунд отображается новый случайный выбор продукта (щелкните, чтобы просмотреть изображение полного размера)

Шаг 3. Использование элемента управления ScriptManagerProxy

Наряду с добавлением необходимого скрипта для клиентской библиотеки платформы AJAX ASP.NET Диспетчер сценариев также может зарегистрировать пользовательские файлы JavaScript, ссылки на веб-службы с поддержкой скриптов и пользовательские проверки подлинности, авторизацию и службы профилей. Обычно такие настройки относятся к определенной странице. Однако, если файлы пользовательских скриптов, ссылки на веб-службы или службы проверки подлинности, авторизации или профилей ссылаются в ScriptManager в главной странице, они включаются во все страницы веб-сайта.

Чтобы добавлять настройки, связанные с ScriptManager, на основе каждой отдельной страницы, используйте элемент управления ScriptManagerProxy. Вы можете добавить ScriptManagerProxy на страницу содержимого, а затем зарегистрировать пользовательский файл JavaScript, ссылку на веб-службу, проверку подлинности, авторизацию или службу профилей через ScriptManagerProxy; это позволяет зарегистрировать эти службы для конкретной страницы содержимого.

Чтобы увидеть элемент управления ScriptManagerProxy в действии, давайте добавим в ShowRandomProduct.aspx элемент UpdatePanel кнопку, которая использует клиентский скрипт для приостановки или возобновления элемента управления Timer. Элемент управления Таймер имеет три клиентских метода, которые можно использовать для достижения этой требуемой функциональности:

• _startTimer() — запускает элемент управления таймером
• _raiseTick() — заставляет элемент управления таймером срабатывать, выполняя обратную передачу и вызывая событие Tick на сервере.
• _stopTimer() — останавливает элемент управления таймером

Давайте создадим файл JavaScript с переменной с именем timerEnabled и функцией с именем ToggleTimer. Переменная указывает, включена или отключена ли элемент управления Таймером. По timerEnabled умолчанию он имеет значение true. Функция ToggleTimer принимает два входных параметра: ссылку на кнопку "Приостановка и возобновление" и id клиентское значение элемента управления Таймера. Эта функция переключает значение timerEnabled, получает ссылку на элемент управления Таймер, запускает или останавливает таймер (в зависимости от значения timerEnabled), а затем обновляет отображаемый текст кнопки на "Пауза" или "Возобновить". Эта функция будет вызываться при нажатии кнопки "Пауза и возобновление".

Начните с создания новой папки на веб-сайте с именем Scripts. Затем добавьте новый файл в папку Scripts с именем TimerScript.js типа JScript File.

Рис. 08. Добавление нового файла JavaScript в папку Scripts (щелкните, чтобы просмотреть изображение полного размера)

Рис. 09. Новый файл JavaScript добавлен на веб-сайт (щелкните, чтобы просмотреть изображение полного размера)

Затем добавьте следующий скрипт в файл TimerScript.js:

var timerEnabled = true;
function ToggleTimer(btn, timerID)
{
    // Toggle the timer enabled state
    timerEnabled = !timerEnabled;

    // Get a reference to the Timer
    var timer = $find(timerID);

    if (timerEnabled)
    {
        // Start timer
        timer._startTimer();

        // Immediately raise a tick
        timer._raiseTick();

        btn.value = 'Pause';
    }
    else
    {
        // Stop timer
        timer._stopTimer();

        btn.value = 'Resume';
    }
}

Теперь необходимо зарегистрировать этот пользовательский файл JavaScript в ShowRandomProduct.aspx. Вернитесь к ShowRandomProduct.aspx, добавьте элемент управления ScriptManagerProxy на страницу и установите его ID в MyManagerProxy. Чтобы зарегистрировать пользовательский файл JavaScript, выберите элемент управления ScriptManagerProxy в конструкторе и перейдите в окно свойств. Одно из свойств — "Скрипты". При выборе этого свойства отображается редактор коллекции ScriptReference, показанный на рис. 10. Нажмите кнопку "Добавить", чтобы включить новую ссылку на скрипт, а затем введите путь к файлу скрипта в свойстве Path: ~/Scripts/TimerScript.js

Рис. 10. Добавление ссылки на скрипт в элемент управления ScriptManagerProxy (щелкните, чтобы просмотреть изображение полного размера)

После добавления ссылки на скрипт, декларативная разметка элемента управления ScriptManagerProxy обновляется, чтобы включить коллекцию <Scripts> с одной записью ScriptReference, как показано в следующем фрагменте разметки:

<asp:ScriptManagerProxy ID="MyManagerProxy" runat="server">
 <Scripts>
 <asp:ScriptReference Path="~/Scripts/TimerScript.js" />
 </Scripts>
</asp:ScriptManagerProxy>

Запись ScriptReference указывает ScriptManagerProxy на необходимость включения ссылки на файл JavaScript в конечную разметку. То есть, зарегистрировав пользовательский скрипт в ScriptManagerProxy, отображаемый на странице ShowRandomProduct.aspx вывод теперь включает дополнительный тег <script src="url"></script>: <script src="Scripts/TimerScript.js" type="text/javascript"></script>.

Теперь можно вызвать функцию, определенную ToggleTimerTimerScript.js из клиентского скрипта на ShowRandomProduct.aspx странице. Добавьте следующий HTML-код в UpdatePanel:

<input type="button" id="PauseResumeButton" 
    value="Pause" 
    onclick="ToggleTimer(this, '<%=ProductTimer.ClientID %>');" />

Откроется кнопка с текстом "Пауза". При нажатии кнопки вызывается функция ToggleTimer JavaScript, передавая ссылку на кнопку и id значение элемента управления Таймер (ProductTimer). Обратите внимание на синтаксис для получения значения элемента управления "Таймер" id. <%=ProductTimer.ClientID%> выдает значение свойства ProductTimer элемента управления ClientID Таймером. В руководстве по именованию идентификаторов элемента управления в Content Pages[SKM3] мы обсудили различия между значением на стороне ID сервера и результирующим значением на стороне id клиента, а также как ClientID возвращает клиентское значение id.

На рисунке 11 показана эта страница при первом посещении через браузер. Таймер запущен и обновляет информацию о продукте каждые 15 секунд. На рисунке 12 показан экран после нажатия кнопки "Приостановить". Нажатие кнопки "Приостановить" останавливает таймер и обновляет текст кнопки на "Возобновить". Сведения о продукте будут обновляться (и продолжать обновляться каждые 15 секунд) после нажатия кнопки "Возобновить".

Рис. 11. Нажмите кнопку "Приостановить", чтобы остановить элемент управления таймером (щелкните, чтобы просмотреть изображение полного размера)

Рис. 12. Нажмите кнопку "Возобновить", чтобы перезапустить таймер (щелкните, чтобы просмотреть изображение полного размера)

Сводка

При создании веб-приложений с поддержкой AJAX с помощью платформы AJAX ASP.NET крайне важно, чтобы каждая веб-страница с поддержкой AJAX включала элемент управления ScriptManager. Чтобы упростить этот процесс, мы можем добавить ScriptManager на основную страницу, что избавляет от необходимости добавлять ScriptManager на каждую страницу содержимого. Шаг 1 показал, как добавить ScriptManager на главную страницу, а шаг 2 рассмотрел реализацию функций AJAX на странице содержимого.

Если вам нужно добавить настраиваемые скрипты, ссылки на веб-службы с поддержкой скриптов или настраиваемую проверку подлинности, авторизацию или службы профилей на определенную страницу содержимого, добавьте элемент управления ScriptManagerProxy на страницу содержимого, а затем настройте настройки там. Шаг 3 рассмотрел, как использовать ScriptManagerProxy для регистрации пользовательского файла JavaScript на определенной странице содержимого.

Счастливое программирование!

Дальнейшее чтение

Дополнительные сведения о разделах, описанных в этом руководстве, см. в следующих ресурсах:

• ASP.NET AJAX Framework
• Руководства по ASP.NET AJAX
• Видео ASP.NET AJAX
• Создание интерактивного пользовательского интерфейса с помощью Microsoft ASP.NET AJAX
• Использование NEWID для случайной сортировки записей
• Использование элемента управления таймером

Сведения о авторе

Скотт Митчелл, автор нескольких книг ASP/ASP.NET и основатель 4GuysFromRolla.com, работает с технологиями Microsoft Web с 1998 года. Скотт работает независимым консультантом, тренером и писателем. Его последняя книга Изучите ASP.NET 3.5 за 24 часа с помощью Сэмс. Со Скоттом можно связаться по mitchell@4GuysFromRolla.com или через его блог на http://ScottOnWriting.NET.

Особое спасибо кому

Эта серия учебников была проверена многими полезными рецензентами. Хотите просмотреть мои предстоящие статьи MSDN? Если да, напишите мне на mitchell@4GuysFromRolla.com