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

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

  • Статья

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

В этом руководстве описывается реализация поддержки частичного обновления веб-страницы с помощью двух серверных элементов управления ASP.NET AJAX: ScriptManager и UpdatePanel. При использовании этих элементов управления не требуется обновление всей страницы при каждом выполнении обратной передачи, что позволяет повысить эффективность пользовательского интерфейса. Дополнительные сведения о частичном обновлении страницы см. в разделе Общие сведения о частичной отрисовке страниц.

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

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

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

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

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

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

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

    Урок UpdatePanel

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

    Урок UpdatePanel

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

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

    Убедитесь, что элементы управления Label и Button помещены в элемент управления UpdatePanel.

  5. Присвойте свойству Text элемента Label значение Панель создана.

    Урок UpdatePanel

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

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

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = "Refreshed at " & _
        DateTime.Now.ToString()
End Sub

    protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = "Refreshed at " +
        DateTime.Now.ToString();
}

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

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

    Обратите внимание, что в панели отображается текст, соответствующий последнему времени обновления содержимого панели. Отображаемый текст задается в обработчике событий 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)
        Label1.Text = "Refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</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="Panel created."></asp:Label><br />
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
                </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)
    {
        Label1.Text = "Refreshed at " +
            DateTime.Now.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="padding-top: 10px">
        <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="Panel created."></asp:Label><br />
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        </div>

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

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

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

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

Демонстрация преимуществ использования элемента управления UpdatePanel

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

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

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

    Урок UpdatePanel

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

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

    Убедитесь, что элемент управления Calendar размещается внутри элемента UpdatePanel.

    Урок UpdatePanel

  5. Щелкните вне элемента управления UpdatePanel и добавьте на страницу второй элемент Calendar.

    Этот элемент управления не входит в состав элемента UpdatePanel.

    Урок UpdatePanel

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

  7. Перейдите к предыдущему или следующему месяцу в календаре, расположенном внутри элемента управления UpdatePanel.

    Отображаемое название месяца изменяется без обновления страницы целиком.

  8. Перейдите к предыдущему или следующему месяцу в календаре, расположенном вне элемента управления UpdatePanel.

    Выполняется обновление страницы целиком.

    В этом примере реализуется эффективное отображение области страницы, которую представляет элемент управления 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">

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </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:Calendar ID="Calendar1" runat="server"></asp:Calendar>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        <asp:Calendar ID="Calendar2" runat="server"></asp:Calendar>    
    </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">

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </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:Calendar ID="Calendar1" runat="server"></asp:Calendar>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        <asp:Calendar ID="Calendar2" runat="server"></asp:Calendar>    
    </div>
    </form>
</body>
</html>

Обновление элемента управления UpdatePanel с помощью внешней кнопки

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

Также можно настроить обновление только панели элементов при нажатии элемента управления, расположенного вне ее.

Обновление элемента управления UpdatePanel с помощью внешней кнопки

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

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

    Урок UpdatePanel

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

  4. Установите для свойства Text метки значение Панель создана.

    Урок UpdatePanel

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

    Урок UpdatePanel

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

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

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = "Refreshed at " & _
        DateTime.Now.ToString()
End Sub

    protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = "Refreshed at " +
        DateTime.Now.ToString();
}

  8. Переключитесь в представление конструирования, выберите элемент UpdatePanel и откройте окно Свойства.

    Урок UpdatePanel

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

    Если окно Свойства не отображается, нажмите клавишу F4.

  9. В поле Триггеры дважды щелкните кнопку с многоточием (…).

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

    Урок UpdatePanel

  10. Нажмите кнопку Добавить, чтобы добавить новый триггер.

  11. В раскрывающемся списке поля ControlID свойств триггера выберите Button1.

    Урок UpdatePanel

    В этом примере свойство EventName триггера не задается. В этом случае используемое по умолчанию событие кнопки (событие Click) вызывает обновление элемента управления UpdatePanel.

  12. В редакторе коллекции нажмите кнопку ОК.

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

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

    В панели отображается текст, соответствующий времени обновления содержимого панели.

  15. Нажмите кнопку несколько раз.

    Отображаемое значение времени изменяется без обновления всей страницы.

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

    В этом примере реализуется эффективное отображение области страницы, которую представляет элемент управления 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)
        Label1.Text = "Refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </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="Panel created."></asp:Label><br />
                </fieldset>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /></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)
    {
        Label1.Text = "Refreshed at " +
            DateTime.Now.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </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="Panel created."></asp:Label><br />
                </fieldset>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /></div>
    </form>
</body>
</html>

Обзор

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

На следующем этапе вы познакомитесь с порядком добавления на страницу нескольких элементов управления UpdatePanel. Дополнительные сведения см. в разделе Создание простой страницы ASP.NET с несколькими элементами управления UpdatePanel.

См. также

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

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

Ссылки

UpdatePanel

ScriptManager