asp.net mvcを使って実行時にCSSを変更/編集することはできますか？

Question

です。私は以下のようなシンプルなCSSクラスを持っている：

.Container 
{ 
    width: 300px; 
    height: 100px; 
    background-image: url('../images/flags.png'); 
} 

は、それは私のMVCアプリケーションを実行している間、私はbackground-imgの値を変更することは可能ですか？私のコントローラのアクションからbackground-imageという値をどのように注入したいのですか？あなたの考え...

なぜ私はこれを行う必要があるのでしょうか？私の 前の質問を参照してください。これは50 +以上の賞金で返答されません。

Answer 1

あなたは、実行時にCSSを変更することはできませんが、代わりに新しいクラスを注入することにより、属性を上書きすることができます。

.ContainerUpdated 
{ 
    background-image: url('../images/newimage.png')!important; 
} 

Answer 2

これを行うには、いくつかの方法があります。おそらく最も簡単なのは、マスタービューの中にcssクラスを組み込み、必要なイメージの値のプロパティを持つ基底モデルを使用してビューにレンダリングすることです。

また、cssのリンクタグが別のコントローラアクションを参照できず、必要な値のクエリ文字列パラメータを取り、htmlではなくcssをレンダリングする理由はありません。コントローラは、htmlではなくcssである部分的なビューをレンダリングすることができます。

Answer 3

可能な背景イメージの数が十分に定義されていて、小さい場合、それらの背景イメージが定義されたCSSクラスを作成します。 次に、サーバー側のASP.NETまたはクライアント側のJavaScriptを使用して、HTMLのエレメントのクラスを切り替えます。

例えば：

<div class="image-container @imageClass"></div> 

あなたの代わりに、任意の画像を表示するインラインスタイルを使用してASP.NETを使用していることを設定した場合。画像自体はfunnyimageクラスに設定されたスプライトを使用して

<div class="image-container" style="background-image: url(@imageUrl);"></div> 

、ここ1：

<div class="image-container funnyimage" style="background-position: @xPos @yPos"></div> 

---

ここでカミソリのテンプレート構文で記述されたサーバー側のレンダリングを使用して、両方の2つの例があります

上記の例はすべてサーバー側のレンダリングで動作します。これは、ページを変更または再読み込みするときにイメージが切り替わることを意味します。ページが表示されている間の変更については、AJAXを使用する必要があります。

Answer 4

あなたはそれが$(".Container").css('background-image', myImage);またはあなたの頭/体にシンプルstyleタグを追加するようなjQueryのラインで解決することはできませんやっているものは何でも...

...ええ、あなたはまだあなたを管理するために注入<style>タグを使用することができますCSS。

質問 Using jquery remove style tag from html pageとjQuery CSS - Write into the <style>-tagに続いて、いくつかのAJAXとレシピを混合、ここでのアプローチがあります：

$.get(url, function(myImage){ 
    if(myImage) { 
     $('#mystyle').remove(); 

     $("<style id='mystyle'>body .Container{ background-image: url(" + resultImage + "); }</style>").appendTo("head"); 
    } 
}); 

あなたはすべてのAJAXであなたの.Containerのすべてについてあなたの背景画像を更新している。この方法では、あなたが使っているサービスに電話してください。