Realizar el almacenamiento en caché de fragmentos ASP.NET mediante Visual C# .NET

  • Artículo
  • Tiempo de lectura: 10 minutos

En este artículo se describe cómo realizar el almacenamiento en caché de fragmentos en ASP.NET mediante Visual C# .NET.

Versión del producto original:   Microsoft ASP.NET
Número KB original:   308378

Resumen

En este artículo se muestra cómo implementar el almacenamiento en caché de fragmentos en ASP.NET. En realidad, el almacenamiento en caché de fragmentos no almacena en caché los fragmentos de código de un formulario web directamente; El almacenamiento en caché de fragmentos hace referencia al almacenamiento en caché de controles de usuario individuales (.ascx) dentro de un formulario web. Cada control de usuario puede tener duraciones de caché independientes e implementaciones de cómo se va a aplicar el comportamiento de almacenamiento en caché. El código de ejemplo de este artículo ilustra cómo lograr esta funcionalidad.

El almacenamiento en caché de fragmentos es útil cuando solo necesita almacenar en caché un subconjunto de una página. Las barras de navegación, el encabezado y los pies de página son buenos candidatos para el almacenamiento en caché de fragmentos.

Requisitos

  • Windows 2000
  • Internet Information Server (IIS)
  • .NET Framework
  • ASP.NET

Crear una aplicación ASP.NET web con C# .NET

Los pasos siguientes muestran cómo crear una nueva aplicación ASP.NET web denominada FragmentCache.

  1. Abrir Visual Studio .NET

  2. En el menú Archivo, elija Nuevo y, a continuación, haga clic en Proyecto.

  3. En el cuadro de diálogo Nuevo Project, haga clic en Proyectos de visual C# en Tipos Project y, a continuación, haga clic ASP.NET aplicación web en Plantillas.

  4. En el cuadro Nombre, escriba FragmentCache. En el cuadro Ubicación, seleccione el servidor adecuado. Si usa el servidor local, puede dejar el nombre del servidor como http://localhost .

Crear los controles de usuario

En esta sección se proporciona el código de ejemplo y las explicaciones de cada control de usuario que usará en este artículo. Puede copiar y pegar el código de ejemplo en el archivo associated.ascx y la página de código subyacente como se describe.

Control de usuario 1 (FragmentCtrl1.ascx)

El siguiente control de usuario, FragmentCtrl1.ascx, es sencillo. FragmentCtrl1.ascx escribe la hora en que se produce la entrada de caché del elemento. Al igual que con todos los controles creados para este artículo, se proporciona una descripción básica para que el control sea más fácil distinguir la configuración y los comportamientos asociados en tiempo de ejecución en las secciones posteriores.

  1. En Visual Studio .NET, cree un nuevo control de usuario de la siguiente manera:

    1. En el Explorador de soluciones, haga clic con el botón secundario en el nodo del proyecto, elija Agregar y, a continuación, haga clic en Agregar control de usuario web.
    2. Asigne al control el nombre FragmentCtrl1.ascx y, a continuación, haga clic en Abrir.

  2. Asegúrese de que la pestaña Diseño está seleccionada. Haga clic y arrastre un control Etiqueta de formulario web desde la Web Forms del cuadro de herramientas y coloque el control Etiqueta en la página.

  3. Haga clic en el control Etiqueta. En el panel Propiedades del Visual Studio de desarrollo integrado de .NET (IDE), escriba CacheEntryTime en la propiedad ID y deje la propiedad Text en blanco.

  4. Cambie a la vista HTML y agregue la siguiente directiva a la parte superior de la @ OutputCache página:

    <%@ OutputCache Duration="40" VaryByParam="none"%>

  5. Haga clic con el botón secundario en el archivo .ascx y, a continuación, haga clic en Ver código para mostrar el origen de página de código subyacente.

  6. Agregue el siguiente código al Page_Load evento, que establece la CacheEntryTime propiedad de la Text etiqueta:

    private void Page_Load(object sender, System.EventArgs e)
{
    CacheEntryTime.Text ="FragmentCtrl1: " + DateTime.Now.TimeOfDay.ToString();
}

Control de usuario 2 (FragmentCtrl2.ascx)

