Caching multiple versions of user control using VaryByParam

Suggested Videos
Part 122 - Fragment caching
Part 123 - Web form caching based on GET and POST requests
Part 124 - Caching multiple versions of user control using VaryByControl

In Part 124 of the asp.net video tutorial, we discussed about caching multiple versions of user control using VaryByControl attribute of the "OutputCache" directive. Please watch Part 124 before proceeding with this video.



In this video we will discuss about, caching multiple versions of user control using "VaryByParams" attribute of the "OutputCache" directive.

We will be using the same user control "UCProductsControl.ascx" from Part 124, for this demo. If you need the code associated with the user control, please refer to Part 124, by clicking here.

When should we use VaryByParam over VaryByControl and vice versa? 
                                                   OR
What is the difference between VaryByParam and VaryByControl?
If you want to cache multiple responses of a user control, based on a query string or a form "POST" parameter, then use VaryByParam. On the other hand, if you want to cache multiple responses of a user control, based on a control value then use "VaryByControl".



First let us modify "UCProductsControl.ascx" user control, to load products into the gridview control, using a query string parameter. This means we can remove the "DropDownList1" control from "UCProductsControl.ascx" file. The HTML is shown below.
<table style="border: 1px solid black">
    <tr>
        <td style="background-color: Gray; font-size: 12pt">
            Products User Control
        </td>
    </tr>
    <tr>
        <td>
            <asp:GridView ID="GridView1" runat="server">
            </asp:GridView>
        </td>
    </tr>
    <tr>
        <td>
            <b>User Control Server Time:
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            </b>
        </td>
    </tr>
    <tr>
        <td>
            <b>User Control Client Time:
                <script type="text/javascript">
                    document.write(Date());
                </script>
            </b>
        </td>
    </tr>
</table>

Make the following changes to the code-behind file of the user control
1. In Page_Load() event, remove "!IsPostBack" condition
2. Since, we want to load products using query string parameter, remove the reference to "DropDownList1" and use Request.QueryString["ProductName"]

protected void Page_Load(object sender, EventArgs e)
{
    GetProductByName(Request.QueryString["ProductName"]);
    Label1.Text = DateTime.Now.ToString();
}

DropDownList1_SelectedIndexChanged() method can be completely removed. The private method GetProductByName() will not change in any way.

Caching multiple responses of a user control declaratively, using "VaryByParam" attribute of the "OutputCache" directive
To cache multiple responses of the user control, include "OutputCache" directive in the aspx of the UCProductsControl.ascx. Set VaryByParam="ProductName", which indicates that a separate response must be cached for each varying value of "ProductName" query string.
<%@ OutputCache Duration="60" VaryByParam="ProductName" %>

Caching multiple responses of a user control programatically, using "VaryByParams" property of the PartialCachingAttribute
We can also achieve the same thing, by specifying "PartialCachingAttribute" on the UCProductsControl class as shown below.
[PartialCaching(60, VaryByParams = "ProductName")]
public partial class UCProductsControl : System.Web.UI.UserControl
{
    //...Rest of the UCProductsControl code
}

Please run the application and test. Notice that, as the "ProductName" query string value changes, for each different value, a response from the user control is cached for 60 seconds. The difference between "User Control Server Time" and "User Control Client Time" proves this. Since, we don't have "Caching" set on the WebForm1.aspx, "Page Server Time" and "Page Client Time" stays the same always.

No comments