Эталонные страницы и ASP.NET AJAX (VB)Master Pages and ASP.NET AJAX (VB)

по Скотт Митчеллby Scott Mitchell

Скачать код или скачать PDFDownload Code or Download PDF

Обсуждаются варианты использования ASP.NET AJAX и главных страниц.Discusses options for using ASP.NET AJAX and master pages. Просматривает использование класса ScriptManagerProxy; Описывает, как различные файлы JS загружаются в зависимости от того, используется ли ScriptManager на главной странице или странице содержимого.Looks at using the ScriptManagerProxy class; discusses how the various JS files are loaded depending on whether the ScriptManager is used in the Master page or Content page.

ВведениеIntroduction

За последние несколько лет все больше разработчиков создали веб-приложения с поддержкой AJAX.Over the past several years, more and more developers have been building AJAX-enabled web applications. Веб-сайт с поддержкой AJAX использует ряд связанных веб-технологий для более быстрого реагирования на работу пользователей.An AJAX-enabled website uses a number of related web technologies to offer a more responsive user experience. Создание приложений ASP.NET с поддержкой AJAX невероятно легко благодаря технологии Microsoft ASP.NET AJAX Framework.Creating AJAX-enabled ASP.NET applications is amazingly easy thanks to Microsoft's ASP.NET AJAX framework. ASP.NET AJAX встроен в ASP.NET 3,5 и Visual Studio 2008; Она также доступна как отдельная загрузка для приложений ASP.NET 2,0.ASP.NET AJAX is built into ASP.NET 3.5 and Visual Studio 2008; it is also available as a separate download for ASP.NET 2.0 applications.

При создании веб-страниц с поддержкой AJAX с помощью платформы AJAX ASP.NET необходимо добавить на каждую страницу, использующую платформу, ровно один элемент управления ScriptManager.When building AJAX-enabled web pages with the ASP.NET AJAX framework, you must add precisely one ScriptManager control to each and every page that uses the framework. Как следует из названия, ScriptManager управляет сценарием на стороне клиента, используемым на веб-страницах с поддержкой AJAX.As its name implies, the ScriptManager manages the client-side script used in AJAX-enabled web pages. Как минимум, ScriptManager создает HTML-код, который указывает браузеру загрузить файлы JavaScript, описывающего клиентскую библиотеку AJAX ASP.NET.At a minimum, the ScriptManager emits HTML that instructs the browser to download the JavaScript files that makeup the ASP.NET AJAX Client Library. Его также можно использовать для регистрации пользовательских файлов JavaScript, веб-служб с поддержкой скриптов и пользовательских функций службы приложений.It can also be used to register custom JavaScript files, script-enabled web services, and custom application service functionality.

Если сайт использует главные страницы (как это необходимо), добавлять элемент управления ScriptManager на каждую страницу содержимого не обязательно; Вместо этого можно добавить элемент управления ScriptManager на главную страницу.If your site uses master pages (as it should), you do not necessarily need to add a ScriptManager control to every single content page; rather, you can add a ScriptManager control to the master page. В этом руководстве показано, как добавить элемент управления ScriptManager на главную страницу.This tutorial shows how to add the ScriptManager control to the master page. Кроме того, здесь рассматривается использование элемента управления ScriptManagerProxy для регистрации пользовательских скриптов и служб скриптов на определенной странице содержимого.It also looks at how to use the ScriptManagerProxy control to register custom scripts and script services in a specific content page.

Note

В этом руководстве не рассматривается разработка и создание веб-приложений с поддержкой AJAX с помощью платформы ASP.NET AJAX.This tutorial does not explore designing or building AJAX-enabled web applications with the ASP.NET AJAX framework. Дополнительные сведения об использовании AJAX см. в видеороликах и учебниках по ASP.NET AJAX, а также о ресурсах, перечисленных в разделе Дополнительные материалы в конце этого руководства.For more information on using AJAX consult the ASP.NET AJAX videos and tutorials, as well as those resources listed in the Further Reading section at the end of this tutorial.

Проверка разметки, порожденной элементом управления ScriptManagerExamining the Markup Emitted by the ScriptManager Control

Элемент управления ScriptManager создает разметку, которая указывает браузеру загрузить файлы JavaScript, описывающего клиентскую библиотеку AJAX ASP.NET.The ScriptManager control emits markup that instructs the browser to download the JavaScript files that makeup the ASP.NET AJAX Client Library. Также добавляется ряд встроенных сценариев JavaScript на страницу, которая инициализирует эту библиотеку.It also adds a bit of inline JavaScript to the page that initializes this library. В следующей разметке показано содержимое, добавляемое в отображаемые выходные данные страницы, которая содержит элемент управления ScriptManager:The following markup shows the content that is added to the rendered output of a page that includes a ScriptManager control:

