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

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

  • Статья

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

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

Или же можно добавить элемент управления ScriptManager на каждую страницу содержимого. Это можно сделать, если только некоторые страницы содержимого будут иметь элементы управления UpdatePanel.

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

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

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

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

Добавление элемента управления UpdatePanel на страницу содержимого

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

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

  3. Вне элемента управления ContentPlaceHolder добавьте текст Master Page.

  4. С вкладки HTML панели элементов перетащите элемент Horizontal Rule и расположите его после текста.

    Урок UpdatePanel

  5. Создайте страницу содержимого для главной страницы.

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

  6. Внутри элемента управления Content введите текст Content Page, затем с панели элементов добавьте элемент управления UpdatePanel.

    Урок UpdatePanel

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

    Урок UpdatePanel

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

  9. Нажмите элементы управления перехода к следующему или предыдущему месяцу на календаре.

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

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

    <%@ Page Language="VB" MasterPageFile="MasterPage.master" Title="UpdatePanel in Master Pages" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    Content Page<br />
    <asp:UpdatePanel id="UpdatePanel1" runat="server">
        <contenttemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1" runat="server"></asp:Calendar>
        </fieldset>
        </contenttemplate>
    </asp:UpdatePanel>
</asp:Content>

    <%@ Page Language="C#" MasterPageFile="MasterPage.master" Title="UpdatePanel in Master Pages" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    Content Page<br />
    <asp:UpdatePanel id="UpdatePanel1" runat="server">
        <contenttemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1" runat="server"></asp:Calendar>
        </fieldset>
        </contenttemplate>
    </asp:UpdatePanel>
</asp:Content>

    <%@ Master 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 in Master Pages</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Master Page<br />
        <hr />
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

    <%@ Master 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 in Master Pages</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Master Page<br />
        <hr />
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

Обновление элемента UpdatePanel с главной страницы

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

Включение частичных обновлений для всех страниц содержимого

  1. На главной странице перейдите в представление конструктора.

  2. Добавьте текст и две кнопки после элемента управления ScriptManager на главной странице.

  3. Установите идентификатор одной кнопки на DecrementButton и значение Text на "-". Установите идентификатор другой кнопки на IncrementButton и значение Text на "+".

    Урок UpdatePanel

    Кнопки будут увеличивать и уменьшать выбранную дату в календаре страницы содержимого.

  4. Выберите кнопку + (плюс), затем в панели инструментов окна "Свойства" нажмите кнопку "События" и введите MasterButton_Click в поле Click.

    Урок UpdatePanel

  5. Повторите предыдущий шаг для кнопки - (минус).

  6. Дважды щелкните страницу вне элементов управления для создания обработчика событий Page_Load.

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

    Protected Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
    ScriptManager1.RegisterAsyncPostBackControl(DecrementButton)
    ScriptManager1.RegisterAsyncPostBackControl(IncrementButton)
End Sub

    protected void Page_Load(object sender, EventArgs e)
{
    ScriptManager1.RegisterAsyncPostBackControl(DecrementButton);
    ScriptManager1.RegisterAsyncPostBackControl(IncrementButton);
}

  8. Добавьте следующий код для создания обработчика Click с именем MasterButton_Click:

    Protected Sub MasterButton_Click(ByVal Sender As Object, ByVal E As EventArgs)

    Select Case Sender.ID

        Case "IncrementButton"
            Me.Offset = Me.Offset + 1
        Case "DecrementButton"
            Me.Offset = Me.Offset - 1
    End Select
    Dim upl As UpdatePanel
    upl = ContentPlaceHolder1.FindControl("UpdatePanel1")
    upl.Update()
    Dim cal As Calendar
    cal = ContentPlaceHolder1.FindControl("Calendar1")
    Dim newDateTime As DateTime
    newDateTime = DateTime.Today.Add(New TimeSpan(Offset, 0, 0, 0))
    cal.SelectedDate = newDateTime
