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

Artículo
07/17/2023

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

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

Resumen

En este artículo se muestra cómo implementar el almacenamiento en caché de fragmentos en ASP.NET. El almacenamiento en caché de fragmentos no almacena en caché directamente los fragmentos de código de un formulario web; 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 implementaciones y duraciones de caché independientes de cómo se va a aplicar el comportamiento del almacenamiento en caché. El código de ejemplo de este artículo muestra cómo lograr esta funcionalidad.

El almacenamiento en caché de fragmentos es útil cuando necesita almacenar en caché solo 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

Creación de una aplicación web de ASP.NET mediante C# .NET

En los pasos siguientes se muestra cómo crear una nueva aplicación web ASP.NET denominada FragmentCache.

Abrir Visual Studio .NET
En el menú Archivo, elija Nuevo y, a continuación, haga clic en Proyecto.
En el cuadro de diálogo Nuevo proyecto , haga clic en Proyectos de Visual C# en Tipos de proyectoy, a continuación, haga clic en ASP.NET aplicación web en Plantillas.
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.

Creación de 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 en la página de código subyacente, tal como se describe.

Control de usuario 1 (FragmentCtrl1.ascx)

El siguiente control de usuario, FragmentCtrl1.ascx, es simple. FragmentCtrl1.ascx escribe el tiempo que se produce la entrada de caché para el 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.

En Visual Studio .NET, cree un nuevo control de usuario como se indica a continuación:
1. En Explorador de soluciones, haga clic con el botón derecho en el nodo del proyecto, seleccione Agregary, 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.
Asegúrese de que la pestaña Diseño está seleccionada. Haga clic y arrastre un control Etiqueta de formulario web desde la sección Web Forms del cuadro de herramientas y coloque el control Etiqueta en la página.
Haga clic en el control Etiqueta. En el panel Propiedades del entorno de desarrollo integrado (IDE) de Visual Studio .NET , escriba CacheEntryTime en la propiedad ID y deje la propiedad Text en blanco.
Cambie a la vista HTML y agregue la siguiente @ OutputCache directiva a la parte superior de la página:
```
<%@ OutputCache Duration="40" VaryByParam="none"%>
```
Haga clic con el botón derecho en el archivo .ascx y, a continuación, haga clic en Ver código para mostrar el origen de la página de código subyacente.

Agregue el código siguiente al Page_Load evento, que establece la propiedad de la CacheEntryTimeText 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 es mucho más clara en tiempo de ejecución en la sección siguiente.

En Visual Studio .NET, cree un nuevo control de usuario como se indica a continuación:
1. En Explorador de soluciones, haga clic con el botón derecho en el nodo del proyecto, seleccione Agregary, 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.
Asegúrese de que la pestaña Diseño está seleccionada. Haga clic y arrastre un control Etiqueta de formulario web desde la sección Web Forms del cuadro de herramientas y, a continuación, coloque el control Etiqueta en la página.
Haga clic en el control Etiqueta. En el panel Propiedades , escriba CacheEntryTime en la propiedad ID y deje la propiedad Text en blanco.
Coloque el cursor directamente después del control Etiqueta y, a continuación, presione ENTRAR para desplazarse a la siguiente línea de la página.
Haga clic y arrastre un control RadioButtonList de formulario web desde la sección Web Forms del cuadro de herramientas y colóquelo en la página. El control RadioButtonList debe aparecer por sí mismo en la línea después del control Label.
Haga clic en el control RadioButtonList. En el panel Propiedades , escriba MyRadioButtonList en la propiedad ID .
En el panel Propiedades , busque la propiedad Items del control MyRadioButtonList , haga clic en Coleccióny, a continuación, haga clic en el botón de puntos suspensivos (...) que aparece junto a Colección.
En la ventana de Editor de la colección ListItem, agregue miembros ListItem de la siguiente manera:
1. En Miembros, haga clic en Agregar.
2. En la sección Propiedades de ListItem , establezca Texto y valor en Sí y seleccione Seleccionado en True.
3. En Miembros, haga clic en Agregar de nuevo.
4. En la sección propiedades ListItem , establezca Texto y valor en No y seleccione Seleccionado en False.
5. En Miembros, haga clic en Agregar una última vez.
6. En la sección propiedades ListItem , establezca Texto y valor en Tal vez y seleccione Seleccionado en False.
7. Haga clic en Aceptar para volver al archivo .ascx en la vista Diseño . Observe que aparecen tres botones de radio incluidos en el control RadioButtonList: Sí, No y Quizás.
Coloque el cursor directamente después del control RadioButtonList y presione ENTRAR para desplazarse a la siguiente línea de la página.
Haga clic y arrastre un control Botón de formulario web desde la sección Web Forms del cuadro de herramientas y colóquelo en la página. El control Button debe aparecer por sí mismo en la línea después del control RadioButtonList.
Haga clic en el control Botón. En el panel Propiedades , escriba Submit en la propiedad Text .
Cambie a la vista HTML y agregue la siguiente @OutputCache directiva a la parte superior de la página:
```
<%@ OutputCache Duration="60" VaryByParam="none" VaryByControl="MyRadioButtonList"%>
```
Haga clic con el botón derecho en el archivo .ascx y, a continuación, haga clic en Ver código para mostrar el origen de la página de código subyacente.