<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-адресу.The <script src="url"></script> tags instruct the browser to download and execute the JavaScript file at url. ScriptManager выдает три таких тега; один ссылается на файл WebResource.axd, а другие два ссылаются на ScriptResource.axdфайла.The ScriptManager emits three such tags; one references the file WebResource.axd, while the other two reference the file ScriptResource.axd. Эти файлы фактически не существуют как файлы на веб-сайте.These files do not actually exist as files in your website. Вместо этого, когда запрос одного из этих файлов поступает на веб-сервер, модуль ASP.NET проверяет строку запроса и возвращает соответствующее содержимое JavaScript.Instead, when a request for either one of these files arrives at the web server, the ASP.NET engine examines the querystring and returns the appropriate JavaScript content. Скрипт, предоставляемый этими тремя файлами JavaScript, состоит из клиентской библиотеки платформы ASP.NET AJAX.The script provided by these three external JavaScript files constitute the ASP.NET AJAX framework's Client Library. Другие Теги <script>, созданные ScriptManager, включают встроенный скрипт, который инициализирует эту библиотеку.The other <script> tags emitted by the ScriptManager include inline script that initializes this library.

Ссылки на внешние скрипты и встроенный скрипт, создаваемые ScriptManager, необходимы для страницы, которая использует платформу ASP.NET AJAX, но не требуется для страниц, не использующих платформу.The external script references and inline script emitted by the ScriptManager are essential for a page that uses the ASP.NET AJAX framework, but is not needed for pages that do not use the framework. Таким образом, может быть, что лучше всего добавить ScriptManager только на те страницы, которые используют платформу ASP.NET AJAX.Therefore, you might reason that it is ideal to only add a ScriptManager to those pages that use the ASP.NET AJAX framework. И это достаточно, но если у вас много страниц, использующих эту платформу, вы добавите элемент управления ScriptManager ко всем страницам — повторяющейся задаче, чтобы сказать, что она наименее.And this is sufficient, but if you have many pages that use the framework you'll end up adding the ScriptManager control to all pages - a repetitive task, to say the least. Кроме того, можно добавить ScriptManager на главную страницу, который затем внедряет этот необходимый скрипт на все страницы содержимого.Alternatively, you can add a ScriptManager to the master page, which then injects this necessary script into all content pages. При таком подходе не нужно забывать добавить ScriptManager на новую страницу, использующую платформу ASP.NET AJAX, так как она уже включена на главной странице.With this approach, you do not need to remember to add a ScriptManager to a new page that uses the ASP.NET AJAX framework because it is already included by the master page. Шаг 1 содержит инструкции по добавлению ScriptManager на главную страницу.Step 1 walks through adding a ScriptManager to the master page.

Note

Если вы планируете включить функциональные возможности AJAX в пользовательском интерфейсе главной страницы, вы не сможете выбрать нужный элемент. необходимо включить ScriptManager в главную страницу.If you plan on including AJAX functionality within the user interface of your master page, then you have no choice in the matter - you must include the ScriptManager in the master page.

Одной из недостатков добавления ScriptManager на главную страницу является то, что приведенный выше сценарий создается на каждой странице, независимо от того, требуется ли он.One downside of adding the ScriptManager to the master page is that the above script is emitted in every page, regardless of whether its needed. Это явно приводит к потреблению лишней пропускной способности для страниц, которые включают ScriptManager (с помощью главной страницы), но не используют функции платформы ASP.NET AJAX.This clearly leads to wasted bandwidth for those pages that have the ScriptManager included (via the master page) yet don't use any features of the ASP.NET AJAX framework. Но сколько пропускной способности теряется?But just how much bandwidth is wasted?

  • Реальное содержимое, порожденное ScriptManager (показанное выше), суммирует 1 КБ.The actual content emitted by the ScriptManager (shown above) totals a little over 1KB.
  • Однако три внешних файла скриптов, на которые ссылается элемент <script>, состоят из примерно 450KB данных без сжатия. на веб-сайте, использующем сжатие GZIP, эту общую пропускную способность можно уменьшить около 100 КБ.The three external script files referenced by the <script> element, however, comprise roughly 450KB of data uncompressed; in a website that uses gzip compression, this total bandwidth can be reduced near 100KB. Однако эти файлы сценариев кэшируются браузером в течение одного года, то есть их необходимо загрузить только один раз, а затем повторно использовать на других страницах сайта.However, these script files are cached by the browser for one year, meaning that they only need to be downloaded once and then can be reused in other pages on the site.

В лучшем случае, когда файлы скрипта кэшируются, Общая стоимость — 1 КБ, что незначительно.In the best case, then, when the script files are cached, the total cost is 1KB, which is negligible. Однако в худшем случае, если файлы скриптов еще не скачаны и веб-сервер не использует сжатые формы, пропускная способность будет около 450KB, что может поочередно добавляться в любом месте через широкополосное подключение до минуты. Пользователи через коммутируемые модемы.In the worst case, however - which is when the script files have not yet been downloaded and the web server is not using any form of compression - the bandwidth hit is around 450KB, which can add anywhere from a second or two over a broadband connection to up to a minute for users over dial-up modems. Хорошая новость состоит в том, что поскольку внешние файлы скриптов кэшируются браузером, это наихудший случай случается редко.The good news is that because the external script files are cached by the browser, this worst case scenario occurs infrequently.