End Sub

    protected void MasterButton_Click(object sender, EventArgs e)
{   
    switch (((Control)sender).ID)
    {
        case "IncrementButton":
            this.Offset = this.Offset + 1;
            break;
        case "DecrementButton":
            this.Offset = this.Offset - 1;
            break;
    }
    ((UpdatePanel)ContentPlaceHolder1.FindControl("UpdatePanel1")).Update();
    Calendar cal = ((Calendar)ContentPlaceHolder1.FindControl("Calendar1"));
    DateTime newDateTime = DateTime.Today.Add(new TimeSpan(Offset, 0, 0, 0));
    cal.SelectedDate = newDateTime;
}

  9. Добавьте следующий код для создания открытого свойства с именем Offset на главной странице, которое отслеживает разницу между сегодняшней и выбранной датами.

    Public Property Offset() As Integer
    Get
        If ViewState("Offset") Is Nothing Then
            Return 0
        Else : Return ViewState("Offset")
        End If
    End Get
    Set(ByVal value As Integer)
        ViewState("Offset") = value
    End Set
End Property

    public Int32 Offset
{
    get
    { return (Int32)(ViewState["Offset"] ?? 0);}
    set
    { ViewState["Offset"] = value;}
}

  10. На странице содержимого перейдите в представление конструктора и затем дважды щелкните элемент управления Calendar для создания обработчика событий для события SelectionChanged.

  11. Добавьте следующий код в обработчик событий SelectionChanged для установки свойства Offset, когда пользователь выбирает дату.

    Protected Sub Calendar1_SelectionChanged(ByVal Sender As Object, ByVal E As EventArgs)
    Dim selectedDate As DateTime
    selectedDate = Calendar1.SelectedDate
    Master.Offset = _
       Calendar1.SelectedDate.Subtract(DateTime.Today).Days

End Sub

    protected void Calendar1_SelectionChanged(object sender, 
    EventArgs e)
{
    DateTime selectedDate = Calendar1.SelectedDate;
    Master.Offset =
       ((TimeSpan)Calendar1.SelectedDate.Subtract(
       DateTime.Today)).Days;
}

  12. Перейдите на страницу содержимого и добавьте обработчик событий Page_Load, который устанавливает выбранную дату календаря как текущую.

    Protected Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
    Dim newDateTime As DateTime
    newDateTime = DateTime.Today.Add(New TimeSpan(Master.Offset, 0, 0, 0))
    Calendar1.SelectedDate = newDateTime
End Sub

    protected void Page_Load(object sender, EventArgs e)
{
    DateTime newDateTime = 
        DateTime.Today.Add(new 
        TimeSpan(Master.Offset, 0, 0, 0));
    Calendar1.SelectedDate = newDateTime;
}

  13. Добавьте директиву @ MasterType к странице, чтобы можно было ссылаться на свойство главной страницы Offset как на строго типизированное свойство.

    <%@ MasterType VirtualPath="MasterPage.master" %>

    <%@ MasterType VirtualPath="MasterPage.master" %>

  14. На странице содержимого перейдите в представление конструктора и выберите элемент управления UpdatePanel.

  15. В окне "Свойства" присвойте свойству UpdatePanelUpdateMode значение Conditional.

    Урок UpdatePanel

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

  17. Нажмите элементы управления перехода к следующему или предыдущему месяцу на календаре.

    Календарь изменяется, однако страница целиком не обновляется.

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

    Эти изменения происходят без обновления всей страницы.

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

    <%@ Page Language="VB" MasterPageFile="MasterPage.master" Title="UpdatePanel in Master Pages" %>
<%@ MasterType VirtualPath="MasterPage.master" %>

<script runat="server">
    Protected Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
        Dim newDateTime As DateTime
        newDateTime = DateTime.Today.Add(New TimeSpan(Master.Offset, 0, 0, 0))
        Calendar1.SelectedDate = newDateTime
    End Sub
    Protected Sub Calendar1_SelectionChanged(ByVal Sender As Object, ByVal E As EventArgs)
        Dim selectedDate As DateTime
        selectedDate = Calendar1.SelectedDate
        Master.Offset = _
           Calendar1.SelectedDate.Subtract(DateTime.Today).Days

    End Sub
</script>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    Content Page<br />
    <asp:UpdatePanel id="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1" runat="server" OnSelectionChanged="Calendar1_SelectionChanged"></asp:Calendar> 
        </fieldset>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

    <%@ Page Language="C#" MasterPageFile="MasterPage.master" Title="UpdatePanel in Master Pages" %>
<%@ MasterType VirtualPath="MasterPage.master" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        DateTime newDateTime = 
            DateTime.Today.Add(new 
            TimeSpan(Master.Offset, 0, 0, 0));
        Calendar1.SelectedDate = newDateTime;
    }
    protected void Calendar1_SelectionChanged(object sender, 
        EventArgs e)
    {
        DateTime selectedDate = Calendar1.SelectedDate;
        Master.Offset =
           ((TimeSpan)Calendar1.SelectedDate.Subtract(
           DateTime.Today)).Days;
    }
