动态调用样式表代码

文章使用了多种动态调用样式表的方法。首先你可以学习到如何使用JavaScript代码来动态调用的方法,
然后我们会探索如何从数据库中读取样式表代码。文章还提供了一些技巧来进一步提高样式表代码。
还提供了一个完整的示例程序和有关源码。

说明
     许多的人都想实现在用户登陆后的页面拥有自己的样式。我的做法是:首先我在数据库中存储了许多的样式代码,然后将他们拷贝、粘贴到内容的样式表中。然后我从数据库中读取出数据,讲数据赋值给变量,插入到我的动态页面中。

1 )动态调用JavaScript代码。    
     动态调用JavaScript代码有两种有效方法。
Listing 
1  
Page.ClientScript.RegisterStartupScript(GetType(Page), 
" item1 " , script)

Listing 
2
ScriptManager.RegisterClientScriptBlock(Page, GetType(Page), 
" item1 " , script, True)

如果你创建的是AJAX enabled website或者使用了ScriptManager时,使用该方法。

Listing 
3
< asp:ScriptManager ID = " ScriptManager1 "  runat = " server " >
</ asp:ScriptManager >

两种方法不同的是,第一种方法是将Script代码输出到页面的最下面。第二种方法是讲代码输出到
< BODY > 标签后面。
第二种不同的是,第一种方法是必须在代码中增加一个
< script > 标签,第二种方法会自动为你添加标签。

假设我的代码就像下面这样。

Listing 
4

protected   void  Page_Load( object  sender, EventArgs e)
{
    
string script = "";
    
if(!IsPostBack)
    
{
        script 
= @"<script type='text/javascript'><!-- alert('Alert message two'); --></script>";
        Page.ClientScript.RegisterStartupScript(GetType(Page), 
"focus4", script);

        script 
= @"alert('Alert message one');";
                    ScriptManager.RegisterClientScriptBlock(Page, GetType(Page), 
"item11", script, True)
    }

}


然后我们有两个文本框;第一个消息框显示
" alert message one " ,虽然它第二个调用。
并且我们把第二个文本框显示为
" Alert message two "
你可能会把你的提示信息硬编码在页面的
< BODY > 内。


Listing 
5

< script type = " text/javascript " >
<!--
alert(
' in between ' );
 
-->
</ script >
这个消息将会显示在第一个方法和第二个方法的中间。并且这个消息框将使用该代码在页面加载的时候弹出来。

Listing 
6

Page.ClientScript.RegisterStartupScript

这个方法调用的消息框执行页面加载后,在Listing 
7  之前弹出。

Listing 
7

ScriptManager.RegisterClientScriptBlock

第三种执行动态执行你的代码的方式是这样。

Listing 
8
< head >
< title ><%   = titelpage %></ title >
<%   = MyNewStyle %>
</ head >
该代码是在页面中必须填充变量MyNewStyle。

Listing 
9

    
protected   string  MyNewStyle  =   "" ;
    
protected   string  titlepagina  =   "" ;
    
protected   void  Page_Load( object  sender, EventArgs e)
    
{
        titelpagina 
= "new title";
        MyNewStyle 
= @"<style type='text/css'>TD{color:orange;border:1;" +
            
@"border-color:black;border-style:solid;}</style>";
    }

这是一种简单的动态填充样式的方法。

2 )执行一个样式

你将知道在你的页面中的
< HEAD > 标签内执行一个样式或者一个样式表。

Listing 
10

< head >
< style type = " text/css " >
    TD
{} {color:Navy;
    border:
10;
    border
-color:green;
    border
-style:solid;}

</ style >
</ head >

如果我用先前例子中的Javascript代码为样式表代码,将会发生什么?

Listing 
11

script 
=   @" <style type=""text/css"">TD{color:Navy;border:10; "   +
  
@" border-color:red;border-style:solid;}</style> " ;
Page.ClientScript.RegisterStartupScript(GetType(Page), 
" focus5 " , script);

应为ScriptManager要自动添加
< javascript > 标签到你的代码(在样式代码开始处加 </ script > ),
你必须首先闭合
< javascript > 标签代码,(在样式代码后加 < script >
然后插入你的样式,再从新开始
< javascript > 标签代码。

Listing 
12

script 
=   @" <style type=""text/css"">TD{color:Navy;border:20; "   +   
            
@" border-color:blue;border-style:solid;}</style> " ;
script2 
=   @" --></script> "   +  script  +   @" <script type=""text/javascript""><!-- " ;
ScriptManager.RegisterClientScriptBlock(Page, GetType(Page), 
" tekst " , script2, True)

万一你同时用了Listing 13方法

Listing 
13

ScriptManager.RegisterClientScriptBlock

和Listing 14方法

Listing 
14

Page.ClientScript.RegisterStartupScript 

那么最后一个方法将会重写前一个方法,因为最后一个方法是在页面的最后执行。
使用这个你可以实现你想要的东西。
你甚至可以去改变页面的标题,你也可以执行样式表。
你想要从代码执行
< head > 标签,必须先删除掉你的 < head > 静态HTML标签代码。

Listing 
15

Dim script4 
as  String
Dim MyNewTitle 
as  Sring  =   " item4 "
Dim MyStyleSheet 
as  String  =   " Croon.css "
 
script4 
=  vbCrLf  &  vbCrLf  &   " style sheet and title to  "   &  _
MyNewTitle 
&   " <BR/><head runat= "" server "" ><title> "   &  _
MyNewTitle 
&   " </title><link href= "   &  _
MyStyleSheet 
&   "  rel= "" stylesheet ""  type= "" text/css ""  /></head> "
 
Page.ClientScript.RegisterStartupScript(GetType(Page), 
" item8 " , script4)

来自于数据库的样式代码。

我假设你知道如何从数据库中取出数据。
假设我们的普通css样式包含Listing 
16

Listing 
16

BODY
{background-color:Orange;color:Aqua;}  
TABLE
{border:1;border-style:solid;}   
TD
{color:Navy;}

我改变成 Listing 
17

Listing 
17

< style type = ' text/css ' >
BODY
{background-color:Orange;color:Aqua;}  
TABLE
{border:1;border-style:solid;}   
TD
{color:Navy;}
</ style >

首先选择这个文本,拷贝他并且粘贴到数据的一个字段中。
然后在代码中填充script变量。

Listing 
18

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) _
 Handles Me.Load
  Dim script As String
  If Not Page.IsPostBack Then
   script 
