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"> </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!