Usar el control UpdatePanel de ASP.NET con páginas maestras

Artículo
10/22/2014

Actualización: noviembre 2007

Cualquier página ASP.NET que incluye un control UpdatePanel también requiere un control ScriptManager. Para usar los controles UpdatePanel con páginas maestras, puede colocar un control ScriptManager en la página maestra. En este escenario, la página maestra proporciona un control ScriptManager para cada página de contenido. Si no desea habilitar actualizaciones parciales de página para las páginas de contenido individuales, puede deshabilitarlas para ellas.

También puede colocar el control ScriptManager en cada página de contenido. Por ejemplo, podría hacerlo si sólo algunas de las páginas de contenido van a contener controles UpdatePanel.

Requisitos previos

Para implementar los procedimientos en su propio entorno de desarrollo, necesitará:

Visual Web Developer Express o Microsoft Visual Studio 2005.
Un sitio web ASP.NET habilitado para AJAX.

Para agregar un control UpdatePanel a una página de contenido

Cree una nueva página maestra y cambie a la vista Diseño.
En la ficha Extensiones AJAX del cuadro de herramientas, haga doble clic en el control ScriptManager para agregarlo a la página. Asegúrese de que agrega el control ScriptManager fuera del control ContentPlaceHolder.
Fuera del control ContentPlaceHolder, agregue el texto Master Page.
Desde la ficha HTML del cuadro de herramientas, arrastre un elemento Regla horizontal después del texto.
Crear una página de contenido para la página maestra

En el Explorador de soluciones, haga clic con el botón secundario en el nombre del proyecto y haga clic en Agregar nuevo elemento. En el cuadro de diálogo Agregar nuevo elemento, active la casilla Seleccionar la página principal y, a continuación, haga clic en Aceptar.
Dentro del control Content, escriba el texto Content Page y, a continuación, en el cuadro de herramientas agregue un control UpdatePanel.
Agregue un control Calendar dentro del control UpdatePanel.
Guarde los cambios y presione CTRL+F5 para ver la página en un explorador.

Haga clic en los controles de mes siguiente y mes anterior en el calendario.

El calendario cambia sin actualizar la página entera. Este comportamiento es lo que espera cuando el calendario está dentro de un control UpdatePanel en una página que no está asociada a una página maestra.

El ejemplo se ha adaptado para mostrar de forma más visible la región de la página que el control UpdatePanel representa.

<%@ 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" >
        <contenttemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1" ></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" >
        <contenttemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1" ></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 >

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel in Master Pages</title>
</head>
<body>
    <form id="form1" >
    <div>
        Master Page<br />
        <hr />
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" >
        </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 >

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel in Master Pages</title>
</head>
<body>
    <form id="form1" >
    <div>
        Master Page<br />
        <hr />
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" >
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

Actualizar el control UpdatePanel desde la página maestra

En esta parte del tutorial agregará controles a la página maestra que generan una devolución de datos asincrónica y, a continuación, actualizan el control UpdatePanel en la página de contenido.

Para habilitar las actualizaciones parciales de página en todas las páginas de contenido

En la página maestra, cambie a la vista Diseño.
Agregue texto y dos botones después del control ScriptManager en la página maestra.
Establezca el identificador de un botón en DecrementButton y su valor Text en "-". Establezca el identificador del otro botón en IncrementButton y su valor Text en "+".

Los botones incrementarán y disminuirán en la página de contenido la fecha seleccionada en el calendario.
Seleccione el botón + (más) y, a continuación, en la barra de herramientas de la ventana Propiedades, haga clic en el botón Eventos y escriba MasterButton_Click en el cuadro Haga clic en.
Repita el paso anterior para el botón - (menos).
Haga doble clic en la página fuera de los controles para crear un controlador de eventos Page_Load.

Agregue el código siguiente en el controlador para registrar los dos botones como controles de devolución de datos asincrónica:

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);
}

Agregue el código siguiente para crear un controlador Click denominado 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;
}

Agregue el código siguiente para crear una propiedad pública denominada Offset en la página maestra que realice el seguimiento de la diferencia entre la fecha de hoy y la fecha seleccionada.

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;}
}