=  READ THE DATA FROM THE DATABASE
   Page.ClientScript.RegisterStartupScript(GetType(Page), 
" focus5 " , script)
   script2 
=   " --></script> "   &  script  &   " <script type= "" text/javascript "" ><!-- "
   ScriptManager.RegisterClientScriptBlock(Page, GetType(Page), 
" tekst " , script2,
   True)
 End If 
End sub

改变样式的另一个方法。

如果你想要转变另一个样式,你可能使用像调用styleswitch.js文件的Javascript代码.
如果你有许多的客户端,他们都想拥有自己的样式表,这样的工作会变的不清楚。

改变你的页面外观的第二种方法可能就是动态的Javascript代码,就像

document.body.style.backgroundColor
= ' red ' ; "

但是你怎么在多个客户端之间开呢?每一个客户也许都有自己的颜色。
你必须知道每一个适当的Javascript控制代码,并且必须知道如何动态的调用它。

主页面

Listing 
19

BODY
      
{
      border: 
0;
      border
-style:solid;
      font
-size:small;
      font
-family:verdana;
      background
-color:yellow;
      }


并且附加上我的HTML代码

Listing 
20

<! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.0 Transitional//EN " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
    
< head id = " HEAD1 " >< title > Telefoon applicatie  </ title >
    
< link href = " Croon.css "  rel = " stylesheet "  type = " text/css "   />
    
</ head >

我创建了一个main.aspx页面,一个ASP.NET Ajax enabled website,并且插入了一个ScriptManager在我的页面中。
其次,我插入了一个我通常的样式表的参照。
全部的HTML代码如下

Listing 
21

<% @ Page Language = " VB "  AutoEventWireup = " true "  CodeFile = " Default.aspx.vb "  
Inherits
= " _Default " %>
< span style = ' background:yellow ' >   </ span >
<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.1//EN "  
" http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head runat = " server " >
    
< title > Untitled Page </ title >
        
< link href = " Croon.css "  rel = " stylesheet "  type = " text/css "   />
</ head >
< body >
    
< form id = " form1 "  runat = " server " >
        
< asp:ScriptManager ID = " ScriptManager1 "  runat = " server "   />
        
< div > This text would be  in  Verdana from the normal style sheet. 
I changed it dynamically 
in  Courier.
            
& nbsp; </ div >
    
</ form >
</ body >
</ html >

在代码后台我放入

Listing 
22

Partial Class _Default
    Inherits System.Web.UI.Page
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) _
      Handles Me.Load
        Dim script1 As String
' Session("StijlScript")用来填充你想要的方式。
'
这篇文章我填充文本。
        HttpContext.Current.Session( " StijlScript " =   " <style type='text/css'> "   &  _
            
" BODY { "   &  _
            vbCrLf 
&   "     background-color: red; "   &  _
            vbCrLf 
&   "     font-family:courier; "   &  _
            vbCrLf 
&   "     font-weight:normal; "   &  _
            vbCrLf 
&   "     color:red;} "   &  _
            vbCrLf 
&   " </style> "
' 我插入了一个 vbCrLf 在页面。你也可以插入一个字符串。

HttpContext.Current.Session(
" StijlScript " =   " <style type='text/css'> "   &  _
    
" BODY{background-color: red;font-family:courier; "   &  _
    
" font-weight:normal;color:red;}</style> "
' 然后合并起来

        script1 
=  vbCrLf  &   " --></script> "   ' to end the javascript code
 
        script1 
=  script1  &  vbCrLf  &  HttpContext.Current.Session( " StijlScript " )           
        script1 
=  script1  &  vbCrLf  &   " <script type= "" text/javascript "" ><!-- "
' 执行它
  
  ScriptManager.RegisterClientScriptBlock(CType( _
  Page.FindControl(
" scriptManager1 " ), Object), _
  CType(Page.FindControl(
" scriptManager1 " ), Object).GetType, _
  
" RefreshMap " , script1, True)
' RefreshMap是唯一名字,如果你想要在最后提交这个script。
    End Sub
End Class

Result

页面是一个黄色背景,没有使用ScriptManager.RegisterClientScriptBlock.
我动态的改变成红色。在MyCode中的每一项将会重写我的CSS样式。如果你不使用一个项,将会使用默认的CSS样式。

原文地址

第一次翻译文章,有些地方可能翻译的不好请谅解。也能希望高手们指点下翻译不对的地方。

你可能感兴趣的:(代码)