vb.net asp.net-ajax asp.net-3.5 dynamic-css

Is it possible to refresh a CSS sheet with an AJAX postback?

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:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <%
        Response.Output.WriteLine("<link rel=""Stylesheet"" type=""text/css"" href=""style.aspx?t={0}&v={1}"" />", oType, oText)
    %>
</head>
<body>
    <form id="form1" runat="server" action="Default.aspx">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <div class="testheader">&nbsp;</div>
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <%-- for testing --%>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </form>
</body>
</html>

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.

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

Again, nothing fancy. Just swaps the two values I have temporarily hard-coded into the program, and updates the Label text.

This is my dynamic stylesheet:

<%@ Page Language="VB" %>

<%  
    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}&p={1}", Server.UrlEncode(bText), qString)

    %>

body { background-color: <%=theColor%>; }
.testheader { background: url(<%=bannerImg%>); background-repeat:no-repeat; height:120px; }
.testclass { font-size: <%=H1size%>px; border:1px solid yellow; margin-bottom:2em; }

Finally, here is my dynamic image script:

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

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.

Thanks guys!

Solution

Since you said you're open to suggestions... why are you set on doing this with the AsyncPostBack and CSS? Why not just have a javascript onclick event to dynamically change the image when you click Button2?

edit (in response to post below):

There would be no post back (if that's what you mean by flickering): you can still use the AsyncPostBack for whatever else you're doing, and then have an additional javascript function fired off onclick that would do something like

document.getElementById('headerimg').src='2.jpg';

This would change the image to new source file without any page refresh.