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

发布于 2024-07-12 08:32:33 字数 4945 浏览 6 评论 0原文

我一直在学习如何使用 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 样式，具有动态背景图像和一个标签，正如注释所示，这只是为了确保我的 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

再说一遍，没什么特别的。只需交换我暂时硬编码到程序中的两个值，并更新标签文本。

这是我的动态样式表：

<%@ 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 时图像会发生变化。我愿意接受建议和/或“这是愚蠢/困难的方法，尝试这个......”类型的反馈。

多谢你们！

原文

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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烟燃烟灭 2024-07-19 08:32:34

既然你说过你愿意接受建议......你为什么要使用 AsyncPostBack 和 CSS 来做到这一点？为什么不直接使用 javascript onclick 事件在单击 Button2 时动态更改图像呢？

编辑（响应下面的帖子）：

不会有回发（如果这就是您所说的闪烁的意思）：您仍然可以使用 AsyncPostBack 进行您正在做的任何其他事情，然后在 onclick 上触发一个额外的 javascript 函数会执行类似的操作，

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

这会将图像更改为新的源文件，而无需刷新任何页面。

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.

回复收藏 0 原文

~没有更多了~

关于作者

怼怹恏

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

留蓝

18790681156

zach7772

Wini

ayeshaaroy

初雪

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

留蓝

18790681156

zach7772

Wini

ayeshaaroy

初雪

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。