Note

Если вы по-прежнему не можете разместить элемент управления ScriptManager на главной странице, рассмотрим веб-форму (<form runat="server"> разметку на главной странице).If you still feel uncomfortable placing the ScriptManager control in the master page, consider the Web Form (the <form runat="server"> markup in the master page). Каждая страница ASP.NET, использующая модель обратной передачи, должна содержать ровно одну веб-форму.Every ASP.NET page that uses the postback model must include precisely one Web Form. При добавлении веб-формы добавляется дополнительное содержимое: ряд скрытых полей формы, сам тег <form> и, при необходимости, функция JavaScript для инициации обратной передачи из скрипта.Adding a Web Form adds additional content: a number of hidden form fields, the <form> tag itself, and, if necessary, a JavaScript function for initiating a postback from script. Эта разметка не требуется для страниц, которые не являются обратными.This markup is unnecessary for pages that don't postback. Эту излишнее разметку можно устранить, удалив веб-форму с главной страницы и вручную добавив ее на каждую страницу содержимого, которая нуждается в такой разметке.This extraneous markup could be eliminated by removing the Web Form from the master page and manually adding it to each content page that needs one. Однако преимущества веб-формы на главной странице перевешивают недостатки, так как они не добавляются к определенным страницам содержимого.However, the benefits of having the Web Form in the master page outweigh the disadvantages from having it added unnecessarily to certain content pages.

Шаг 1. Добавление элемента управления ScriptManager на главную страницуStep 1: Adding a ScriptManager Control to the Master Page

Каждая веб-страница, использующая платформу ASP.NET AJAX, должна содержать ровно один элемент управления ScriptManager.Every web page that uses the ASP.NET AJAX framework must contain precisely one ScriptManager control. В связи с этим требованием обычно имеет смысл поместить один элемент управления ScriptManager на главную страницу, чтобы все страницы содержимого автоматически включали элемент управления ScriptManager.Because of this requirement, it usually makes sense to place a single ScriptManager control on the master page so that all content pages have the ScriptManager control automatically included. Кроме того, ScriptManager должен находиться перед любыми серверными элементами управления ASP.NET AJAX, такими как UpdatePanel и UpdateProgress Controls.Furthermore, the ScriptManager must come before any of the ASP.NET AJAX server controls, such as the UpdatePanel and UpdateProgress controls. Поэтому рекомендуется разместить ScriptManager перед любыми элементами управления ContentPlaceHolder в веб-форме.Therefore, it's best to put the ScriptManager before any ContentPlaceHolder controls within the Web Form.

Откройте Site.master главную страницу и добавьте элемент управления ScriptManager на страницу в веб-форме, но перед элементом <div id="topContent"> (см. рис. 1).Open the Site.master master page and add a ScriptManager control to the page within the Web Form, but before the <div id="topContent"> element (see Figure 1). Если вы используете Visual Web Developer 2008 или Visual Studio 2008, элемент управления ScriptManager находится в области элементов на вкладке расширения AJAX. При использовании Visual Studio 2005 необходимо сначала установить платформу ASP.NET AJAX и добавить элементы управления на панель элементов.If you are using Visual Web Developer 2008 or Visual Studio 2008, the ScriptManager control is located in the Toolbox in the AJAX Extensions tab. If you are using Visual Studio 2005, you will need to first install the ASP.NET AJAX framework and add the controls to the Toolbox. Посетите страницу загрузки ASP.NET AJAX, чтобы получить платформу для ASP.NET 2,0.Visit the ASP.NET AJAX download page to get the framework for ASP.NET 2.0.

После добавления ScriptManager на страницу измените его ID с ScriptManager1 на MyManager.After adding the ScriptManager to the page, change its ID from ScriptManager1 to MyManager.

добавить ScriptManager на главную страницуAdd the ScriptManager to the Master Page

Рис. 01. Добавление ScriptManager на главную страницу (щелкните, чтобы просмотреть изображение с полным размером)Figure 01: Add the ScriptManager to the Master Page (Click to view full-size image)

Шаг 2. Использование платформы ASP.NET AJAX на странице содержимогоStep 2: Using the ASP.NET AJAX Framework from a Content Page

После добавления элемента управления ScriptManager на главную страницу можно добавить функциональность платформы ASP.NET AJAX на любую страницу содержимого.With the ScriptManager control added to the master page we can now add ASP.NET AJAX framework functionality to any content page. Давайте создадим новую страницу ASP.NET, которая отображает продукт, выбранный случайным образом, из базы данных Northwind.Let's create a new ASP.NET page that displays a randomly selected product from the Northwind database. Мы будем использовать элемент управления таймера платформы ASP.NET AJAX для обновления этого экрана каждые 15 секунд, показывая новый продукт.We'll use the ASP.NET AJAX framework's Timer control to update this display every 15 seconds, showing a new product.

