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

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

  • Статья

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

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

В этом разделе содержатся следующие сведения:

  • Сценарии

  • Базовые сведения

  • Примеры кода

  • Ссылки на классы

Сценарии

Элемент управления UpdateProgress помогает разрабатывать более наглядный пользовательский интерфейс, когда веб-страница содержит один или несколько элементов управления UpdatePanel для частичной отрисовки страницы. Если частичное обновление страницы выполняется медленно, можно использовать элемент управления UpdateProgress для предоставления визуальной обратной связи о состоянии обновления. На странице можно разместить несколько элементов управления UpdateProgress, каждый из которых будет сопоставлен с отдельным элементом управления UpdatePanel. Кроме того, можно использовать один элемент управления UpdateProgress и сопоставить его со всеми элементами управления UpdatePanel на странице.

Базовые сведения

Элемент управления UpdateProgress отрисовывает элемент <div>, отображаемый или скрытый в зависимости от того, вызвал ли сопоставленный элемент управления UpdatePanel асинхронную обратную передачу. Для отрисовки начальной страницы или синхронной обратной передачи элемент управления UpdateProgress не отображается.

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

Элемент управления UpdateProgress сопоставляется с элементом управления UpdatePanel с помощью задания свойства AssociatedUpdatePanelID элемента управления UpdateProgress. Когда обратная передача происходит из элемента управления UpdatePanel, отображаются все сопоставленные элементы управления UpdateProgress. Если элемент управления UpdateProgress не сопоставлен с определенным элементом управления UpdatePanel, элемент управления UpdateProgress отображает ход выполнения любой асинхронной обратной передачи.

Если свойству ChildrenAsTriggers элемента управления UpdatePanel присвоено значение false и асинхронная обратная передача происходит из этого элемента управления UpdatePanel, любой сопоставленный элемент управления UpdateProgress будет отображен.

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

Используйте свойство ProgressTemplate, чтобы декларативно задать сообщение, отображаемое элементом управления UpdateProgress. Элемент <ProgressTemplate> может содержать HTML и разметку. В следующем примере показано, как задать сообщение для элемента управления UpdateProgress.

<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
  An update is in progress...
</ProgressTemplate>
</asp:UpdateProgress>

<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
  An update is in progress...
</ProgressTemplate>
</asp:UpdateProgress>

В следующем примере показан один элемент управления UpdateProgress, который отображает состояние обновления двух элементов управления 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 Button_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        System.Threading.Thread.Sleep(3000)
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>UpdateProgress Example</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2, #UpdateProgress1 { 
      border-right: gray 1px solid; border-top: gray 1px solid; 
      border-left: gray 1px solid; border-bottom: gray 1px solid;
    }
    #UpdatePanel1, #UpdatePanel2 { 
      width:200px; height:200px; position: relative;
      float: left; margin-left: 10px; margin-top: 10px;
     }
     #UpdateProgress1 {
      width: 400px; background-color: #FFC080; 
      bottom: 0%; left: 0px; position: absolute;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button1" runat="server" Text="Refresh Panel" OnClick="Button_Click" />    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2" runat="server" Text="Refresh Panel" OnClick="Button_Click"/>    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server">
    <ProgressTemplate>
      Update in progress...
    </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 Button_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>UpdateProgress Example</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2, #UpdateProgress1 { 
      border-right: gray 1px solid; border-top: gray 1px solid; 
      border-left: gray 1px solid; border-bottom: gray 1px solid;
    }
    #UpdatePanel1, #UpdatePanel2 { 
      width:200px; height:200px; position: relative;
      float: left; margin-left: 10px; margin-top: 10px;
     }
     #UpdateProgress1 {
      width: 400px; background-color: #FFC080; 
      bottom: 0%; left: 0px; position: absolute;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button1" runat="server" Text="Refresh Panel" OnClick="Button_Click" />    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2" runat="server" Text="Refresh Panel" OnClick="Button_Click"/>    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server">
    <ProgressTemplate>
      Update in progress...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </div>
    </form>
</body>
</html>