</script>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    Content Page<br />
    <asp:UpdatePanel id="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1" runat="server" OnSelectionChanged="Calendar1_SelectionChanged"></asp:Calendar> 
        </fieldset>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

    <%@ Master 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">
    Public Property Offset() As Integer
        Get
            If ViewState("Offset") Is Nothing Then
                Return 0
            Else : Return ViewState("Offset")
            End If
        End Get
        Set(ByVal value As Integer)
            ViewState("Offset") = value
        End Set
    End Property
    Protected Sub MasterButton_Click(ByVal Sender As Object, ByVal E As EventArgs)

        Select Case Sender.ID

            Case "IncrementButton"
                Me.Offset = Me.Offset + 1
            Case "DecrementButton"
                Me.Offset = Me.Offset - 1
        End Select
        Dim upl As UpdatePanel
        upl = ContentPlaceHolder1.FindControl("UpdatePanel1")
        upl.Update()
        Dim cal As Calendar
        cal = ContentPlaceHolder1.FindControl("Calendar1")
        Dim newDateTime As DateTime
        newDateTime = DateTime.Today.Add(New TimeSpan(Offset, 0, 0, 0))
        cal.SelectedDate = newDateTime
    End Sub
    Protected Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
        ScriptManager1.RegisterAsyncPostBackControl(DecrementButton)
        ScriptManager1.RegisterAsyncPostBackControl(IncrementButton)
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>UpdatePanel in Master Pages</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Master Page<br />
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        Change date &nbsp;
        <asp:Button ID="DecrementButton" runat="server" Text="-" OnClick="MasterButton_Click" />
        <asp:Button ID="IncrementButton" runat="server" Text="+" OnClick="MasterButton_Click" />
        <hr />
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

    <%@ Master 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">
    public Int32 Offset
    {
        get
        { return (Int32)(ViewState["Offset"] ?? 0);}
        set
        { ViewState["Offset"] = value;}
    }
    protected void MasterButton_Click(object sender, EventArgs e)
    {   
        switch (((Control)sender).ID)
        {
            case "IncrementButton":
                this.Offset = this.Offset + 1;
                break;
            case "DecrementButton":
                this.Offset = this.Offset - 1;
                break;
        }
        ((UpdatePanel)ContentPlaceHolder1.FindControl("UpdatePanel1")).Update();
        Calendar cal = ((Calendar)ContentPlaceHolder1.FindControl("Calendar1"));
        DateTime newDateTime = DateTime.Today.Add(new TimeSpan(Offset, 0, 0, 0));
        cal.SelectedDate = newDateTime;
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        ScriptManager1.RegisterAsyncPostBackControl(DecrementButton);
        ScriptManager1.RegisterAsyncPostBackControl(IncrementButton);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>UpdatePanel in Master Pages</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Master Page<br />
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        Change date &nbsp;
        <asp:Button ID="DecrementButton" runat="server" Text="-" OnClick="MasterButton_Click" />
        <asp:Button ID="IncrementButton" runat="server" Text="+" OnClick="MasterButton_Click" />
        <hr />
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

Отключение частичных обновлений для страницы содержимого

При добавлении элемента управления ScriptManager на главную страницу по умолчанию частичные обновления включены для всех страниц содержимого. Если частичные обновления страницы для отдельных страниц содержимого не нужны, то можно отключить эту функцию. Это можно сделать, если страница содержимого содержит пользовательские элементы управления, которые несовместимы с частичными обновлениями.

Отключение частичных обновлений для страницы содержимого

  • На странице содержимого создайте обработчик событий для события страницы Init, который присваивает свойству EnablePartialRendering элемента управления ScriptManager значение false.

    Состояние свойства EnablePartialRendering должно быть изменено во время или до события страницы содержимого Init.

Итог

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

Чтобы отключить частичную отрисовку страницы для отдельной страницы содержимого, частичная отрисовка главной страницы которой включена, необходимо отключить частичную отрисовку для страницы содержимого программными средствами.

См. также

Задачи

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

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

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

Общие сведения о главных страницах ASP.NET

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

Ссылки

UpdatePanel

ScriptManager