Начните с создания новой страницы в корневом каталоге с именем ShowRandomProduct.aspx.Start by creating a new page in the root directory named ShowRandomProduct.aspx. Не забудьте привязать эту новую страницу к главной странице Site.master.Don't forget to bind this new page to the Site.master master page.

добавить новую страницу ASP.NET на веб-сайтAdd a New ASP.NET Page to the Website

Рис. 02. Добавление новой страницы ASP.NET на веб-сайт (щелкните, чтобы просмотреть изображение с полным размером)Figure 02: Add a New ASP.NET Page to the Website (Click to view full-size image)

Помните, что в разделе Указание заголовка, Meta-тегов и других заголовков HTML на главной странице [SKM1] мы создали пользовательский класс базовой страницы с именем BasePage, который создал заголовок страницы, если он не был явно задан.Recall that in the Specifying the Title, Meta Tags, and Other HTML Headers in the Master Page[SKM1] tutorial we created a custom base page class named BasePage that generated the page's title if it was not explicitly set. Перейдите к классу кода программной части ShowRandomProduct.aspx страницы и получите производный от BasePage (а не System.Web.UI.Page).Go to the ShowRandomProduct.aspx page's code-behind class and have it derive from BasePage (instead of from System.Web.UI.Page).

Наконец, обновите файл Web.sitemap, включив в него запись для этого занятия.Finally, update the Web.sitemap file to include an entry for this lesson. Добавьте следующую разметку под <siteMapNode> для занятия "взаимодействие с главной страницей содержимого":Add the following markup beneath the <siteMapNode> for the Master to Content Page Interaction lesson:

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

Добавление этого элемента <siteMapNode> отражается в списке уроков (см. рис. 5).The addition of this <siteMapNode> element is reflected in the Lessons list (see Figure 5).

Отображение продукта, выбранного случайным образомDisplaying a Randomly Selected Product

Вернитесь к ShowRandomProduct.aspx.Return to ShowRandomProduct.aspx. Из конструктора перетащите элемент управления UpdatePanel из панели элементов в MainContent элемент управления содержимым и задайте для его свойства ID значение ProductPanel.From the Designer, drag an UpdatePanel control from the Toolbox into the MainContent Content control and set its ID property to ProductPanel. UpdatePanel представляет область на экране, которую можно асинхронно обновить с помощью частичной обратной передачи страницы.The UpdatePanel represents a region on the screen that can be asynchronously updated through a partial page postback.

Первая задача — отображение сведений о продукте, выбранном случайным образом, в UpdatePanel.Our first task is to display information about a randomly selected product within the UpdatePanel. Начните с перетаскивания элемента управления DetailsView в UpdatePanel.Start by dragging a DetailsView control into the UpdatePanel. Задайте для свойства ID элемента управления DetailsView значение ProductInfo и удалите его свойства Height и Width.Set the DetailsView control's ID property to ProductInfo and clear out its Height and Width properties. Разверните смарт-тег DetailsView и в раскрывающемся списке Выбор источника данных выберите, чтобы привязать DetailsView к новому элементу управления SqlDataSource с именем RandomProductDataSource.Expand the DetailsView's smart tag and, from the Choose Data Source drop-down list, choose to bind the DetailsView to a new SqlDataSource control named RandomProductDataSource.

привязать DetailsView к новому элементу управления SqlDataSourceBind the DetailsView to a New SqlDataSource Control

Рис. 03. привязка элемента DetailsView к новому элементу управления SqlDataSource (щелкните, чтобы просмотреть изображение с полным размером)Figure 03: Bind the DetailsView to a New SqlDataSource Control (Click to view full-size image)

Настройте элемент управления SqlDataSource для подключения к базе данных Northwind с помощью NorthwindConnectionString (которая была создана при взаимодействии с главной страницей в руководстве по содержимому [SKM2]).Configure the SqlDataSource control to connect to the Northwind database via the NorthwindConnectionString (which we created in the Interacting with the Master Page from the Content Page[SKM2] tutorial). При настройке инструкции Select выберите, чтобы указать пользовательскую инструкцию SQL, а затем введите следующий запрос:When configuring the select statement choose to specify a custom SQL statement and then enter the following query:

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

Ключевое слово TOP 1 в предложении SELECT возвращает только первую запись, возвращенную запросом.The TOP 1 keyword in the SELECT clause returns only the first record returned by the query. Функция NEWID() создает новое глобальное уникальное значение идентификатора (GUID) и может использоваться в предложении ORDER BY для возврата записей таблицы в случайном порядке.The NEWID() function generates a new globally unique identifier value (GUID) and can be used in an ORDER BY clause to return the table's records in a random order.

настроить SqlDataSource для возврата одной, случайным образом выбранной записиConfigure the SqlDataSource to Return a Single, Randomly Selected Record

Рис. 04. Настройка SqlDataSource для возврата одной и случайной выбранной записи (щелкните, чтобы просмотреть изображение с полным размером)Figure 04: Configure the SqlDataSource to Return a Single, Randomly Selected Record (Click to view full-size image)

