Question

我一直在学习如何使用ASP.NET 3.5创建动态图像和动态样式表。我的理由是我有一个网页，我想自动更改标题背景图片（用css设置）。检查下面的测试脚本：

<%@ 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>

因此上面的默认表单页面没有什么特别之处，它有一个DIV样式，具有动态背景图像和Label，正如注释所示，只是为了确保我的AsyncPostBack正常运行。

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

再一次，没什么特别的。只需将我暂时硬编码的两个值交换到程序中，然后更新Label文本。

这是我的动态样式表：

<%@ 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; }

最后，这是我的动态图像脚本：

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

如此掌握这些信息，我想知道AsyncPostBack是否有可能刷新CSS，以便在我点击Button2时图像会发生变化。我愿意接受建议和/或“这是愚蠢/艰难的方式来做这个，试试这个...”的反馈类型。

谢谢你们！

Answer 1

既然你说你愿意接受建议......你为什么要开始使用AsyncPostBack和CSS呢？为什么不单击Button2来动态更改图像的javascript onclick事件？

编辑（回复以下帖子）：

没有回帖（如果你的意思是闪烁）：你仍然可以使用AsyncPostBack进行其他任何你正在做的事情，然后在onclick上点击一个额外的javascript函数来执行类似

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

这会将图像更改为新的源文件而不进行任何页面刷新。

是否可以使用AJAX回发刷新CSS表？

1 个答案: