title: How can I switch out a stylesheet programmatically?
body: <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>