После завершения работы мастера Visual Studio создает BoundField для двух столбцов, возвращаемых приведенным выше запросом.After completing the wizard, Visual Studio creates a BoundField for the two columns returned by the above query. На этом этапе декларативная разметка страницы должна выглядеть следующим образом:At this point your page's declarative markup should look similar to the following:

<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 при просмотре в браузере.Figure 5 shows the ShowRandomProduct.aspx page when viewed through a browser. Нажмите кнопку Обновить в браузере, чтобы перезагрузить страницу. Вы должны увидеть значения ProductName и UnitPrice для новой записи, выбранной случайным образом.Click your browser's Refresh button to reload the page; you should see the ProductName and UnitPrice values for a new randomly selected record.

отображается имя и цена случайного продуктаA Random Product's Name and Price is Displayed

Рис. 05. отображается имя и цена произвольного продукта (щелкните, чтобы просмотреть изображение с полным размером)Figure 05: A Random Product's Name and Price is Displayed (Click to view full-size image)

Автоматическое отображение нового продукта каждые 15 секундAutomatically Displaying a New Product Every 15 Seconds

Платформа ASP.NET AJAX содержит элемент управления Timer, выполняющий обратную передачу в указанное время. при обратной передаче возникает событие Tick таймера.The ASP.NET AJAX framework includes a Timer control that performs a postback at a specified time; on postback the Timer's Tick event is raised. Если элемент управления Timer помещается в UpdatePanel, он запускает частичную обратную передачу страницы, в которой мы можем повторно привязать данные к элементу DetailsView для вывода нового продукта, выбранного случайным образом.If the Timer control is placed within an UpdatePanel it triggers a partial page postback, during which we can rebind the data to the DetailsView to display a new randomly selected product.

Для этого перетащите таймер из панели элементов в элемент UpdatePanel.To accomplish this, drag a Timer from the Toolbox and drop it into the UpdatePanel. Измените ID таймера с Timer1 на ProductTimer и его свойство Interval с 60000 на 15000.Change the Timer's ID from Timer1 to ProductTimer and its Interval property from 60000 to 15000. Свойство Interval указывает количество миллисекунд между обратными передачами; Установка значения 15000 приводит к тому, что таймер будет запускать частичную обратную передачу страницы каждые 15 секунд.The Interval property indicates the number of milliseconds between postbacks; setting it to 15000 causes the Timer to trigger a partial page postback every 15 seconds. На этом этапе декларативная разметка таймера должна выглядеть следующим образом:At this point your Timer's declarative markup should look similar to the following:

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

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

Создайте обработчик событий для события Tick таймера.Create an event handler for the Timer's Tick event. В этом обработчике событий необходимо повторно привязать данные к элементу DetailsView, вызвав метод DataBind DetailsView.In this event handler we need to rebind the data to the DetailsView by calling the DetailsView's DataBind method. Это указывает элементу DetailsView на необходимость повторного извлечения данных из элемента управления источником данных, который выбирает и отображает новую запись, выбранную случайным образом (как при повторной загрузке страницы путем нажатия кнопки "Обновить" в браузере).Doing so instructs the DetailsView to re-retrieve the data from its data source control, which will select and display a new randomly selected record (just like when reloading the page by clicking the browser's Refresh button).

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

Это все.That's all there is to it! Снова перейдите на страницу в браузере.Revisit the page through a browser. Изначально отображаются сведения о произвольном продукте.Initially, a random product's information is displayed. Если вы проследите за экраном, вы заметите, что спустя 15 секунд сведения о новом продукте волшебно заменяют существующий экран.If you patiently watch the screen you'll notice that, after 15 seconds, information about a new product magically replaces the existing display.

Чтобы лучше понять, что происходит здесь, добавим элемент управления Label к UpdatePanel, отображающий время последнего обновления экрана.To better see what's happening here, let's add a Label control to the UpdatePanel that displays the time the display was last updated. Добавьте в UpdatePanel веб-элемент управления Label, задайте для его ID значение LastUpdateTimeи очистите его свойство Text.Add a Label Web control within the UpdatePanel, set its ID to LastUpdateTime, and clear its Text property. Затем создайте обработчик событий для события Load UpdatePanel и отобразите текущее время в метке.Next, create an event handler for the UpdatePanel's Load event and display the current time in the Label. (Событие Load UpdatePanel срабатывает при каждой частичной или полной обратной передаче страницы.)(The UpdatePanel's Load event is fired on every full or partial page postback.)

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

После завершения этого изменения страница включает время загрузки текущего отображаемого продукта.With this change complete, the page includes the time the currently displayed product was loaded. На рис. 6 показана страница при первом посещении.Figure 6 shows the page when first visited. На рис. 7 показана страница 15 секунд после того, как элемент управления таймера имеет значение "tickd", а UpdatePanel обновлена для отображения сведений о новом продукте.Figure 7 shows the page 15 seconds later after the Timer control has "ticked" and the UpdatePanel has been refreshed to display information about a new product.

