Поделиться через

Знакомство с элементом управления UpdateProgress

  • Статья

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

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

Обязательные компоненты

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

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

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

Использование одного элемента управления UpdateProgress

Рассмотрим использование одного элемента UpdateProgress для индикации процесса выполнения всех частичных обновлений на странице.

Чтобы использовать один элемент управления UpdateProgress для всей страницы

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

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

  3. Дважды щелкните элемент управления UpdatePanel, чтобы добавить его на страницу.

    Урок UpdatePanel

  4. Дважды щелкните элемент управления UpdateProgress, чтобы добавить его на страницу.

  5. В элемент управления UpdateProgress добавьте текст Обработка....

    Урок UpdateProgress

  6. В элемент управления UpdatePanel добавьте элементы управления Label и Button.

  7. Присвойте свойству Text элемента управления Label значение Начальная страница отображена.

    Урок UpdateProgress

  8. Дважды щелкните элемент управления Button, чтобы добавить обработчик события Click для данной кнопки.

  9. Добавьте к обработчику Click следующий код, который искусственно создает трехсекундную задержку, а затем отображает текущее время.

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    ' Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000)
    Label1.Text = "Page refreshed at " & _
        DateTime.Now.ToString()
End Sub

    protected void Button1_Click(object sender, EventArgs e)
{
    // Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000);
    Label1.Text = "Page refreshed at " +
        DateTime.Now.ToString();       
}
    Bb386421.alert_note(ru-ru,VS.90).gifПримечание.

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

  10. Сохраните изменения и нажмите CTRL + F5 для просмотра страницы в обозревателе.

  11. Нажмите на кнопку.

    После небольшой задержки появится сообщение о ходе выполнения. По завершению работы обработчика события Click сообщение о ходе выполнения скрывается и обновляется значение времени, отображаемого в панели.

    Этот пример построен таким образом, чтобы более наглядно показать область страницы, представленную элементом управления UpdatePanel.

    <%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ' Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000)
        Label1.Text = "Page refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1" runat="server" Text="Initial page rendered."></asp:Label><br />
                <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
            <ProgressTemplate>
                Processing...
            </ProgressTemplate>
        </asp:UpdateProgress>

    </div>
    </form>
