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

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

  • Статья

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

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

Microsoft AJAX (библиотека) обеспечивает управление событиями во время существования клиентской страницы. Для этого реализуется обработка событий класса PageRequestManager клиента. В этом пошаговом руководстве описывается порядок использования событий beginRequest и pageLoaded для анимирования элемента управления UpdatePanel при выполнении асинхронной обратной передачи с помощью какого-либо элемента управления страницы. Событие beginRequest возникает до начала асинхронной передачи и передачи данных на сервер. Событие pageLoaded возникает в процессе обычной и асинхронной обратной передачи. Во время действия этого события доступны сведения о том, какие панели были созданы и обновлены в результате последней операции обратной передачи. (Для обычной обратной передачи возможно только создание панелей, в то время как для асинхронной — и создание, и обновление.)

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

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

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

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

Создание клиентского сценария для анимирования элемента управления UpdatePanel

В этой процедуре создается файл ECMAScript (JavaScript или JScript), в котором определяется класс анимации. Этот класс содержит метод, реализующий анимирование элемента объектной модели документа HTML. В обозревателе анимируемый элемент управления UpdatePanel представляется элементом div.

Создание клиентского сценария для анимирования элемента управления UpdatePanel

  1. Добавьте файл JScript с именем UpdatePanelAnimation.js на веб-узел ASP.NET с поддержкой AJAX.

  2. Добавьте в файл следующий код JavaScript:

    Type.registerNamespace("ScriptLibrary");
ScriptLibrary.BorderAnimation = function(startColor, endColor, duration) {
    this._startColor = startColor;
    this._endColor = endColor;
    this._duration = duration;
}
ScriptLibrary.BorderAnimation.prototype = {
    animatePanel: function(panelElement) {
        var s = panelElement.style;
        var startColor = this._startColor;
        var endColor = this._endColor;
        s.borderColor = startColor;
        window.setTimeout(
            function() {{ s.borderColor = endColor; }},
            this._duration
        );
    }
}
ScriptLibrary.BorderAnimation.registerClass('ScriptLibrary.BorderAnimation', null);

var panelUpdatedAnimation = new ScriptLibrary.BorderAnimation('blue', 'gray', 1000);
var postbackElement;

Sys.Application.add_load(ApplicationLoadHandler);
function ApplicationLoadHandler() {
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
}