Aunque simplemente puede crear otra versión del primer control con una duración de caché diferente para mostrar cómo varios controles de usuario pueden tener comportamientos independientes en la misma página, esta sección hace que el segundo control, FragmentCtrl2.ascx, sea más interesante. FragmentCtrl2.ascx se usa para introducir el atributo VaryByControl. VaryByControl permite realizar diferentes entradas de caché en función de los valores de un control especificado. Esta funcionalidad se hace mucho más clara en tiempo de ejecución en la siguiente sección.

  1. En Visual Studio .NET, cree un nuevo control de usuario de la siguiente manera:

    1. En el Explorador de soluciones, haga clic con el botón secundario en el nodo del proyecto, elija Agregar y, a continuación, haga clic en Agregar control de usuario web.
    2. Asigne al control el nombre FragmentCtrl2.ascx y, a continuación, haga clic en Abrir.

  2. Asegúrese de que la pestaña Diseño está seleccionada. Haga clic y arrastre un control Etiqueta de formulario web desde Web Forms sección del cuadro de herramientas y, a continuación, coloque el control Etiqueta en la página.

  3. Haga clic en el control Etiqueta. En el panel Propiedades, escriba CacheEntryTime en la propiedad ID y deje la propiedad Text en blanco.

  4. Coloque el cursor directamente después del control Label y, a continuación, presione ENTRAR para desplazarse a la siguiente línea de la página.

  5. Haga clic y arrastre un control RadioButtonList de formulario web desde Web Forms sección del cuadro de herramientas y suéltelo en la página. El control RadioButtonList debe aparecer por sí mismo en la línea después del control Label.

  6. Haga clic en el control RadioButtonList. En el panel Propiedades, escriba MyRadioButtonList en la propiedad ID.

  7. En el panel Propiedades, busque la propiedad Items para el control MyRadioButtonList, haga clic en Colección y, a continuación, haga clic en el botón de puntos suspensivos (...) que aparece junto a Colección.

  8. En la ventana Editor de colecciones ListItem, agregue miembros ListItem de la siguiente manera:

    1. En Miembros, haga clic en Agregar.
    2. En la sección Propiedades de ListItem, establezca Text y Value en Sí y establezca Selected en True.
    3. En Miembros, haga clic en Agregar de nuevo.
    4. En la sección Propiedades de ListItem, establezca Text y Value en No y establezca Selected en False.
    5. En Miembros, haga clic en Agregar una última vez.
    6. En la sección Propiedades de ListItem, establezca Text y Value en Maybe y establezca Selected en False.
    7. Haga clic en Aceptar para volver al archivo .ascx en la vista Diseño. Observe que aparecen tres botones de radio que están incluidos en el control RadioButtonList: Yes, No y Maybe.

  9. Coloque el cursor directamente después del control RadioButtonList y presione ENTRAR para desplazarse a la siguiente línea de la página.

  10. Haga clic y arrastre un control Botón de formulario web desde la Web Forms del cuadro de herramientas y suéltelo en la página. El control Button debe aparecer por sí solo en la línea después del control RadioButtonList.

  11. Haga clic en el control Button. En el panel Propiedades, escriba Enviar en la propiedad Text.

  12. Cambie a la vista HTML y agregue la siguiente directiva a la parte superior de la @OutputCache página:

    <%@ OutputCache Duration="60" VaryByParam="none" VaryByControl="MyRadioButtonList"%>

  13. Haga clic con el botón secundario en el archivo .ascx y, a continuación, haga clic en Ver código para mostrar el origen de página de código subyacente.

  14. Agregue el siguiente código al Page_Load evento, que establece la CacheEntryTime propiedad de la Text etiqueta:

    private void Page_Load(object sender, System.EventArgs e)
{
    CacheEntryTime.Text = "FragmentCtrl2: " + DateTime.Now.TimeOfDay.ToString();
}

Crear el formulario web para contener los controles de usuario

Ahora puede crear el formulario web (.aspx) para que contenga el control de usuario recién desarrollado. Para crear el formulario web, siga estos pasos:

  1. Agregue un nuevo formulario web denominado FragmentCaching.aspx al proyecto en Visual Studio .NET de la siguiente manera:

    1. En el Explorador de soluciones, haga clic con el botón secundario en el nodo del proyecto, elija Agregar y, a continuación, haga clic en Agregar formulario web.
    2. Asigne el nombre FragmentCaching.aspx al formulario web y, a continuación, haga clic en Abrir.

  2. Asegúrese de que la pestaña Diseño está seleccionada. Haga clic y arrastre un control Etiqueta de formulario web desde Web Forms sección del cuadro de herramientas y suéltelo en la página.

  3. Haga clic en el control Etiqueta. En el panel Propiedades, escriba Hora en la propiedad ID y deje la propiedad Text en blanco.

  4. Coloque el cursor directamente después del control Label y presione ENTRAR para desplazarse a la siguiente línea de la página.

  5. Arrastre FragmentCtrl1.ascx y suéltelo en el formulario web para que se coloque después del control Label en una línea por sí mismo. Coloque el cursor directamente después del control y presione ENTRAR para desplazarse a la siguiente línea de la página.

  6. Arrastre FragmentCtrl2.ascx y suéltelo en el formulario web para que se coloque después de FragmentCtrl1.ascx en una línea por sí mismo.

  7. En la vista HTML, el formulario web debe ser similar al código siguiente:

    <%@ Page language ="c#" Codebehind="FragmentCaching.aspx.cs"
   AutoEventWireup="false" Inherits="FragmentCache.FragmentCaching" %>
