CSS/Lessの剃刀？

Question

私はコンテナを作成し、いくつかのものでそれを設定するビューを持っています。ビューは、そのCSSやJavascriptを含ん

@Html.Action("Index", "Product", new { Container = "LatestProducts" }) 

：その後、私はこのような別のビュー内から呼び出す

：コンテナ名は、このようなルックスの私のコントローラの並べ替えので、ビューに渡されます同じページ上で、次のように：

<div id="@ViewBag.Container"> 
    <div class="New"></div> 
    <ul></ul> 
</div> 

<style> 
#@ViewBag.Container { 
    ... 
} 
</style> 
<script> 
    function AddProduct(container, o) { 
     var ul = $(container).find('ul'); 
     ul.append(o.whatever); 
    } 
    $(function() { 
     @foreach (var item in Model) { 
      @: AddProduct('#@ViewBag.Container', { whatever: item.whatever }); 
     } 
    }); 
</script> 

私の問題は、今私は、独自のファイルにそれを置くためにページのうち、すべてのJavaScript/CSSをリッピングだ、と私はどのように知っていないということです剃刀を書く必要なコンテナ名...

思考誰ですか？

Answer 1

この記事Dynamic Stylesheets Using Razorは問題に素晴らしい解決策を示唆しています。それは私にはLessをサポートする方法の問題を残しますが、その答えは来るかもしれません。

Answer 2

RazorJSを使用してください。

Answer 3

私はあなたのjavascriptのポイントをよく見ません。このjavascriptは、DOM readyイベントをサブスクライブし、指定されたIDを持つdivを見つけ、その中のulを検索し、モデルをループしてプロパティを追加します。なぜマークアップをサーバー上で直接生成しないのですか？それはそんなに簡単になります。

@model IEnumerable<MyViewModel> 
<div id="@ViewBag.Container"> 
    <div class="New"></div> 
    <ul> 
     @Html.DisplayForModel() 
    </ul> 
</div> 

と対応する表示テンプレート（~/Views/Shared/DisplayTemplates/MyViewModel.cshtml）中：

@model MyViewModel 
@Html.DisplayFor(x => x.Whatever) 

CSSに関する限り、あなたは別のCSSファイル内のすべての可能なスタイルを含めることができますクライアントブラウザで一度だけキャッシュされます。したがって、それが大きくなる場合でも、動的ルールを使用するよりも速くなります。