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

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

  • Статья

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

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

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

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

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

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

Создание веб-страницы с двумя независимо обновляемыми областями

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

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

    Урок UpdatePanel

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

  4. В окне «Свойства» присвойте свойству UpdateMode каждого из элементов управления UpdatePanel() значение Conditional.

    Урок UpdatePanel

  5. К одному из элементов управления UpdatePanel добавьте элемент Label, свойству Text которого присвойте значение Панель создана.

  6. К этому же элементу управления UpdatePanel добавьте элемент Button, свойству Text которого присвойте значение Обновить панель.

  7. Ко второму элементу управления UpdatePanel добавьте элемент Calendar.

    Урок UpdatePanel

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

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

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

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

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

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

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

  12. Выберите другой месяц в календаре.

    Значение времени на второй панели не изменяется. Содержимое панелей обновляется независимо.

    Данный пример сделан так, чтобы нагляднее показать область страницы, которую представляет элемент управления 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 = "Panel 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, #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 Created"></asp:Label><br />
                <asp:Button ID="Button1" runat="server" Text="Refresh Panel 1" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel2</legend>
                <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
                </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 = "Panel 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, #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 Created"></asp:Label><br />
                <asp:Button ID="Button1" runat="server" Text="Refresh Panel 1" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel2</legend>
                <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>

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

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

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

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

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

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

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

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

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

    Урок UpdatePanel

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

  5. Присвойте свойству Text кнопки значение Обновить внешнюю панель.

    Урок UpdatePanel

  6. В окне «Свойства» установите для свойства UpdateMode элемента управления UpdatePanel() значение Conditional.

    Урок UpdatePanel

  7. Перейдите к представлению исходного кода и добавьте следующий код в элемент <ContentTemplate> элемента <asp:UpdatePanel>.

    Last refresh <%=DateTime.Now.ToString() %> <br />

    Last refresh <%=DateTime.Now.ToString() %> <br />

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

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

  9. В окне «Свойства» установите для свойства UpdateMode вложенного элемента управления UpdatePanel() значение Conditional.

    Урок UpdatePanel

  10. Добавьте элемент управления Calendar внутри вложенного элемента UpdatePanel.

    Урок UpdatePanel

  11. Перейдите к представлению исходного кода и добавьте следующий код внутри элемента <ContentTemplate>, расположенного во вложенном элементе <asp:UpdatePanel>.

    Last refresh <%=DateTime.Now.ToString() %> <br />

    Last refresh <%=DateTime.Now.ToString() %> <br />

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

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

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

    <%@ 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 runat="server">
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel2  {
      position: relative;
      margin: 2% 5% 2% 5%;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager id="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel id="UpdatePanel1" UpdateMode="Conditional" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>Parent UpdatePanel</legend>
                Last refresh <%=DateTime.Now.ToString() %> <br />
                <asp:Button ID="Button1" runat="server" Text="Refresh Outer Panel" />
                <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                    <ContentTemplate>
                        <fieldset>
                        <legend>Nested UpdatePanel</legend>
                         Last refresh <%=DateTime.Now.ToString() %> <br />
                        <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
                        </fieldset>
                    </ContentTemplate>
                </asp:UpdatePanel>
                </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">


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel2  {
      position: relative;
      margin: 2% 5% 2% 5%;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager id="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel id="UpdatePanel1" UpdateMode="Conditional" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>Parent UpdatePanel</legend>
                Last refresh <%=DateTime.Now.ToString() %> <br />
                <asp:Button ID="Button1" runat="server" Text="Refresh Outer Panel" />
                <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                    <ContentTemplate>
                        <fieldset>
                        <legend>Nested UpdatePanel</legend>
                         Last refresh <%=DateTime.Now.ToString() %> <br />
                        <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
                        </fieldset>
                    </ContentTemplate>
                </asp:UpdatePanel>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>
    Bb398867.alert_note(ru-ru,VS.90).gifПримечание.

    Обновление элемента управления Calendar не выполняется. По умолчанию при отображении календаря выводятся текущие месяц и дата. Однако на этом этапе при нажатии кнопки отображаются ранее выбранные месяц и дата. Чтобы отобразить в календаре выбранные месяц и дату, на внутреннем уровне страницы используется состояние просмотра элемента Calendar. На этом примере показано, что элемент управления UpdatePanel выполняет соответствующие действия, обеспечивающие перевод страницы в ожидаемое состоянии по завершении асинхронной обратной передачи. Чтобы проверить это, присвойте свойству EnableViewState элемента управления Calendar значение false и повторите описанные выше действия. В этом случае, если выполнен переход к любому другому месяцу, при нажатии кнопки всегда отображается текущий месяц.

Итог

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

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

См. также

Задачи

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

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

Использование элемента управления UpdatePanel ASP.NET с элементами управления с привязкой к данным