</body>
</html>

    <%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void Button1_Click(object sender, EventArgs e)
    {
        // Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000);
        Label1.Text = "Page refreshed at " +
            DateTime.Now.ToString();       
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1" runat="server" Text="Initial page rendered."></asp:Label><br />
                <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
            <ProgressTemplate>
                Processing...
            </ProgressTemplate>
        </asp:UpdateProgress>

    </div>
    </form>
</body>
</html>

Использование нескольких элементов управления UpdateProgress

Один элемент управления UpdateProgress на странице может отображать сообщение о ходе выполнения для всех элементов управления UpdatePanel, имеющихся на странице. Асинхронные обратные передачи, инициируемые элементом управления UpdatePanel, вызывают отображение сообщения элементом управления UpdateProgress. Обратные передачи из элементов управления, которые выступают для панели как триггеры, также приводят к отображению сообщения.

Можно связать элемент управления "Индикатор выполнения" UpdateProgress с одним элементом управления UpdatePanel, установив свойство AssociatedUpdatePanelID элемента управления "Индикатор выполнения". В этом случае элемент управления UpdateProgress отображает сообщение только при выполнении одной обратной передачи, инициируемой элементом управления UpdatePanel.

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

Чтобы использовать несколько элементов управления UpdateProgress на странице

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

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

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

    Урок UpdateProgress

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

  5. Присвойте свойству Text в обоих элементах управления Label значение Панель отображена.

    Урок UpdateProgress

  6. Дважды щелкните каждый элемент управления Button, чтобы добавить обработчик события Click для каждой кнопки.

  7. Добавьте к обработчику Click следующий код, который искусственно создает трехсекундную задержку, а затем отображает текущее время.

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    ' Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000)
    Label1.Text = "Page refreshed at " & _
        DateTime.Now.ToString()
End Sub

Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    ' Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000)
    Label1.Text = "Page refreshed at " & _
        DateTime.Now.ToString()
End Sub

    protected void Button1_Click(object sender, EventArgs e)
{
    // Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000);
    Label1.Text = "Page refreshed at " +
        DateTime.Now.ToString();       
}

protected void Button2_Click(object sender, EventArgs e)
{
    // Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000);
    Label2.Text = "Page refreshed at " +
        DateTime.Now.ToString();       

}

  8. Перейдите в режим конструктора.

  9. Щелкните внутри первого элемента UpdatePanel и добавьте элемент управления UpdateProgress.

  10. В элемент управления UpdateProgress добавьте текст Обновление Panel1.

    Таким образом устанавливается свойство ProgressTemplate.

  11. Выберите элемент управления UpdateProgress и в окне свойств присвойте свойству AssociatedUpdatePanelID значение UpdatePanel1.

    Урок UpdateProgress

  12. Щелкните внутри второго элемента управления UpdatePanel и добавьте второй элемент управления UpdateProgress.

  13. Задайте текст элемента управления UpdateProgress как Обновление Panel2 и установите его свойство [ P:System.Web.UI.UpdateProgress.AssociatedUpdatePanelID в ]UpdatePanel2.

    Урок UpdateProgress

  14. Сохраните изменения и нажмите CTRL + F5 для просмотра страницы в обозревателе.

  15. Щелкните кнопку в первой панели.

    После небольшой задержки появится сообщение о ходе выполнения, связанное с первой панелью. Другой элемент управления UpdateProgress не отображается.

  16. Щелкните кнопку во второй панели.

    Выводится сообщение о ходе выполнения, связанное со второй панелью.

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

    По умолчанию запуск новой асинхронной обратной передачи в то время, пока предыдущая находится в процессе выполнения, приводит к отмене первой обратной передачи. Дополнительные сведения см. в разделе Предоставление приоритета определенным асинхронным обратным запросам.

    Этот пример построен таким образом, чтобы более наглядно показать область страницы, представленную элементом управления UpdatePanel.

    <%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ' Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000)
        Label1.Text = "Page refreshed at " & _
            DateTime.Now.ToString()
    End Sub

    Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ' Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000)
        Label1.Text = "Page refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel1</legend>
                <asp:Label ID="Label1" runat="server" Text="Panel initially rendered."></asp:Label>
                <br />
                <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                    <ProgressTemplate>
                        Panel1 updating...
                    </ProgressTemplate>
                </asp:UpdateProgress>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel2</legend>
                <asp:Label ID="Label2" runat="server" Text="Panel initially rendered."></asp:Label>
                <br />
                <asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" />
                <asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2">
                    <ProgressTemplate>
                        Panel2 updating....
                    </ProgressTemplate>
                </asp:UpdateProgress>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
    </form>
</body>
</html>

    <%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void Button1_Click(object sender, EventArgs e)
    {
        // Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000);
        Label1.Text = "Page refreshed at " +
            DateTime.Now.ToString();       
    }

    protected void Button2_Click(object sender, EventArgs e)
    {
        // Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000);
        Label2.Text = "Page refreshed at " +
            DateTime.Now.ToString();       

    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel1</legend>
                <asp:Label ID="Label1" runat="server" Text="Panel initially rendered."></asp:Label>
                <br />
                <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                    <ProgressTemplate>
                        Panel1 updating...
                    </ProgressTemplate>
                </asp:UpdateProgress>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel2</legend>
                <asp:Label ID="Label2" runat="server" Text="Panel initially rendered."></asp:Label>
                <br />
                <asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" />
                <asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2">
                    <ProgressTemplate>
                        Panel2 updating....
                    </ProgressTemplate>
                </asp:UpdateProgress>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
    </form>
</body>
</html>

Итог

В этом руководстве были показаны два способа использования элемента управления UpdateProgress. Первый способ — добавление на страницу одного элемента управления UpdateProgress, не связанного с каким-либо конкретным элементом управления UpdatePanel. В этом случае элемент управления отображает сообщение о ходе выполнения для всех элементов управления UpdatePanel. Второй способ использования элемента управления "Индикатор выполнения" UpdateProgress заключается в том, чтобы добавить несколько таких элементов и связать каждый из них с различными элементами управления UpdatePanel.

См. также

Задачи

Знакомство с элементом управления UpdatePanel

Основные понятия

Общие сведения об элементе управления UpdateProgress

Общие сведения о частичной отрисовке страниц

Ссылки

UpdateProgress

UpdatePanel