при загрузке страницы отображается случайным образом выбранный продуктA Randomly Selected Product is Displayed on Page Load

Рис. 06. при загрузке страницы отображается случайно выбранный продукт (щелкните, чтобы просмотреть изображение с полным размером)Figure 06: A Randomly Selected Product is Displayed on Page Load (Click to view full-size image)

раз в 15 секунд отображается новый случайный выбранный продуктEvery 15 Seconds a New Randomly Selected Product is Displayed

Рис. 07. каждые 15 секунд отображается новый продукт, выбранный случайным образом (щелкните, чтобы просмотреть изображение с полным размером)Figure 07: Every 15 Seconds a New Randomly Selected Product is Displayed (Click to view full-size image)

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

Помимо включения необходимого скрипта для клиентской библиотеки платформы ASP.NET AJAX, ScriptManager также может регистрировать пользовательские файлы JavaScript, ссылки на веб-службы с поддержкой сценариев, а также пользовательские службы проверки подлинности, авторизации и профилей.Along with including the necessary script for the ASP.NET AJAX framework Client Library, the ScriptManager can also register custom JavaScript files, references to script-enabled Web Services, and custom authentication, authorization, and profile services. Обычно такие настройки относятся к определенной странице.Usually such customizations are specific to a certain page. Однако если в ScriptManager на главной странице имеются ссылки на пользовательские файлы скриптов, ссылки на веб-службы или службы профилей, то они будут включены во все страницы веб-сайта.However, if the custom script files, Web Service references, or authentication, authorization, or profile services are referenced in the ScriptManager in the master page then they are included in all pages in the website.

Чтобы добавить настройки, связанные с ScriptManager, на отдельной странице, используйте элемент управления ScriptManagerProxy.To add ScriptManager-related customizations on a page-by-page basis use the ScriptManagerProxy control. Вы можете добавить ScriptManagerProxy на страницу содержимого, а затем зарегистрировать пользовательский файл JavaScript, ссылку на веб-службу, проверку подлинности, авторизацию или службу профиля из ScriptManagerProxy. Это влияет на регистрацию этих служб для конкретной страницы содержимого.You can add a ScriptManagerProxy to a content page and then register the custom JavaScript file, Web Service reference, or authentication, authorization, or profile service from the ScriptManagerProxy; this has the effect of registering these services for the particular content page.

Note

На странице ASP.NET может находиться только один элемент управления ScriptManager.An ASP.NET page can only have no more than one ScriptManager control present. Поэтому нельзя добавить элемент управления ScriptManager на страницу содержимого, если элемент управления ScriptManager уже определен на главной странице.Therefore, you cannot add a ScriptManager control to a content page if the ScriptManager control is already defined in the master page. Единственной целью ScriptManagerProxy является предоставление разработчикам возможности определять ScriptManager на главной странице, но по-прежнему иметь возможность добавлять настройки ScriptManager на отдельной странице.The sole purpose of the ScriptManagerProxy is to provide a way for developers to define the ScriptManager in the master page, but still have the ability to add ScriptManager customizations on a page-by-page basis.

Чтобы увидеть элемент управления ScriptManagerProxy в действии, добавим UpdatePanel в ShowRandomProduct.aspx, чтобы включить кнопку, использующую клиентский сценарий для приостановки или возобновления управления таймером.To see the ScriptManagerProxy control in action, let's augment the UpdatePanel in ShowRandomProduct.aspx to include a button that uses client-side script to pause or resume the Timer control. Элемент управления Timer имеет три метода на стороне клиента, которые можно использовать для достижения требуемой функциональности:The Timer control has three client-side methods that we can use to achieve this desired functionality:

  • _startTimer() — запуск элемента управления Timer_startTimer() - starts the Timer control
  • _raiseTick() — приводит к тому, что элемент управления "таймер" вызывает "Tick", таким образом отправляя и вызывая событие Tick на сервере._raiseTick() - causes the Timer control to "tick," thereby posting back and raising its Tick event on the server
  • _stopTimer() — останавливает элемент управления Timer._stopTimer() - stops the Timer control

Давайте создадим файл JavaScript с переменной с именем timerEnabled и функцией с именем ToggleTimer.Let's create a JavaScript file with a variable named timerEnabled and a function named ToggleTimer. Переменная timerEnabled указывает, включен ли элемент управления Timer в данный момент или отключен. значение по умолчанию — true.The timerEnabled variable indicates whether the Timer control is currently enabled or disabled; it defaults to true. Функция ToggleTimer принимает два входных параметра: ссылку на кнопку Пауза/возобновление и id значение элемента управления Timer на стороне клиента.The ToggleTimer function accepts two input parameters: a reference to the Pause/Resume button and the client-side id value of the Timer control. Эта функция переключает значение timerEnabled, получает ссылку на элемент управления Timer, запускает или останавливает таймер (в зависимости от значения timerEnabled) и обновляет отображаемый текст кнопки на "Пауза" или "возобновление".This function toggles the value of timerEnabled, gets a reference to the Timer control, starts or stops the Timer (depending on the value of timerEnabled), and updates the button's display text to "Pause" or "Resume". Эта функция будет вызываться при каждом нажатии кнопки приостановки или возобновления.This function will be called whenever the Pause/Resume button is clicked.

