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

スタイルシートを変更するには、linkbuttonsを2 回クリックする必要があるようです。ボタンをクリックするとすぐに変化するようにするにはどうすればよいですか？

ありがとう

4

3 に答える 3

2

スタイルシートのリンク要素に id を指定すると、href を別のものに変更できるはずです。このコードはクロムで動作しますが、他のブラウザについては不明です:

<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 でプログラムによって StyleSheets を追加することは、あなたが求めているもののようです。

于 2012-06-18T15:57:32.853 に答える
1

私が正しく覚えていれば、マスターページがすでにifを評価した後にセッション変数が設定されているということです。2 回目のクリックは、最初のクリックでセッション変数が設定された後、ページをもう一度リロードするだけです (ただし、マスターからの評価には遅れます)。

最近はこれを行うためのより良い方法がありますが、本当にこのアプローチを機能させたい場合は、変数が設定された後に強制的にページをリロードするか、マスター ページのレンダリングより前に投稿データを評価する必要があります。手動で。

于 2012-06-18T15:59:50.043 に答える