15

CSS ファイルで Razor を使用するにはどうすればよいですか?

私はしばらくRazor View Engineを使用しており、スタイル シートで使用することに興味がありました。Razorは.cshtml<style>ファイルのブロックで使用できますが、外部の.cssファイルでも使用できるかどうか疑問に思っていました ( .cscss形式が必要です)。それでググってみたところ、以下の2つが見つかりました。

最初のものはLESSです: 「動的スタイルシート言語」。すべての機能を備えた使いやすく強力なように見えますが、Razor-C# が本当に必要です。

2 つ目はDynamic CSS Using Razor Engineで、CodeProject の記事で、私が望んでいるものに似ていますが、キャッシュや事前コンパイルのサポートはありません (「サポートなし」とは、ライターがこれらの側面について言及していないことを意味します)。また、Visual Studio で構文を強調表示したいと考えていますが、これは二次的なものです。

では、最小限のパフォーマンス コストで、できれば構文の強調表示を使用して、CSS ファイルに Razor を記述するにはどうすればよいでしょうか?

  • そのための「より完全な」プロジェクトはありますか？
  • 上記のプロジェクトを改善してキャッシング/コンパイルを実現できますか? もしそうなら、どのように？

補足として、RazorJS
というプロジェクトを見つけました。これは、キャッシングをサポートする CSS に必要な同じものの Javascript バージョンのようなものです。私は自分のニーズを明確にするためにこれに言及しています。現在、Javascript で Razor を使用する必要はありませんが、CSS で解決できれば、Javascript で同じことを行うのはそれほど難しくないと思います。

4

1 に答える 1

31

カスタム ビュー エンジンを作成できます。

public class CSSViewEngine : RazorViewEngine
{
    public CSSViewEngine()
    {
        ViewLocationFormats = new[] 
        { 
            "~/Views/{1}/{0}.cscss", 
            "~/Views/Shared/{0}.cscss" 
        };
        FileExtensions = new[] { "cscss" };
    }

    protected override IView CreateView(ControllerContext controllerContext, string viewPath, string masterPath)
    {
        controllerContext.HttpContext.Response.ContentType = "text/css";
        return base.CreateView(controllerContext, viewPath, masterPath);
    }
}

また、次のカスタム拡張機能に登録しApplication_Startます。

ViewEngines.Engines.Add(new CSSViewEngine());
RazorCodeLanguage.Languages.Add("cscss", new CSharpRazorCodeLanguage());
WebPageHttpHandler.RegisterExtension("cscss");

そして、web.config 内で拡張機能をビルド プロバイダーに関連付けます。

<compilation debug="true" targetFramework="4.0">
    <assemblies>
        ...
    </assemblies>

    <buildProviders>
        <add extension=".cscss" type="System.Web.WebPages.Razor.RazorBuildProvider, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
    </buildProviders>
</compilation>

[注: アセンブリ バインド エラーが発生した場合は、Razor エンジンのバージョンと一致するように拡張機能の種類のバージョン番号を変更する必要がある場合があります。プロジェクト内の System.Web.WebPages.Razor アセンブリへの参照のプロパティを調べることで、使用しているバージョンを確認できます]

そして最後のステップは、いくつかのコントローラーを用意することです:

public class StylesController : Controller
{
    public ActionResult Foo()
    {
        var model = new MyViewModel
        {
            Date = DateTime.Now
        };
        return View(model);
    }
}

および対応するビュー: ( ~/Views/Styles/Foo.cscss):

@model AppName.Models.MyViewModel

/** This file was generated on @Model.Date **/

body {
    background-color: Red;
}

レイアウトにスタイルとして含めることができるようになりました:

<link href="@Url.Action("Foo", "Styles")" rel="stylesheet" type="text/css" />
于 2012-04-23T13:14:32.193 に答える