1

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

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

这是我的用户控件：

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

看来我必须单击链接按钮两次才能更改样式表。我该怎么做才能在单击按钮时立即更改？

谢谢

4

3 回答 3

2

给您的样式表链接元素一个 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";

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

于 2012-06-18T16:17:00.450 回答
1

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

事实上，在 Asp.Net 中以编程方式添加样式表似乎是您所追求的。

于 2012-06-18T15:57:32.853 回答
1

如果我没记错的话，最终发生的事情是会话变量是在母版页已经评估了 if 之后设置的。第二次点击只是在第一次点击中设置会话变量后再次重新加载页面（但从 master.

现在有更好的方法来做到这一点，但如果你真的想让这种方法发挥作用，你将不得不做一些事情，比如在设置变量后强制页面重新加载，或者在母版页渲染之前评估发布数据手动。

于 2012-06-18T15:59:50.043 回答