title: Is it possible to refresh a CSS sheet with an AJAX postback?
body: <p>I have been learning how to create dynamic images and dynamic stylesheets using ASP.NET 3.5.  My reasoning behind this is I have a web page that I want to change the header background image (set with css) automatically.  Check below for my test script:</p>
  
  <hr>
  
  <pre><code>&lt;%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %&gt;
  
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;%
          Response.Output.WriteLine("&lt;link rel=""Stylesheet"" type=""text/css"" href=""style.aspx?t={0}&amp;v={1}"" /&gt;", oType, oText)
      %&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server" action="Default.aspx"&gt;
          &lt;asp:ScriptManager ID="ScriptManager1" runat="server" /&gt;
          &lt;asp:UpdatePanel ID="UpdatePanel1" runat="server"&gt;
              &lt;ContentTemplate&gt;
                  &lt;div class="testheader"&gt;&amp;nbsp;&lt;/div&gt;
                  &lt;asp:Label ID="Label1" runat="server" Text="Label"&gt;&lt;/asp:Label&gt; &lt;%-- for testing --%&gt;
              &lt;/ContentTemplate&gt;
              &lt;Triggers&gt;
                  &lt;asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /&gt;
              &lt;/Triggers&gt;
          &lt;/asp:UpdatePanel&gt;
          &lt;asp:Button ID="Button1" runat="server" Text="Button" /&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So nothing special about the default form page above, it has an DIV styled to have the dynamic background image and a Label, which as the comment indicates is just to make sure my AsyncPostBack is functioning properly.</p>
  
  <pre><code>Partial Class _Default
      Inherits System.Web.UI.Page
      Public oType As String = "m"
      Public oText As String = "Genius on the Web"
      Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
          Select Case oType
              Case "m"
                  oType = "c"
              Case "c"
                  oType = "m"
          End Select
          Label1.Text = Now.ToString
      End Sub
  End Class
  </code></pre>
  
  <p>Again, nothing fancy.  Just swaps the two values I have temporarily hard-coded into the program, and updates the Label text.</p>
  
  <p>This is my dynamic stylesheet:</p>
  
  <pre><code>&lt;%@ Page Language="VB" %&gt;
  
  &lt;%  
      Response.ContentType = "text/css"
      Dim qString As String = Request.QueryString("t")
      Dim bText As String = Request.QueryString("v")
      If String.IsNullOrEmpty(qString) Then qString = "blank"
      If String.IsNullOrEmpty(bText) Then bText = "Placeholder"
      Dim theColor, H1size, bannerImg As String
      Select Case qString
          Case "c"
              theColor = "green"
              H1size = 30
          Case "m"
              theColor = "blue"
              H1size = 26
          Case Else
              theColor = "red"
      End Select
      bannerImg = String.Format("image.aspx?t={0}&amp;p={1}", Server.UrlEncode(bText), qString)
  
      %&gt;
  
  body { background-color: &lt;%=theColor%&gt;; }
  .testheader { background: url(&lt;%=bannerImg%&gt;); background-repeat:no-repeat; height:120px; }
  .testclass { font-size: &lt;%=H1size%&gt;px; border:1px solid yellow; margin-bottom:2em; }
  </code></pre>
  
  <p>Finally, here is my dynamic image script:</p>
  
  <pre><code>Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
      Response.ContentType = "image/jpeg"
      Response.Clear()
      Response.BufferOutput = True
  
  
      Try
          Dim oText As String = Server.HtmlDecode(Request.QueryString("t"))
          If String.IsNullOrEmpty(oText) Then oText = "Placeholder"
  
          Dim oPType As String = Server.HtmlDecode(Request.QueryString("p"))
          If String.IsNullOrEmpty(oPType) Then oPType = "none"
  
          Dim imgPath As String = ""
  
          Select Case oPType
              Case "c"
                  imgPath = "img/banner_green.jpg"
              Case "m"
                  imgPath = "img/banner_blue.jpg"
              Case Else
                  Throw New Exception("no ptype")
          End Select
  
          Dim oBitmap As Bitmap = New Bitmap(Server.MapPath(imgPath))
  
          Dim oGraphic As Graphics = Graphics.FromImage(oBitmap)
          Dim frontColorBrush As New SolidBrush(Color.White)
  
          Dim oFont As New Font(FONT_NAME, 30)
  
          Dim oInfo() As ImageCodecInfo = ImageCodecInfo.GetImageEncoders
          Dim oEncoderParams As New EncoderParameters(1) 'jpeg
          Dim xOffset As Single = Math.Round((oBitmap.Height - oFont.Height) / 2, MidpointRounding.ToEven)
  
          Dim oPoint As New PointF(275.0F, xOffset + 10)
  
          oEncoderParams.Param(0) = New EncoderParameter(Encoder.Quality, 100L)
  
          oGraphic.TextRenderingHint = Drawing.Text.TextRenderingHint.AntiAlias
          oGraphic.DrawString(oText, oFont, frontColorBrush, oPoint)
  
          oBitmap.Save(Response.OutputStream, oInfo(1), oEncoderParams)
  
          Response.Output.Write(oBitmap)
  
          oBitmap.Dispose()
          oGraphic.Dispose()
  
          Response.Flush()
      Catch ex As Exception
  
      End Try
  End Sub
  </code></pre>
  
  <hr>
  
  <p>So armed with this information, I want to know if it is possible for the AsyncPostBack refresh the CSS so that the image will change when I click Button2. I am open for suggestions and/or "thats the stupid/hard way to do this, try this..." type of feedback.</p>
  
  <p>Thanks guys!</p>