Agregue el código siguiente al Page_Load evento, que establece la propiedad de la CacheEntryTimeText etiqueta:

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

Creación del formulario web para contener los controles de usuario

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

Agregue un nuevo formulario web denominado FragmentCaching.aspx al proyecto en Visual Studio .NET como se indica a continuación:
1. En Explorador de soluciones, haga clic con el botón derecho en el nodo del proyecto, seleccione Agregary, a continuación, haga clic en Agregar formulario web.
2. Asigne al formulario web el nombre FragmentCaching.aspx y, a continuación, haga clic en Abrir.
Asegúrese de que la pestaña Diseño está seleccionada. Haga clic y arrastre un control Etiqueta de formulario web desde la sección Web Forms del cuadro de herramientas y colóquelo en la página.
Haga clic en el control Etiqueta. En el panel Propiedades , escriba Time en la propiedad ID y deje la propiedad Text en blanco.
Coloque el cursor directamente después del control Etiqueta y presione ENTRAR para desplazarse a la siguiente línea de la página.
Arrastre FragmentCtrl1.ascx y colóquelo 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.
Arrastre FragmentCtrl2.ascx y colóquelo en el formulario web para que se coloque después de FragmentCtrl1.ascx en una línea por sí misma.

En la vista HTML , el formulario web debe parecerse 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 de la

Haga clic con el botón derecho 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.

Agregue el código siguiente al Page_Load evento, que establece la propiedad de la TimeText etiqueta:

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

En el menú Archivo , haga clic en Guardar todo para guardar los controles de usuario, el formulario web y otros archivos de proyecto asociados.
En el menú Compilar del entorno de desarrollo integrado (IDE) de Visual Studio .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 del almacenamiento en caché y, a continuación, se describe brevemente por qué el código realiza la manera en que lo hace.

En el IDE de Visual Studio .NET Explorador de soluciones, haga clic con el botón derecho en el formulario web de FragmentCaching.aspx y, a continuación, haga clic en Ver en el explorador para ejecutar el código.
Una vez que aparezca la página en el explorador, haga clic con el botón derecho 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 de Visual Studio.

Nota:

La hora en el formulario web se ha actualizado, pero los controles de usuario siguen mostrando la hora en que se realizó la entrada de caché asociada.
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.
Haga clic en No y, a continuación, haga clic en Enviar de nuevo.

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 Sin valor. Repita este paso excepto con la opción Tal vez . Verá el mismo comportamiento.
Haga clic en Sí y, a continuación, haga clic 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 , la hora del control de usuario se actualiza para cada selección de valor específica para el control RadioButtonList.