function beginRequest(sender, args) {
    postbackElement = args.get_postBackElement();
}
function pageLoaded(sender, args) {
    var updatedPanels = args.get_panelsUpdated();
    if (typeof(postbackElement) === "undefined") {
        return;
    } 
    else if (postbackElement.id.toLowerCase().indexOf('animate') > -1) {
        for (i=0; i < updatedPanels.length; i++) {            
            panelUpdatedAnimation.animatePanel(updatedPanels[i]);
        }
    }

}
if(typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

    Type.registerNamespace("ScriptLibrary");
ScriptLibrary.BorderAnimation = function(startColor, endColor, duration) {
    this._startColor = startColor;
    this._endColor = endColor;
    this._duration = duration;
}
ScriptLibrary.BorderAnimation.prototype = {
    animatePanel: function(panelElement) {
        var s = panelElement.style;
        var startColor = this._startColor;
        var endColor = this._endColor;
        s.borderColor = startColor;
        window.setTimeout(
            function() {{ s.borderColor = endColor; }},
            this._duration
        );
    }
}
ScriptLibrary.BorderAnimation.registerClass('ScriptLibrary.BorderAnimation', null);

var panelUpdatedAnimation = new ScriptLibrary.BorderAnimation('blue', 'gray', 1000);
var postbackElement;

Sys.Application.add_load(ApplicationLoadHandler);
function ApplicationLoadHandler() {
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
}

function beginRequest(sender, args) {
    postbackElement = args.get_postBackElement();
}
function pageLoaded(sender, args) {
    var updatedPanels = args.get_panelsUpdated();
    if (typeof(postbackElement) === "undefined") {
        return;
    } 
    else if (postbackElement.id.toLowerCase().indexOf('animate') > -1) {
        for (i=0; i < updatedPanels.length; i++) {            
            panelUpdatedAnimation.animatePanel(updatedPanels[i]);
        }
    }

}
if(typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

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

    • Регистрация пространства имен ScriptLibrary посредством вызова метода registerNamespace.

    • Определение класса BorderAnimation в пространстве имен ScriptLibrary с использованием шаблона прототипа. Обработка анимации реализуется посредством метода animatePanel класса BorderAnimation.

    • Регистрация класса BorderAnimation посредством вызова метода registerClass.

    • Создание нового экземпляра класса BorderAnimation. В конструктор класса передаются три значения: цвет анимации, цвет по умолчанию, а также продолжительность отображения цвета анимации в миллисекундах.

    • Определение обработчика для события load класса Sys.Application. В свою очередь, в этом классе определяются обработчики событий beginRequest и pageLoaded класса PageRequestManager.

    • Сохранение имени элемента, вызвавшего обратную передачу, в обработчике событий beginRequest.

    • Выполнения анимирования в обработчике событий pageLoaded (если идентификатор элемента обратной передачи содержит слово «animate»).

Использование клиентского сценария с элементом управления UpdatePanel

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

Анимирование элемента управления UpdatePanel

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

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

    Урок UpdatePanel

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

    Урок UpdatePanel

  4. Щелкните внутри элемента управления UpdatePanel. Затем на вкладке Стандартные панели элементов дважды щелкните элемент управления Button, чтобы добавить его к элементу управления UpdatePanel. Повторите операцию, чтобы добавить к нему еще одну кнопку.

  5. Свойству Text первой кнопки присвойте значение Анимированное обновление. В качестве идентификатора этой кнопки задайте AnimateButton1.

  6. Свойству Text второй кнопки присвойте значение Неанимированное обновление. В качестве значения ID этой кнопки используйте заданное по умолчанию значение Button2.

    Урок UpdatePanel

  7. Перейдите к представлению исходного кода и добавьте следующие правила стиля в блок style элемента head страницы.

    <style type="text/css">
#UpdatePanel1 {
  width: 300px;
  height: 100px;
  border:solid 1px gray;
}    
</style>

    <style type="text/css">
#UpdatePanel1 {
  width: 300px;
  height: 100px;
  border:solid 1px gray;
}    
</style>

    Правила стиля определяют высоту, ширину и границы элемента div, отображаемого в элементе управления UpdatePanel.

  8. Добавьте следующий код в элемент ContentTemplate элемента asp:UpdatePanel:

    <%=DateTime.Now.ToString() %>

    <%=DateTime.Now.ToString() %>

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

  9. Перейдите к представлению конструирования и выберите элемент управления ScriptManager.

  10. В окне Свойства выберите свойство Сценарии и нажмите кнопку с многоточием (…), чтобы открыть диалоговое окно Редактор коллекции ScriptReference.

  11. Нажмите кнопку Добавить, чтобы добавить ссылку на сценарий.

  12. В свойстве Путь задайте ссылку на сценарий UpdatePanelAnimation.js (ранее созданный файл JavaScript).

    Урок UpdatePanel

    Для добавления ссылки на сценарий используется коллекция Scripts объекта ScriptManager, за счет чего обеспечивается загрузка сценария после загрузки кода, который использует Microsoft AJAX (библиотека).

  13. Нажмите кнопку ОК, чтобы закрыть диалоговое окно Редактор коллекции ScriptReference.

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

  15. Нажмите кнопку Обновить, чтобы обновить панель.

    Обратите внимание, что цвет границ панели изменяется постепенно.

    <%@ Page Language="VB" %>

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

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>UpdatePanel Animation Example</title>
    <style type="text/css">
    #UpdatePanel1 {
      width: 300px;
      height: 100px;
      border:solid 1px gray;
    }    
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
        <asp:ScriptReference Path="UpdatePanelAnimation.js" />
        </Scripts>
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <%=DateTime.Now.ToString() %>
                <asp:Button ID="AnimateButton1" runat="server" Text="Refresh with Animation" />
                <asp:Button ID="Button2" runat="server" Text="Refresh with no Animation" />
            </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">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>UpdatePanel Animation Example</title>
    <style type="text/css">
    #UpdatePanel1 {
      width: 300px;
      height: 100px;
      border:solid 1px gray;
    }    
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
        <asp:ScriptReference Path="UpdatePanelAnimation.js" />
        </Scripts>
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <%=DateTime.Now.ToString() %>
                <asp:Button ID="AnimateButton1" runat="server" Text="Refresh with Animation" />
                <asp:Button ID="Button2" runat="server" Text="Refresh with no Animation" />
            </ContentTemplate>
        </asp:UpdatePanel>

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

Итог

В этом пошаговом руководстве показан порядок анимирования элемента управления UpdatePanel при обновлении содержимого панели. В коде файла JavaScript реализуется анимирование HTML-элемента div, который отображается с помощью элемента управления UpdatePanel. Файл JavaScript добавляется в коллекцию Scripts элемента управления ScriptManager. Основные операции файла сценария определяются в обработчиках событий beginRequest и pageLoaded класса PageRequestManager.

См. также

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

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

Ссылки

Класс Sys.WebForms.PageRequestManager

Класс Sys.WebForms.PageLoadedEventArgs