是否可以使用AJAX回發來刷新CSS表單？

我一直在學習如何使用ASP.NET 3.5創建動態圖像和動態樣式表。我的理由是，我有一個網頁，我想自動更改標題背景圖像（用CSS設置）。下面檢查我的測試腳本：是否可以使用AJAX回發來刷新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時圖像會發生變化。我很樂意提供建議和/或「這是愚蠢/困難的方式來做到這一點，試試這個......」類型的反饋。

謝謝你們！

來源

2009-02-03 Anders

既然你說你是開放的建議...爲什麼你在與AsyncPostBack和CSS這樣設置？爲什麼不只是在點擊Button2時有一個javascript onclick事件來動態改變圖像呢？

編輯（響應後下）：

就不會有回傳（如果這是你通過閃爍的意思），你仍然可以使用你做任何其他的AsyncPostBack，然後有一個附加的javascript函數會觸發onclick，會做類似

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

這會將圖像更改爲新的源文件而不刷新任何頁面。

來源

2009-02-03 17:45:32 Luke

所以這是我發現了什麼：因爲我設置的變量Default.aspx頁面上，每次我點擊該按鈕，將變量重置爲默認值時，使它看起來好像它不工作。我將變量移動到外部類，一切都很好。謝謝！ – Anders 2009-02-03 18:36:54

是否可以使用AJAX回發來刷新CSS表單？

回答

相關問題