Caching multiple versions of user control using VaryByParam

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.