Можно ли обновить лист CSS с обратной передачей AJAX? - PullRequest
Новая
       12

Можно ли обновить лист CSS с обратной передачей AJAX?

0 голосов
/ 03 февраля 2009

Я изучал, как создавать динамические изображения и динамические таблицы стилей с помощью 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. Я открыт для предложений и / или типа «это глупый / трудный способ сделать это, попробуйте это ...».

Спасибо, ребята!

1 Ответ

2 голосов
/ 03 февраля 2009

Поскольку вы сказали, что открыты для предложений ... почему вы настроены делать это с AsyncPostBack и CSS? Почему бы просто не включить событие javascript onclick для динамического изменения изображения при нажатии кнопки Button2?

изменить (в ответ на пост ниже):

Не было бы сообщения назад (если вы это подразумеваете под мерцанием): вы все равно можете использовать AsyncPostBack для всего, что вы делаете, и затем включить дополнительную функцию javascript, отключенную при нажатии, которая будет выполнять что-то вроде 

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

Это изменит изображение на новый исходный файл без обновления страницы.

...