Начните с создания новой папки на веб-сайте с именем Scripts.Start by creating a new folder in the website named Scripts. Затем добавьте новый файл в папку Scripts с именем TimerScript.js типа JScript File.Next, add a new file to the Scripts folder named TimerScript.js of type JScript File.

добавить новый файл JavaScript в папку ScriptsAdd a New JavaScript File to the Scripts Folder

Рис. 08. Добавление нового файла JavaScript в папку Scripts (щелкните, чтобы просмотреть изображение с полным размером)Figure 08: Add a New JavaScript File to the Scripts Folder (Click to view full-size image)

на веб-сайт добавлен новый файл JavaScriptA New JavaScript File has been Added to the Website

Рис. 09. новый файл JavaScript добавлен на веб-сайт (щелкните, чтобы просмотреть изображение с полным размером)Figure 09: A New JavaScript File has been Added to the Website (Click to view full-size image)

Затем добавьте следующий ценария в файл TimerScript.js:Next, add the following scrip to the TimerScript.js file:

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.We now need to register this custom JavaScript file in ShowRandomProduct.aspx. Вернитесь к ShowRandomProduct.aspx и добавьте на страницу элемент управления ScriptManagerProxy. Задайте для его ID значение MyManagerProxy.Return to ShowRandomProduct.aspx and add a ScriptManagerProxy control to the page; set its ID to MyManagerProxy. Чтобы зарегистрировать пользовательский файл JavaScript, выберите элемент управления ScriptManagerProxy в конструкторе и перейдите к окно свойств.To register a custom JavaScript file select the ScriptManagerProxy control in the Designer and then go to the Properties window. Одно из свойств имеет заголовок Scripts.One of the properties is titled Scripts. При выборе этого свойства отображается редактор коллекции ScriptReference, показанный на рис. 10.Selecting this property displays the ScriptReference Collection Editor shown in Figure 10. Нажмите кнопку Добавить, чтобы включить новую ссылку на скрипт, а затем введите путь к файлу скрипта в свойстве Path: ~/Scripts/TimerScript.js.Click the Add button to include a new script reference and then enter the path to the script file in the Path property: ~/Scripts/TimerScript.js.

добавить ссылку на скрипт в элемент управления ScriptManagerProxyAdd a Script Reference to the ScriptManagerProxy Control

Рис. 10. Добавление ссылки на скрипт в элемент управления ScriptManagerProxy (щелкните, чтобы просмотреть изображение с полным размером)Figure 10: Add a Script Reference to the ScriptManagerProxy Control (Click to view full-size image)

После добавления ссылки на скрипт декларативная разметка элемента управления ScriptManagerProxy обновляется для включения коллекции <Scripts> с одной записью ScriptReference, как показано в следующем фрагменте разметки:After adding the script reference the ScriptManagerProxy control's declarative markup is updated to include a <Scripts> collection with a single ScriptReference entry, as the following snippet of markup illustrates:

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

Запись ScriptReference указывает ScriptManagerProxy включить ссылку на файл JavaScript в отрисованной разметке.The ScriptReference entry instructs the ScriptManagerProxy to include a reference to the JavaScript file in its rendered markup. Это значит, что при регистрации настраиваемого скрипта в ScriptManagerProxy выходные данные страницы, отображаемые ShowRandomProduct.aspx странице, теперь включают еще один тег <script src="url"></script>: <script src="Scripts/TimerScript.js" type="text/javascript"></script>.That is, by registering the custom script in the ScriptManagerProxy the ShowRandomProduct.aspx page's rendered output now includes another <script src="url"></script> tag: <script src="Scripts/TimerScript.js" type="text/javascript"></script>.

Теперь можно вызвать функцию ToggleTimer, определенную в TimerScript.js, из клиентского скрипта на странице ShowRandomProduct.aspx.We can now call the ToggleTimer function defined in TimerScript.js from the client script in the ShowRandomProduct.aspx page. Добавьте следующий код HTML в UpdatePanel:Add the following HTML within the UpdatePanel:

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

Появится кнопка с текстом "Пауза".This displays a button with the text "Pause". При каждом щелчке вызывается функция JavaScript ToggleTimer, передача ссылки на кнопку и id значение элемента управления Timer (ProductTimer).Whenever it is clicked, the JavaScript function ToggleTimer is called, passing in a reference to the button and the id value of the Timer control (ProductTimer). Обратите внимание на синтаксис получения значения id элемента управления Timer.Note the syntax for obtaining the id value of the Timer control. <%=ProductTimer.ClientID%> выдает значение свойства ClientID элемента управления Timer (ProductTimer).<%=ProductTimer.ClientID%> emits the value of the ProductTimer Timer control's ClientID property. В учебнике по именованию ИДЕНТИФИКАТОРов элементов управления на страницах содержимого [SKM3] мы обсуждали различия между значением ID на стороне сервера и результирующим idм на стороне клиента, а также ClientID возвращать idна стороне клиента.In the Control ID Naming in Content Pages[SKM3] tutorial we discussed the differences between the server-side ID value and the resulting client-side id value, and how ClientID returns the client-side id.