<%@ Register TagPrefix="uc1" TagName="FragmentCtrl1" Src="FragmentCtrl1.ascx" %>
<%@ Register TagPrefix="uc1" TagName="FragmentCtrl2" Src="FragmentCtrl2.ascx" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
   <HEAD>
      <meta name="GENERATOR" Content="Microsoft Visual Studio 7.0">
      <meta name="CODE_LANGUAGE" Content="C#">
      <meta name="vs_defaultClientScript" content="JavaScript (ECMAScript)">
      <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
   </HEAD>
   <body>
      <form id="FragmentCaching" method="post" runat="server">
         <P>
            WebForm Time:
            <asp:Label id="Time" runat="server" ForeColor="Blue"></asp:Label>
         </P>
         <P>
            <uc1:FragmentCtrl1 id="FragmentCtrl11" runat="server">
            </uc1:FragmentCtrl1>
         </P>
         <P>
            <uc1:FragmentCtrl2 id="FragmentCtrl21" runat="server">
            </uc1:FragmentCtrl2>
         </P>
      </form>
   </body>
</HTML>

    Nota

    Asegúrese de que los controles se colocan dentro del

  8. Haga clic con el botón secundario en el archivo .aspx y, a continuación, haga clic en Ver código para mostrar el origen de la página de código subyacente.

  9. Agregue el siguiente código al Page_Load evento, que establece la Time propiedad de la Text etiqueta:

    private void Page_Load(object sender, System.EventArgs e)
{
    Time.Text = "WebFormTime: " + DateTime.Now.TimeOfDay.ToString();
}

  10. En el menú Archivo, haga clic en Guardar todo para guardar los controles de usuario, el formulario web y otros archivos de proyecto asociados.

  11. En el menú Generar del Visual Studio de desarrollo integrado (IDE) de .NET, haga clic en Compilar para compilar el proyecto.

Ejecutar el ejemplo

En esta sección se muestra cómo ver el código en tiempo de ejecución para presenciar el comportamiento de almacenamiento en caché y, a continuación, se describe brevemente por qué el código realiza el modo en que lo hace.

  1. En el Visual Studio de soluciones IDE de .NET, haga clic con el botón secundario en el formulario web FragmentCaching.aspx y, a continuación, haga clic en Ver en el explorador para ejecutar el código.

  2. Después de que la página aparezca en el explorador, haga clic con el botón secundario en la página y, a continuación, haga clic en Actualizar para actualizar la página. También puede presionar la tecla F5 para actualizar la página si está viendo la página en un explorador externo al IDE de .NET Visual Studio .

    Nota

    La hora en el formulario web se ha actualizado, pero los controles de usuario todavía muestran la hora en que se realizó la entrada de caché asociada.

  3. En el segundo control, haga clic en Enviar. Observe que el control muestra una hora actualizada. Esto es en respuesta a la configuración del atributo VaryByControl para el control de usuario que hace referencia al control RadioButtonList.

  4. Haga clic en No y, a continuación, vuelva a hacer clic en Enviar.

    Nota

    La hora se actualiza de nuevo en la pantalla del control de usuario. Esto se debe a que se realiza una nueva entrada de caché para el control en función de esta configuración De no valor. Repita este paso excepto con la opción Quizás. Verá el mismo comportamiento.

  5. Haga clic en Sí y, a continuación, en Enviar de nuevo. Repita esta operación con las opciones No y Maybe.

    Estas selecciones para el control se almacenan en caché y muestran la hora de entrada de caché anterior. Si sigue haciendo clic en Enviar más allá de la configuración de duración de la directiva @ OutputCache, el tiempo del control de usuario se actualiza para cada selección de valor específica del control RadioButtonList.

Nota

No es el objetivo de este artículo cubrir toda la configuración y escenarios posibles para el almacenamiento en caché de fragmentos.

Solución de problemas

  • No intente manipular mediante programación un control de usuario que esté almacenado en caché de salida. Esto se debe a que el control solo se crea dinámicamente cuando se ejecuta por primera vez antes de que se produzca la entrada de caché. La memoria caché de salida satisface todas las demás solicitudes hasta que expira el control.

  • Si el formulario web en el que se hospedan los controles de usuario tiene una duración de caché de salida mayor que los tiempos de duración de los controles de usuario, la configuración del formulario web determina el comportamiento de almacenamiento en caché de los controles.