动态调用样式表代码[转]

文章使用了多种动态调用样式表的方法。首先你可以学习到如何使用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'></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

<!--

alert('in between');

-->

</script>

这个消息将会显示在第一个方法和第二个方法的中间。并且这个消息框将使用该代码在页面加载的时候弹出来。

Listing 6

Page.ClientScript.RegisterStartupScript

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

Listing 7

ScriptManager.RegisterClientScriptBlock

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

Listing 8

<head>

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

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

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">

<head id="HEAD1"><title>Telefoon applicatie </title>

</head>

我创建了一个main.aspx页面，一个ASP.NET Ajax enabled website，并且插入了一个ScriptManager在我的页面中。

其次，我插入了一个我通常的样式表的参照。

全部的HTML代码如下

Listing 21

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb"

Inherits="_Default"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<title>Untitled Page</title>

</head>

<body>

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

<div>This text would be in Verdana from the normal style sheet.

I changed it dynamically in Courier.

 </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样式。

原文地址

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