На рис. 11 показана эта страница при первом посещении через браузер.Figure 11 shows this page when first visited through a browser. В настоящее время таймер работает и обновляет отображаемые сведения о продукте каждые 15 секунд.The Timer is currently running and updates the displayed product information every 15 seconds. На рис. 12 показан экран после нажатия кнопки Пауза.Figure 12 shows the screen after the Pause button has been clicked. Нажатие кнопки приостановить останавливает таймер и обновляет текст кнопки на "возобновить".Clicking the Pause button stops the Timer and updates the button's text to "Resume". Сведения о продукте будут обновлены (и продолжают обновляться каждые 15 секунд) после нажатия кнопки возобновить.The product information will refresh (and continue to refresh every 15 seconds) once the user clicks Resume.

нажмите кнопку приостановить, чтобы остановить элемент управления Timer.Click the Pause Button to Stop the Timer Control

Рис. 11. Нажмите кнопку приостановить, чтобы остановить элемент управления Timer (щелкните, чтобы просмотреть изображение с полным размером)Figure 11: Click the Pause Button to Stop the Timer Control (Click to view full-size image)

чтобы перезапустить таймер, нажмите кнопку "возобновить".Click the Resume Button to Restart the Timer

Рис. 12. Нажмите кнопку "возобновить", чтобы перезапустить таймер (щелкните, чтобы просмотреть изображение с полным размером)Figure 12: Click the Resume Button to Restart the Timer (Click to view full-size image)

СводкаSummary

При создании веб-приложений с поддержкой AJAX, использующих платформу ASP.NET AJAX, важно, чтобы на каждую веб-страницу с поддержкой AJAX включался элемент управления ScriptManager.When building AJAX-enabled web applications using the ASP.NET AJAX framework it is imperative that every AJAX-enabled web page include a ScriptManager control. Чтобы упростить этот процесс, можно добавить ScriptManager на главную страницу, а не забывать добавлять ScriptManager на каждую страницу содержимого.To facilitate this process, we can add a ScriptManager to the master page rather than having to remember to add a ScriptManager to each and every content page. На шаге 1 показано, как добавить ScriptManager на главную страницу, когда шаг 2 рассматривал реализацию функций AJAX на странице содержимого.Step 1 showed how to add the ScriptManager to the master page while Step 2 looked at implementing AJAX functionality in a content page.

Если необходимо добавить пользовательские скрипты, ссылки на веб-службы с поддержкой скриптов или настроенные службы проверки подлинности, авторизации или профилей на определенную страницу содержимого, добавьте элемент управления ScriptManagerProxy на страницу содержимого, а затем настройте настройки.If you need to add custom scripts, references to script-enabled Web Services, or customized authentication, authorization, or profile services to a particular content page, add a ScriptManagerProxy control to the content page and then configure the customizations there. На шаге 3 вы узнаете, как использовать ScriptManagerProxy для регистрации пользовательского файла JavaScript на определенной странице содержимого.Step 3 examined how to use the ScriptManagerProxy to register a custom JavaScript file in a specific content page.

Поздравляем с программированием!Happy Programming!

Дополнительные материалыFurther Reading

Дополнительные сведения о разделах, обсуждаемых в этом руководстве, см. в следующих ресурсах:For more information on the topics discussed in this tutorial, refer to the following resources:

Об автореAbout the Author

Скотт Митчелл, автор нескольких книг по ASP/ASP. NET и основатель 4GuysFromRolla.com, работал с веб-технологиями майкрософт с 1998.Scott Mitchell, author of multiple ASP/ASP.NET books and founder of 4GuysFromRolla.com, has been working with Microsoft Web technologies since 1998. Скотт работает как независимый консультант, преподаватель и модуль записи.Scott works as an independent consultant, trainer, and writer. Его последняя книга — Sams обучать себя ASP.NET 3,5 за 24 часа.His latest book is Sams Teach Yourself ASP.NET 3.5 in 24 Hours. Скотт можно получить по адресу mitchell@4GuysFromRolla.com или через свой блог по адресу http://ScottOnWriting.NET.Scott can be reached at mitchell@4GuysFromRolla.com or via his blog at http://ScottOnWriting.NET.

Специальная благодарностьSpecial Thanks To

Эта серия руководств была рассмотрена многими полезными рецензентами.This tutorial series was reviewed by many helpful reviewers. Хотите ознакомиться с моими будущими статьями MSDN?Interested in reviewing my upcoming MSDN articles? Если да, расположите строку в mitchell@4GuysFromRolla.comIf so, drop me a line at mitchell@4GuysFromRolla.com