В следующем примере показаны два элемента управления UpdateProgress. Каждый из них отображает состояние обновления сопоставленного элемента управления 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 Button_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        System.Threading.Thread.Sleep(3000)
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>UpdateProgress Example</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2 { 
      width:200px; height:200px; position: relative;
      float: left; margin-left: 10px; margin-top: 10px;
      border-right: gray 1px solid; border-top: gray 1px solid; 
      border-left: gray 1px solid; border-bottom: gray 1px solid;
     }
     #UpdateProgress1, #UpdateProgress2 {
      width: 200px; background-color: #FFC080;
      position: absolute; bottom: 0px; left: 0px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button1" runat="server" Text="Refresh Panel" OnClick="Button_Click" />    
    <asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" runat="server">
    <ProgressTemplate>
      UpdatePanel1 updating...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2" runat="server" Text="Refresh Panel" OnClick="Button_Click"/>    
    <asp:UpdateProgress ID="UpdateProgress2" AssociatedUpdatePanelID="UpdatePanel2" runat="server">
    <ProgressTemplate>
      UpdatePanel2 updating...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </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 Button_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>UpdateProgress Example</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2 { 
      width:200px; height:200px; position: relative;
      float: left; margin-left: 10px; margin-top: 10px;
      border-right: gray 1px solid; border-top: gray 1px solid; 
      border-left: gray 1px solid; border-bottom: gray 1px solid;
     }
     #UpdateProgress1, #UpdateProgress2 {
      width: 200px; background-color: #FFC080;
      position: absolute; bottom: 0px; left: 0px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button1" runat="server" Text="Refresh Panel" OnClick="Button_Click" />    
    <asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" runat="server">
    <ProgressTemplate>
      UpdatePanel1 updating...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2" runat="server" Text="Refresh Panel" OnClick="Button_Click"/>    
    <asp:UpdateProgress ID="UpdateProgress2" AssociatedUpdatePanelID="UpdatePanel2" runat="server">
    <ProgressTemplate>
      UpdatePanel2 updating...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </ContentTemplate>
    </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

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

<%@ 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 Button_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        System.Threading.Thread.Sleep(3000)
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>UpdateProgress Example</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2, #UpdateProgress1 {
      border-right: gray 1px solid; border-top: gray 1px solid; 
      border-left: gray 1px solid; border-bottom: gray 1px solid;    
    }
    #UpdatePanel1, #UpdatePanel2 { 
      width:200px; height:200px; position: relative;
      float: left; margin-left: 10px; margin-top: 10px;
     }
     #UpdateProgress1 {
      width: 400px; background-color: #FFC080; 
      bottom: 0%; left: 0px; position: absolute;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <script type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);
    var postBackElement;
    function InitializeRequest(sender, args) {
       if (prm.get_isInAsyncPostBack())
       {
          args.set_cancel(true);
       }
       postBackElement = args.get_postBackElement();
       if (postBackElement.id == 'ButtonTrigger')
       {
         $get('UpdateProgress1').style.display = "block";
       }
    }
    function EndRequest (sender, args) {
       if (postBackElement.id == 'ButtonTrigger')
       {
         $get('UpdateProgress1').style.display = "none";    
       }
    }
    function AbortPostBack() {
      if (prm.get_isInAsyncPostBack()) {
           prm.abortPostBack();
      }        
    }
    </script>
    <asp:Button ID="ButtonTrigger" runat="server" Text="Refresh Panel 1" OnClick="Button_Click" />    
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    The trigger for this panel 
    causes the UpdateProgress to be displayed
    even though the UpdateProgress is associated
    with panel 2.     
    <br />
    </ContentTemplate>
    <Triggers>
      <asp:AsyncPostBackTrigger ControlID="ButtonTrigger" />
    </Triggers>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2" runat="server" Text="Refresh Panel" OnClick="Button_Click"/>    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel2" >
    <ProgressTemplate>
      Update in progress...
      <input type="button" value="stop" onclick="AbortPostBack()" />
    </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 Button_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>UpdateProgress Example</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2, #UpdateProgress1 {
      border-right: gray 1px solid; border-top: gray 1px solid; 
      border-left: gray 1px solid; border-bottom: gray 1px solid;    
    }
    #UpdatePanel1, #UpdatePanel2 { 
      width:200px; height:200px; position: relative;
      float: left; margin-left: 10px; margin-top: 10px;
     }
     #UpdateProgress1 {
      width: 400px; background-color: #FFC080; 
      bottom: 0%; left: 0px; position: absolute;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <script type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);
    var postBackElement;
    function InitializeRequest(sender, args) {
       if (prm.get_isInAsyncPostBack())
       {
          args.set_cancel(true);
       }
       postBackElement = args.get_postBackElement();
       if (postBackElement.id == 'ButtonTrigger')
       {
         $get('UpdateProgress1').style.display = "block";
       }
    }
    function EndRequest (sender, args) {
       if (postBackElement.id == 'ButtonTrigger')
       {
         $get('UpdateProgress1').style.display = "none";    
       }
    }
    function AbortPostBack() {
      if (prm.get_isInAsyncPostBack()) {
           prm.abortPostBack();
      }        
    }
    </script>
    <asp:Button ID="ButtonTrigger" runat="server" Text="Refresh Panel 1" OnClick="Button_Click" />    
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    The trigger for this panel 
    causes the UpdateProgress to be displayed
    even though the UpdateProgress is associated
    with panel 2.     
    <br />
    </ContentTemplate>
    <Triggers>
      <asp:AsyncPostBackTrigger ControlID="ButtonTrigger" />
    </Triggers>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2" runat="server" Text="Refresh Panel" OnClick="Button_Click"/>    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel2" >
    <ProgressTemplate>
      Update in progress...
      <input type="button" value="stop" onclick="AbortPostBack()" />
    </ProgressTemplate>
    </asp:UpdateProgress>
    </div>
    </form>
