HOW TO: Improve Performance by Caching Pages in ASP.NET

View products that this article applies to.

Summary

This article demonstrates how to improve the performance of ASP.NET applications by caching entire ASP.NET pages with the @ OutputCache page directive. You can also the @ OutputCache page directive to cache specific portions of an ASP.NET page, though this article does not demonstrate this implementation.

Requirements

The following list outlines the recommended hardware, software, network infrastructure, and service packs that you need:

Microsoft Visual Studio .NET
Microsoft Internet Information Server (IIS) 4.0 or Microsoft Internet Information Services (IIS) 5.0

This article assumes that you are familiar with the following topics:

Web applications
Microsoft ASP.NET

Description of the Technique

When you cache information, you place the information in memory. Normally, when IIS receives a request for a page, IIS reads the page from the hard disk and then sends the page. Sometimes, IIS can automatically store information in memory to improve performance. The @ OutputCache directive allows you to hold a page in memory, even if that page does not fit the criteria that IIS uses to determine what information it holds in memory.

For example, pages that access a database are run again each time you browse to the page to obtain the latest data. When you use the @ OutputCache directive, the page is held in memory with the results of one query to the database until the specified time period expires. Therefore, you can use the @ OutputCache directive to avoid querying the database every time someone browses to the page. This is very useful for data that does not change frequently.

Create an ASP.NET Web Application That Uses @ OutputCache

In this section, you create an ASP.NET Web application that uses the @ OutputCache page directive to cache the page for a specific time period.

Follow these steps to create a new ASP.NET Web application in Visual Basic .NET:
1. Open Visual Studio .NET.
2. On the File menu, point to New, and then click Project.
3. In the New Project dialog box, click Visual Basic Projects under Project Types, and then click ASP.NET Web Application under Templates.
Switch to HTML view in the WebForm1.aspx window, and then add the following directive immediately after the @ Page directive:
<%@ OutputCache Duration="10" VaryByParam="none" %>
This code sets the duration attribute of the @ OutputCache directive to 10 seconds so that the page contents are cached for 10 seconds. In addition, the VaryByParam attribute consists of a semicolon-separated list of strings that you can use to vary the output cache based on variables that the user defines. This functionality is beyond the scope of this article, so the preceding code sets VaryByParam to none.
In the HTML view of WebForm1.aspx, add the following code between the opening and closing <form> tags to add a Label control to the form:
<asp:Label> Last cached: <%Response.Write(Now())%> </asp:Label>
You use this label to display the last time that the page was loaded. The value in this label should only change once every 10 seconds, regardless how many times the page is refreshed.
On the File menu, click Save.
On the Build menu, click Build Solution.
Right-click the page, and then click View In Browser. Notice that a label appears, which displays the current time.
Refresh the page multiple times. Notice that the label changes only after the 10-second time period expires.

Complete Code Listing

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm1.aspx.vb" Inherits="WebApplication1.WebForm1"%>
<%@ OutputCache Duration="10" VaryByParam="none" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title>WebForm1</title>
        <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
        <meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
        <meta name="vs_defaultClientScript" content="JavaScript">
        <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
    </head>
    <body MS_POSITIONING="GridLayout">
        <form id="Form1" method="post" runat="server">
        <asp:Label>
            Last Cached: <%Response.Write(Now())%>
        </asp:Label>
        </form>
    </body>
</html>

NOTE: You may need to modify the Inherits attribute in the following line of code as necessary to reference the name of your project and Web Form:

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm1.aspx.vb" Inherits="WebApplication1.WebForm1"%>

The code currently assumes that your project is named WebApplication1 and that your Web Form is named WebForm1.

Verify That It Works

Open multiple browser windows.
In each window, browse to your .aspx page as though you were an end user. Notice that all of the windows display the same time for the 10-second duration, even though you did not browse to the page at the same time.
After 10 seconds, browse to or refresh your .aspx page. Notice that all of the windows update the time.

↑ Back to the top