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

Visual Studio 2010

Обновлен: Ноябрь 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="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="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 на странице содержимого.

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

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

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

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

    Урок UpdatePanel

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

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

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

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

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

    protected void Page_Load(object sender, EventArgs e)
    {
        ScriptManager1.RegisterAsyncPostBackControl(DecrementButton);
        ScriptManager1.RegisterAsyncPostBackControl(IncrementButton);
    }
    
    
    
  8. Добавьте следующий код для создания обработчика Click с именем MasterButton_Click:

    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 Int32 Offset
    {
        get
        { return (Int32)(ViewState["Offset"] ?? 0);}
        set
        { ViewState["Offset"] = value;}
    }
    
    
    
  10. На странице содержимого перейдите в представление конструктора и затем дважды щелкните элемент управления Calendar для создания обработчика событий для события SelectionChanged.

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

    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 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" %>
    
    
    
  14. На странице содержимого перейдите в представление конструктора и выберите элемент управления UpdatePanel.

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

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

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

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

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

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

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

    <%@ 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="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.

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

Показ: