How can I switch out a stylesheet programmatically?
<p>I have a set of stylesheets with different colour options. I have created a user control with a list of the stylesheet options which are setup as linkbuttons. On click I set a session variable with the path of the stylesheet I want to use, then on the master page I check this session and set the stylesheet accordingly.</p>

<p>The problem is that the stylesheet changes don't take effect until I refresh the page again. How can I force the stylesheet to reload instantly?</p>

<p>Here is my usercontrol:</p>

<pre><code>&lt;ul id="swatch"&gt;
  &lt;li&gt;
    &lt;div class="green"&gt;&lt;/div&gt;
    &lt;asp:LinkButton ID="lbGreen" runat="server" Text="Green" ClientIDMode="Static" 
          onclick="lbGreen_Click"&gt;&lt;/asp:LinkButton&gt;
  &lt;/li&gt;    
  &lt;li&gt;
    &lt;div class="maroon"&gt;&lt;/div&gt;
    &lt;asp:LinkButton ID="lbMaroon" runat="server" Text="Maroon" ClientIDMode="Static" 
          onclick="lbMaroon_Click"&gt;&lt;/asp:LinkButton&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;div class="silver"&gt;&lt;/div&gt;
    &lt;asp:LinkButton ID="lbSilver" runat="server" Text="Silver" ClientIDMode="Static" 
          onclick="lbSilver_Click"&gt;&lt;/asp:LinkButton&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;div class="black"&gt;&lt;/div&gt;
    &lt;asp:LinkButton ID="lbBlack" runat="server" Text="Black" ClientIDMode="Static" 
          onclick="lbBlack_Click"&gt;&lt;/asp:LinkButton&gt;
  &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Here is the code behind for this control:</p>

<pre><code>public partial class StylesheetPicker : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void lbGreen_Click(object sender, EventArgs e)
    {
        SetStylesheet("green");
    }

    protected void lbMaroon_Click(object sender, EventArgs e)
    {
        SetStylesheet("maroon");
    }

    protected void lbSilver_Click(object sender, EventArgs e)
    {
        SetStylesheet("silver");
    }

    protected void lbBlack_Click(object sender, EventArgs e)
    {
        SetStylesheet("black");
    }

    private void SetStylesheet(string selectedStyle)
    {
        switch (selectedStyle)
        {
            case "green":
                Session["style"] = "/css/green.css";
                break;
            case "maroon":
                Session["style"] = "/css/maroon.css";
                break;
            case "silver":
                Session["style"] = "/css/silver.css";
                break;
            case "black":
                Session["style"] = "/css/black.css";
                break;
            default:
                Session["style"] = "/css/green.css";
                break;
        }                      
    }
}
</code></pre>

<p>and then here is the code snippet I have on my master page:</p>

<pre><code>if(Session["style"] != null)
{
  var stylesheet = Session["style"];
  &lt;link rel="stylesheet" type="text/css" href="@stylesheet" /&gt;
}
else
{
  &lt;link rel="stylesheet" type="text/css" href="/css/green.css" /&gt;
}
</code></pre>

<p>It seems I have to click the linkbuttons <em>twice</em> to get the stylesheet to change. How can I do it so when the button is clicked it changes instantly?</p>

<p>Thanks</p>