</body>
</html>

В предыдущем примере атрибут onClick элемента управления HtmlButton в элементе <ProgressTemplate> вызывает функцию AbortPostBack JavaScript. Дополнительную информацию см. описание метода abortPostBack и свойства isInAsyncPostBack, класса PageRequestManager.

Задание макета содержимого

Когда свойству DynamicLayout присвоено значение true, то изначально элемент управления UpdateProgress не занимает место при отображении веб-страниц. Вместо этого, страница динамически изменяется, чтобы отобразить содержимое элемента управления UpdateProgress, когда это необходимо. Для поддержки динамического отображения элемент управления отрисовывается как элемент <div>, у которого свойству стиля display изначально присвоено значение none.

Когда свойству DynamicLayout присвоено значение false, элемент управления UpdateProgress занимает место при отображении страницы, даже если он невидим. В этом случае свойству стиля display элемента <div> для элемента управления присваивается значение block, а для visibility изначально задается значение hidden.

Помещение элементов управления UpdateProgress на страницу

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

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

Задание времени отображаемых элементов управления UpdateProgress

Временем отображения элемента управления UpdateProgress можно программно управлять с помощью событий beginRequest JavaScriptendRequest JavaScript класса PageRequestManager. В обработчике событий beginRequest, можно отобразить элемент DOM, который представляет элемент управления UpdateProgress. В обработчике событий endRequest можно скрыть этот элемент.

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

  • По время обратной передачи из элемента управления, зарегистрированного как триггер асинхронной обратной передачи для панели обновления, с которым не сопоставлен элемент управления UpdateProgress.

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

Примеры кода

Следующие разделы содержат примеры кода, в которых показано создание и использование элементов управления [T:System.Web.UI.]UpdateProgress.

Учебники

Ссылки на классы

В следующей таблице перечислены основные классы, предназначенные для работы с классом [T:System.Web.UI.]UpdateProgress.

Класс

Описание

UpdateProgress

Обеспечивает визуальную обратную связь в обозревателе при обновлении содержимого элемента управления UpdatePanel.

UpdatePanel

Определяет части веб-страницы, которые могут участвовать в частичном обновлении страницы.

ScriptManager

Управляет частичной отрисовкой страниц. Элемент управления ScriptManager регистрирует компоненты сценариев для отправки в обозреватель и переопределяет отрисовку страницы, чтобы отрисовка выполнялась только для указанных областей страницы.

PageRequestManager

Координирует частичную отрисовку страниц в обозревателе. Класс PageRequestManager асинхронно обменивается данными с сервером и предоставляет события и методы для разработки пользовательских клиентских сценариев.

Дополнительные подразделы

Общие сведения о жизненном цикле веб-страниц ASP.NET

См. также

Задачи

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

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

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

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

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