Caching multiple versions of user control using VaryByControl - Part 124

Suggested Videos
Part 121 - Controlling caching in code
Part 122 - Fragment caching
Part 123 - Web form caching based on GET and POST requests

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



We will be using "tblProducts" table for this demo. If you need the script to create and populate this table, please refer to Part 122, by clicking here.

Stored procedure to get products by "Name"
Create Procedure spGetProductByName    
@ProductName nvarchar(50)    
as    
Begin    
 if(@ProductName = 'All')    
  Begin    
   Select Id, Name, Description    
   from tblProducts    
  End    
 Else    
  Begin    
   Select Id, Name, Description    
   from tblProducts    
   where Name = @ProductName    
  End    
End



Add a user control to the project, with name = "UCProductsControl.ascx". Copy and paste the following HTML in the usercontrol. 
<table style="border: 1px solid black">
    <tr>
        <td style="background-color: Gray; font-size: 12pt">
            Products User Control
        </td>
    </tr>
    <tr>
        <td>
            Select Product:
            <asp:DropDownList ID="DropDownList1" AutoPostBack="true" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                <asp:ListItem Text="All" Value="All"></asp:ListItem>
                <asp:ListItem Text="Laptops" Value="Laptops"></asp:ListItem>
                <asp:ListItem Text="iPhone" Value="iPhone"></asp:ListItem>
                <asp:ListItem Text="LCD TV" Value="LCD TV"></asp:ListItem>
                <asp:ListItem Text="Desktop" Value="Desktop"></asp:ListItem>
            </asp:DropDownList>
        </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>

Copy and paste the following code in UCProductsControl.ascx.cs
public partial class UCProductsControl : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            GetProductByName("DropDownList1");
        }
        Label1.Text = DateTime.Now.ToString();
    }

    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        GetProductByName(DropDownList1.SelectedValue);
    }

    private void GetProductByName(string ProductName)
    {
        string CS = ConfigurationManager.ConnectionStrings["DBConnectionString"].ConnectionString;
        SqlConnection con = new SqlConnection(CS);
        SqlDataAdapter da = new SqlDataAdapter("spGetProductByName", con);
        da.SelectCommand.CommandType = CommandType.StoredProcedure;

        SqlParameter paramProductName = new SqlParameter();
        paramProductName.ParameterName = "@ProductName";
        paramProductName.Value = ProductName;
        da.SelectCommand.Parameters.Add(paramProductName);

        DataSet DS = new DataSet();
        da.Fill(DS);
        GridView1.DataSource = DS;
        GridView1.DataBind();
    }
}

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

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

Please run the application and test. Notice that, as the product selections change in the dropdownlist, for each different selection 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.

In our next video, we will discuss about when and how to use "VaryByParams" to cache multiple versions of a user control.