Пошаговое руководство. Использование элемента управления ASP.NET Timer с несколькими элементами управления UpdatePanel

Visual Studio 2010

Обновлен: Ноябрь 2007

В этом пошаговом руководстве с помощью элемента управления Timer будет обновляться содержимое двух элементов управления UpdatePanel. Элемент управления Timer будет расположен вне этих двух элементов управления UpdatePanel и будет настроен как триггер для обеих панелей.

Для выполнения процедур, описанных в данном руководстве, необходимо следующее:

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

  • Веб-узел ASP.NET с поддержкой AJAX.

Обновление элементов управления UpdatePanel в определенные интервалы времени

  1. Создайте новую страницу и переключитесь в представление конструктора.

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

    Урок шага элемента управления таймером 1
  3. В панели элементов дважды щелкните элемент управления Timer, чтобы добавить его на веб-страницу.

    Урок шага элемента управления таймером 2
    Bb386404.alert_note(ru-ru,VS.100).gifПримечание.

    Элемент управления Timer может работать как триггер внутри или вне элемента управления UpdatePanel. В этом примере показано использование элемента управления Timer вне элемента управления UpdatePanel. Пример использования элемента управления Timer внутри элемента управления UpdatePanel см. в разделе Пошаговое руководство. Общие сведения об элементе управления Timer.

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

    Урок шага элемента управления таймером 3
  5. Снова дважды щелкните элемент управления UpdatePanel, чтобы добавить на страницу вторую панель, а затем установите ее свойство UpdateMode в значение Conditional.

    Урок шага элемента управления таймером 4
  6. Щелкните внутри элемента управления UpdatePanel с именем UpdatePanel1, а затем на вкладке Стандартные панели элементов дважды щелкните элемент управления Label, чтобы добавить его в элемент UpdatePanel1.

  7. Установите свойство Text в значение UpdatePanel1 еще не обновлена.

    Урок шага элемента управления таймером 5
  8. Добавьте элемент управления Label в элемент UpdatePanel2.

  9. Установите свойство Text этой второй метки в значение UpdatePanel2 еще не обновлена.

    Урок шага элемента управления таймером 6
  10. Установите свойство Interval элемента Timer в значение 10000.

    Свойство Interval определяется в миллисекундах, так что в результате установки для свойства Interval значения 10 000 миллисекунд элемент управления UpdatePanel будет обновляться каждые 10 секунд.

    Bb386404.alert_note(ru-ru,VS.100).gifПримечание.

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

  11. Дважды щелкните элемент управления Timer для создания обработчика событий Tick.

  12. Добавьте в обработчик код, который устанавливает текущее время для свойства Text элементов Label1 и Label2.

    public partial class _Default : System.Web.UI.Page 
    {
        protected void Page_Load(object sender, EventArgs e)
        {
    
        }
        protected void Timer1_Tick(object sender, EventArgs e)
        {
            Label1.Text = "UpdatePanel1 refreshed at: " +
              DateTime.Now.ToLongTimeString();
            Label2.Text = "UpdatePanel2 refreshed at: " +
              DateTime.Now.ToLongTimeString();
        }
    }
    
    
    
  13. Укажите Timer1 в качестве триггера для элементов управления UpdatePanel1 и UpdatePanel2, добавив элемент управления AsyncPostBackTrigger в оба элемента UpdatePanel. Можно сделать это декларативно, как показано в следующем коде:

    <Triggers>
      <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
    </Triggers>
    

    В следующем примере показана разметка для всей страницы:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <div>
                <asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="10000">
                </asp:Timer>
            </div>
            <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                </Triggers>
                <ContentTemplate>
                    <asp:Label ID="Label1" runat="server" Text="UpdatePanel1 not refreshed yet."></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>
            <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                </Triggers>
                <ContentTemplate>
                    <asp:Label ID="Label2" runat="server" Text="UpdatePanel2 not refreshed yet."></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>
    
        </form>
    </body>
    </html>
    
    
    
  14. Сохраните изменения и нажмите CTRL+F5 для просмотра страницы в обозревателе.

  15. Подождите не менее 10 секунд, чтобы элементы управления UpdatePanel успели обновиться.

    Обе панели показывают время обновления.

В данном пошаговом руководстве было показано включение частичного обновления страницы посредством использования элемента управления Timer с несколькими элементами управления UpdatePanel. Сначала необходимо добавить элемент управления ScriptManager, а затем — элементы управления UpdatePanel. Если настроить элемент Timer как триггер для панелей, то он обновляет содержимое этих панелей.

Сведения об использовании элемента управления Timer внутри элемента управления UpdatePanel см. в разделе Пошаговое руководство. Общие сведения об элементе управления Timer.

Показ: