如何在 asp.net 中动态更改页面主题

• 下载 DynamicWebPageTheme.zip - 7.38 KB

引言

这是一个简单的代码，可用于在运行时更改页面主题。此代码包含三个页面，分别使用不同的方法来更改页面主题。此代码的特点是第三种方法，即“只需在页面的一次回发中更改页面主题”。

背景

需要 C#、HTML、样式表和 Java Script 的基本知识。

Using the Code

首先，我们可能会说我们可以通过在 Page_Preinit 事件中编写代码来轻松实现这一点，如下所示。

protected void Page_PreInit(object sender, EventArgs e)
{
       Page.Theme = "Black"; //default theme
}

但是，如果用户想要从 dropdownlist 中选择主题，则会出现问题，因为 Page_PreInit 在其他事件之前触发。

解决方案 

• 在 Page_PreInit 中使用 session 或静态全局变量加载所选主题。
• 要么创建一个 session 变量，要么创建一个静态全局变量来存储 DropDownList 的 SelectedIndexChanged 事件中所选的主题。
• 使用 Server.Transfer 或 Response.Redirect 方法重新加载页面。

代码 

方法 1：使用 Session 变量

protected void Page_PreInit(object sender, EventArgs e)
 {
 string theme;
 theme = (string)Session["theme"];
 if ((theme != null)&&(theme.Length !=0))
 {
 Page.Theme = theme;
 ddlTheme.Text = theme;
 }
 else
 {
 Page.Theme = "Black";
 }
 }

 protected void ddlTheme_SelectedIndexChanged(object sender, EventArgs e)
 {
 Session["theme"] = ddlTheme.SelectedItem.Value;
 Server.Transfer(Request.FilePath);
 }

方法 2：使用全局静态变量

private static string theme;

 protected void Page_PreInit(object sender, EventArgs e)
 {
 if ((theme!= null) && (theme.Length != 0))
 {
 Page.Theme = theme;
 ddlTheme.Text = theme;
 }
 else
 {
 Page.Theme = "Black";
 }
 }

 protected void ddlTheme_SelectedIndexChanged(object sender, EventArgs e)
 {
 theme = ddlTheme.SelectedItem.Value;
 Server.Transfer(Request.FilePath);
 }

挑战

现在有人给我一个挑战，要求我在不使用任何 session 变量、全局静态变量，以及不使用 Server.Transfer 或 Response.Redirect 重新加载页面的情况下完成此任务，这意味着只需在页面的一次回发中更改页面主题。

解决方案

• 在 Page_PreInit 中使用客户端 cookie 加载所选主题。
• 创建一个 JavaScript 函数，用于将所选主题存储在客户端 cookie 中。
• 在客户端调用 DropDownList 的 onChange 事件中的此函数。

代码 

方法 3：只需在页面的一次回发中更改页面主题。

 

<form id="form1" runat="server">
 <div>
 <table border="0" cellpadding="0" cellspacing="0" style=width: 100%>
 <tr>
 <td>
 <table>
 <tr>
 <td>Theme</td>
 <td width=6px></td>
 <td>
 <asp:DropDownList ID="ddlTheme" AutoPostBack="true"
onchange="javascript:SetTheme()" runat="server">
 <asp:ListItem Selected="True">Black</asp:ListItem>
 <asp:ListItem>White</asp:ListItem>
 </asp:DropDownList>
 </td>
 </tr>
 </table>
 </td>
 </tr>
 <tr>
 <td style="height:12px">
 </td>
 </tr>
 <tr>
 <td align="center">
 <div style="text-justify: auto; text-align:
 justify; width:500px">
 Dear Friends, This demo project shows,
How to load Theme dynamically. The speciality of this page is
"No Need to use any session, global variable and no need to send
the new request to server only postback is required means no need
to use Response.Redirect or Server.Transfer to same or other
page". I simply store the selected theme in client cookie at
client side by using javascript function and load newly
selected theme on page preinit event at server side. Default theme is Black.
 </div>
 </td>
 </tr>
 </table>

 </div>
 <script type="text/javascript">
 function SetTheme()
 {
 document.cookie = "theme=" +
document.getElementById('ddlTheme').value + ";";
 }
 </script>
 </form>

protected void Page_PreInit(object sender, EventArgs e)
 {
 if ((Request.Cookies["theme"] != null)
 && (Request.Cookies["theme"].Value.Length !=0))
 Page.Theme = Request.Cookies["theme"].Value;
 else
 Page.Theme = "Black";
 }

关注点

我赢了，在不使用 Server.Transfer 或 Response.Redirect 重新加载页面的情况下完成此任务，并且不使用 session 或静态全局变量，这意味着只需在页面的一次回发中更改页面主题。

• Page_preinit 在其他事件之前触发。
• 要么创建一个 session 变量，要么创建一个静态全局变量来存储 DropDownList 的 SelectedIndexChanged 事件中所选的主题。
• Server.Transfer 或 Response.Redirect 在前两种方法中起着重要作用。
• 现在我的挑战，只需在页面的一次回发中更改页面主题。使用客户端函数将所选主题存储在客户端 cookie 中，并在 Page_PreInit 事件中加载此主题，此事件在每次 DropDownList 的 SelectedIndexChanged 事件时都会调用。因此，无需使用 Server.Transfer 或 Response.Redirect 方法重新加载页面，只需一次回发即可动态更改页面主题。

历史  

版本 1.0.0.0 包含初始代码，包括所有三个页面，分别使用不同的方法动态加载页面主题。

版本 1.0.0.1 包含修改后的代码，包括修改后的第三种方法，现在第一次将选择上一个主题。