En la página de contenido, cambie a la vista Diseño y haga doble clic en el control Calendar para crear un controlador de eventos para el evento SelectionChanged.

Agregue el código siguiente al controlador de eventos SelectionChanged para establecer la propiedad Offset cuando el usuario selecciona una fecha.

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;
}

Cambie a la página de contenido y agregue un controlador de eventos Page_Load que establezca la fecha seleccionada del calendario en la fecha actual.

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;
}

Agregue una directiva @ MasterType a la página, para poder hacer referencia a la propiedad Offset de la página maestra como una propiedad con establecimiento inflexible de tipos.
```
<%@ MasterType VirtualPath="MasterPage.master" %>
```
```
<%@ MasterType VirtualPath="MasterPage.master" %>
```
En la página de contenido, cambie a la vista Diseño y seleccione el control UpdatePanel.
En la ventana Propiedades, establezca la propiedad UpdatePanelUpdateMode en Conditional.
Guarde los cambios y presione CTRL+F5 para ver la página en un explorador.
Haga clic en los controles de mes siguiente y mes anterior en el calendario.

El calendario cambia sin actualizar la página entera.

Seleccione una fecha en el calendario y, a continuación, haga clic en los botones de la página maestra para cambiar la fecha seleccionada.

Estos cambios se producen sin actualizar la página entera.

El ejemplo se ha adaptado para mostrar de forma más visible la región de la página que el control UpdatePanel representa.

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

<script >
    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"  UpdateMode="Conditional">
        <ContentTemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1"  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 >
    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"  UpdateMode="Conditional">
        <ContentTemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1"  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 >
    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" >
    <title>UpdatePanel in Master Pages</title>
</head>
<body>
    <form id="form1" >
    <div>
        Master Page<br />
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        Change date &nbsp;
        <asp:Button ID="DecrementButton"  Text="-" OnClick="MasterButton_Click" />
        <asp:Button ID="IncrementButton"  Text="+" OnClick="MasterButton_Click" />
        <hr />
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" >
        </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 >
    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" >
    <title>UpdatePanel in Master Pages</title>
</head>
<body>
    <form id="form1" >
    <div>
        Master Page<br />
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        Change date &nbsp;
        <asp:Button ID="DecrementButton"  Text="-" OnClick="MasterButton_Click" />
        <asp:Button ID="IncrementButton"  Text="+" OnClick="MasterButton_Click" />
        <hr />
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" >
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

Deshabilitar las actualizaciones parciales de página en una página de contenido

Si agrega un control ScriptManager a una página maestra, de forma predeterminada las actualizaciones parciales de página están habilitadas para todas las páginas de contenido. Si no desea habilitar las actualizaciones parciales para una página de contenido individual, puede deshabilitar esa función. Podría hacer esto es si su página de contenido contiene controles personalizados que no son compatibles con las actualizaciones parciales de página.

Para deshabilitar las actualizaciones parciales de página en una página de contenido

En la página de contenido, cree un controlador para el evento Init de la página que establezca la propiedad EnablePartialRendering del control ScriptManager en false.

Debe cambiar el estado de la propiedad EnablePartialRendering durante el evento Init de la página de contenido o antes de que se produzca.

Revisión

Este tutorial muestra cómo usar un control UpdatePanel en páginas maestras. Si hay un control ScriptManager en la página maestra, puede usar los controles UpdatePanel en páginas de contenido sin declarar un control ScriptManager en la página de contenido.

Para deshabilitar la representación parcial de páginas en páginas de contenido individuales cuya página maestra tenga habilitada la representación, deshabilite mediante programación la representación parcial para la página de contenido.

Vea también

Compartir a través de

Usar el control UpdatePanel de ASP.NET con páginas maestras

Requisitos previos

Para agregar un control UpdatePanel a una página de contenido

Actualizar el control UpdatePanel desde la página maestra

Para habilitar las actualizaciones parciales de página en todas las páginas de contenido

Deshabilitar las actualizaciones parciales de página en una página de contenido

Para deshabilitar las actualizaciones parciales de página en una página de contenido

Revisión

Vea también

Tareas

Conceptos

Referencia

Recursos adicionales