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

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

  • Статья

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

В этом руководстве предлагается расширить элемент управления UpdateProgress, добавив к нему клиентские возможности, создав код ECMAScript (JavaScript). В этом коде используется класс PageRequestManager, являющийся частью Microsoft AJAX (библиотека). В элемент управления UpdateProgress добавляется кнопка, позволяющая пользователям отменить асинхронную обратную передачу. Кроме того, в рамках этого задания предлагается отобразить или скрыть сообщения о ходе выполнения операции, используя клиентский сценарий.

Для выполнения задания в этом разделе необходимо общее преставление об элементе управления UpdateProgress. В противном случае см. раздел Знакомство с элементом управления UpdateProgress.

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

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

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

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

Отмена асинхронной обратной передачи в клиентском сценарии

  1. Создайте новую веб-страницу ASP.NET и переключитесь в режим конструктора.

  2. На вкладке Расширения AJAX панели элементов дважды щелкните элементы управления ScriptManager, UpdatePanel и UpdateProgress для добавления одного экземпляра каждого из них на страницу.

    Урок UpdateProgress

  3. На вкладке Стандартные панели элементов добавьте элемент управления Label к элементу управления UpdatePanel и присвойте свойству Text метки значение Отображенная панель.

  4. Добавьте элемент управления Button к элементу управления UpdatePanel и присвойте его свойству Text значение Обновить.

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

  6. Из вкладки HTML панели элементов добавьте элемент управления HtmlButton к элементу управления UpdateProgress и присвойте его атрибуту Value значение Отмена.

    Урок UpdateProgress

  7. Дважды щелкните кнопку Обновить для добавления обработчика событий Click.

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

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    System.Threading.Thread.Sleep(3000)
    Label1.Text = DateTime.Now.ToString()
End Sub

    protected void Button1_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(3000);
    Label1.Text = DateTime.Now.ToString();
}
    Bb386518.alert_note(ru-ru,VS.90).gifПримечание.

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

  9. Под элементом <asp:ScriptManager> добавьте следующий сценарий:

    <script language="javascript" type="text/javascript">
<!-- 
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
    if (prm.get_isInAsyncPostBack()) {
      prm.abortPostBack();
    }
}
// -->
</script>

    <script language="javascript" type="text/javascript">
<!-- 
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
    if (prm.get_isInAsyncPostBack()) {
      prm.abortPostBack();
    }
}
// -->
</script>

    Сценарий возвращает текущий экземпляр класса PageRequestManager. Затем он создает функцию, вызывающую метод abortPostBack для прекращения асинхронной обратной передачи.

  10. Присвойте атрибуту onclick элемента управления HtmlButton значение CancelAsyncPostBack (это имя обработчика, созданного на предыдущем шаге).

    <input id="Button2" 
       type="button" 
       value="cancel" 
       onclick="CancelAsyncPostBack()" />

    <input id="Button2" 
       type="button" 
       value="cancel" 
       onclick="CancelAsyncPostBack()" />

  11. Добавьте следующий блок стиля в элемент <head>:

    <style type="text/css">    
#UpdatePanel1 {
  width:200px; height:100px;
  border: 1px solid gray;
}
#UpdateProgress1 {
  width:200px; background-color: #FFC080;
  bottom: 0%; left: 0px; position: absolute;
}
</style>

    <style type="text/css">
#UpdatePanel1 {
  width:200px; height:100px;
  border: 1px solid gray;
}
#UpdateProgress1 {
  width:200px; background-color: #FFC080;
  bottom: 0%; left: 0px; position: absolute;
}
</style>

    Параметры стиля настраивают отображение элемента управления UpdateProgress в левом нижнем углу окна обозревателя.

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

  13. Нажмите кнопку Обновить.

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

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

    Можно настроить время задержки, задавая свойство DisplayAfter. По умолчанию используется значение 500 миллисекунд.

  14. Нажмите кнопку Обновить еще раз и сразу же нажмите Отмена, чтобы остановить частичное обновление страницы.

    Обратите внимание, что время в 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)
        System.Threading.Thread.Sleep(3000)
        Label1.Text = DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">    
    #UpdatePanel1 {
      width:200px; height:100px;
      border: 1px solid gray;
    }
    #UpdateProgress1 {
      width:200px; 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 language="javascript" type="text/javascript">
        <!-- 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        function CancelAsyncPostBack() {
            if (prm.get_isInAsyncPostBack()) {
              prm.abortPostBack();
            }
        }
        // -->
        </script>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="Panel rendered."></asp:Label><br />
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="refresh" />
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
            <ProgressTemplate>
                Processing...
                <input id="Button2" 
                       type="button" 
                       value="cancel" 
                       onclick="CancelAsyncPostBack()" />
            </ProgressTemplate>
        </asp:UpdateProgress>
    </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)
    {
        System.Threading.Thread.Sleep(3000);
        Label1.Text = DateTime.Now.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 {
      width:200px; height:100px;
      border: 1px solid gray;
    }
    #UpdateProgress1 {
      width:200px; 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 language="javascript" type="text/javascript">
        <!-- 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        function CancelAsyncPostBack() {
            if (prm.get_isInAsyncPostBack()) {
              prm.abortPostBack();
            }
        }
        // -->
        </script>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="Panel rendered."></asp:Label><br />
                <asp:Button ID="Button2" runat="server" OnClick="Button1_Click" Text="refresh" />
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
            <ProgressTemplate>
                Processing...
                <input id="Button2" 
                       type="button" 
                       value="cancel" 
                       onclick="CancelAsyncPostBack()" />
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>

Отображение процесса обновления с помощью клиентского сценария

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

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

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

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

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

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

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

    Урок UpdateProgress

  3. Добавьте элемент управления Button в любое место вне элементов управления UpdatePanel и UpdateProgress.

  4. Присвойте свойству Text кнопки значение Trigger, а ее идентификатору значение Panel1Trigger.

    Урок UpdateProgress

  5. Выберите элемент управления UpdatePanel и в окне «Свойства» нажмите кнопку с многоточием (…) в поле свойства Triggers.

    Отображается диалоговое окно Редактор коллекции UpdatePanelTrigger.

  6. Создайте объект AsyncPostBackTrigger и присвойте его свойству ControlID значение Panel1Trigger.

    Урок UpdateProgress

  7. Нажмите ОК, чтобы закрыть редактор коллекции.

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

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

    Protected Sub Panel1Trigger_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    System.Threading.Thread.Sleep(3000)
    Label1.Text = DateTime.Now.ToString() & " - trigger"
End Sub

    protected void Panel1Trigger_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(3000);
    Label1.Text = DateTime.Now.ToString() + " - trigger";
}

  10. В режиме исходного кода добавьте следующий сценарий клиента под уже существующий на странице блок <script>.

    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 == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'block';                
    }
}
function EndRequest(sender, args) {
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'none';
    }
}

    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 == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'block';                
    }
}
function EndRequest(sender, args) {
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'none';
    }
}

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

    • Он определяет обработчик для события initializeRequest класса PageRequestManager. Код обработчика отменяет любую выполняемую асинхронную обратную передачу. В противном случае, если обратная передача инициируется в элементе Panel1Trigger<div>, то код отображает шаблон UpdateProgress.

    • Он определяет обработчик для события endRequest класса PageRequestManager. Если обратная передача инициируется в элементе Panel1Trigger<div>, то обработчик кода скрывает элемент управления ходом выполнения.

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

    <script language="javascript" type="text/javascript">
<!-- 
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
    if (prm.get_isInAsyncPostBack()) {
      prm.abortPostBack();
    }
}
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 == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'block';                
    }
}
function EndRequest(sender, args) {
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'none';
    }
}
// -->
</script>

    <script language="javascript" type="text/javascript">
<!-- 
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
    if (prm.get_isInAsyncPostBack()) {
      prm.abortPostBack();
    }
}
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 == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'block';                
    }
}
function EndRequest(sender, args) {
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'none';
    }
}
// -->
</script>

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

  12. Нажмите кнопку Обновить.

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

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

    Обратите внимание, что сообщение о ходе выполнения отображается.

    <%@ 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)
        System.Threading.Thread.Sleep(3000)
        Label1.Text = DateTime.Now.ToString()
    End Sub
    Protected Sub Panel1Trigger_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        System.Threading.Thread.Sleep(3000)
        Label1.Text = DateTime.Now.ToString() & " - trigger"
    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:200px; height:100px;
      border: 1px solid gray;
    }
    #UpdateProgress1 {
      width:200px; 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 language="javascript" type="text/javascript">
        <!-- 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        function CancelAsyncPostBack() {
            if (prm.get_isInAsyncPostBack()) {
              prm.abortPostBack();
            }
        }
        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 == 'Panel1Trigger') {
                $get('UpdateProgress1').style.display = 'block';                
            }
        }
        function EndRequest(sender, args) {
            if (postBackElement.id == 'Panel1Trigger') {
                $get('UpdateProgress1').style.display = 'none';
            }
        }
        // -->
        </script>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="Panel rendered."></asp:Label><br />
                <asp:Button ID="Button1" runat="server" Text="refresh" OnClick="Button1_Click" />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Panel1Trigger" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Panel1Trigger" runat="server" Text="Trigger" OnClick="Panel1Trigger_Click" />
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
                Processing...
                <input id="Button2" 
                       type="button" 
                       value="cancel"
                       onclick="CancelAsyncPostBack()" />
            </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)
    {
        System.Threading.Thread.Sleep(3000);
        Label1.Text = DateTime.Now.ToString();
    }
    protected void Panel1Trigger_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
        Label1.Text = DateTime.Now.ToString() + " - trigger";
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 {
      width:200px; height:100px;
      border: 1px solid gray;
    }
    #UpdateProgress1 {
      width:200px; 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 language="javascript" type="text/javascript">
        <!-- 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        function CancelAsyncPostBack() {
            if (prm.get_isInAsyncPostBack()) {
              prm.abortPostBack();
            }
        }
        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 == 'Panel1Trigger') {
                $get('UpdateProgress1').style.display = 'block';                
            }
        }
        function EndRequest(sender, args) {
            if (postBackElement.id == 'Panel1Trigger') {
                $get('UpdateProgress1').style.display = 'none';
            }
        }
        // -->
        </script>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="Panel rendered."></asp:Label><br />
                <asp:Button ID="Button1" runat="server" Text="refresh" OnClick="Button1_Click" />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Panel1Trigger" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Panel1Trigger" runat="server" Text="Trigger" OnClick="Panel1Trigger_Click" />
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
                Processing...
                <input id="Button2" 
                       type="button" 
                       value="cancel"
                       onclick="CancelAsyncPostBack()" />
            </ProgressTemplate>
        </asp:UpdateProgress>

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

Обзор

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

См. также

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

Работа с событиями класса PageRequestManager

Ссылки

Класс Sys.WebForms.PageRequestManager