Question

我有一组具有不同颜色选项的样式表。我创建了一个用户控件，其中包含样式表选项列表，这些选项设置为链接按钮。单击我设置一个会话变量，其中包含我想要使用的样式表的路径，然后在主页面上检查此会话并相应地设置样式表。

问题是样式表更改在我再次刷新页面之后才会生效。如何强制样式表立即重新加载？

这是我的usercontrol：

<ul id="swatch">
  <li>
    <div class="green"></div>
    <asp:LinkButton ID="lbGreen" runat="server" Text="Green" ClientIDMode="Static" 
          onclick="lbGreen_Click"></asp:LinkButton>
  </li>    
  <li>
    <div class="maroon"></div>
    <asp:LinkButton ID="lbMaroon" runat="server" Text="Maroon" ClientIDMode="Static" 
          onclick="lbMaroon_Click"></asp:LinkButton>
  </li>
  <li>
    <div class="silver"></div>
    <asp:LinkButton ID="lbSilver" runat="server" Text="Silver" ClientIDMode="Static" 
          onclick="lbSilver_Click"></asp:LinkButton>
  </li>
  <li>
    <div class="black"></div>
    <asp:LinkButton ID="lbBlack" runat="server" Text="Black" ClientIDMode="Static" 
          onclick="lbBlack_Click"></asp:LinkButton>
  </li>
</ul>

以下是此控件的代码：

public partial class StylesheetPicker : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void lbGreen_Click(object sender, EventArgs e)
    {
        SetStylesheet("green");
    }

    protected void lbMaroon_Click(object sender, EventArgs e)
    {
        SetStylesheet("maroon");
    }

    protected void lbSilver_Click(object sender, EventArgs e)
    {
        SetStylesheet("silver");
    }

    protected void lbBlack_Click(object sender, EventArgs e)
    {
        SetStylesheet("black");
    }

    private void SetStylesheet(string selectedStyle)
    {
        switch (selectedStyle)
        {
            case "green":
                Session["style"] = "/css/green.css";
                break;
            case "maroon":
                Session["style"] = "/css/maroon.css";
                break;
            case "silver":
                Session["style"] = "/css/silver.css";
                break;
            case "black":
                Session["style"] = "/css/black.css";
                break;
            default:
                Session["style"] = "/css/green.css";
                break;
        }                      
    }
}

然后这是我在母版页上的代码段：

if(Session["style"] != null)
{
  var stylesheet = Session["style"];
  <link rel="stylesheet" type="text/css" href="@stylesheet" />
}
else
{
  <link rel="stylesheet" type="text/css" href="/css/green.css" />
}

似乎我必须单击链接按钮两次才能更改样式表。如何在按下单击按钮时立即更改？

由于

Answer 1

为您的样式表链接元素指定一个id，然后您应该能够将其上的href更改为其他内容。此代码适用于chrome，不确定其他浏览器：

<link id="userStylesheet" rel="stylesheet" type="text/css" href="/css/green.css" />

Javascript改变它：

var linkTag = document.getElementById('userStylesheet');
linkTag.href = "css/maroon.css";

对于服务器端问题，您可能会在回复更改后重定向问题，以使其在下一页加载时生效。

Answer 2

在母版页中为样式表创建占位符，然后您可以在Page_Load / postback上设置样式表而不必刷新页面？

事实上Adding StyleSheets Programmatically in Asp.Net似乎就是你所追求的。

Answer 3

如果我没记错的话，最终发生的事情是在母版页已经评估了if之后会话变量被设置了。第二次单击只是用于在第一次单击设置会话变量后再次重新加载页面（但是要迟到以便从主服务器进行评估。

现在有更好的方法可以做到这一点，但是如果你真的想让这种方法起作用，你将不得不做一些事情，比如在设置变量后强制重新加载页面，或者比这更早地评估帖子数据。主页的手动渲染。

如何以编程方式切换样式表？

3 个答案: