در ابتدا بعد از ایجاد یک پروژهی جدید، نیاز دارید تا اسمبلی RazorEngin را توسط Package Manager Console به پروژه اضافه نماید.
Install-Package RazorEngine -Version 3.7.0
در گام بعدی نیاز است در کنترلری، یک اکشن متد را تعریف نماید که خروجی آن از نوع رشته خواهد بود و دستورات زیر در آن تعریف میشوند:
using System.Web.Mvc; using RazorEngine; namespace dynamicCSS.Controllers { public class StyleController : Controller { /// <summary> /// نام متد ارجاعی به فایل سی اس اس /// </summary> /// <returns></returns> public string Index() { //The ContentType property specifies the HTTP content type for the response. If no ContentType is specified, the default is text/HTML. Response.ContentType = "text/css"; //با استفاه از متد //ReadAllText //فایل رو خوانده و سپس از متد //Parse in Razor Class //به صورت رشته برگشت خواهیم داد return Razor.Parse(System.IO.File.ReadAllText(Server.MapPath("/Content/Site.css"))); } } }
#region Assembly RazorEngine.dll, v2.1.4039.23635 // Your Address\dynamicCSS\packages\RazorEngine.2.1\lib\.NetFramework 4.0\RazorEngine.dll #endregion using RazorEngine.Templating; using System; using System.Collections.Generic; namespace RazorEngine { public static class Razor { public static TemplateService DefaultTemplateService { get; } public static IDictionary<string, TemplateService> Services { get; } public static void AddResolver(Func<string, string> resolverDelegate); public static void AddResolver(ITemplateResolver resolver); public static void Compile(string template, string name); public static void Compile(string template, Type modelType, string name); public static void CompileWithAnonymous(string template, string name); public static string Parse(string template, string name = null); public static string Parse<T>(string template, T model, string name = null); public static string Run(string name); public static string Run<T>(T model, string name); public static void SetActivator(Func<Type, ITemplate> activator); public static void SetActivator(IActivator activator); public static void SetTemplateBase(Type type); } }
در این حالت میتوان از دستورات Razor در فایل Css نیز استفاده کرد:
@{ // در اینجا دو متغییر با کلمه کلیدی // var // ساخته و به صورت پیش فرض مقدار دهی نمودیم var redColor = "red"; var sizeMode = "100px"; } h1 { // روش استفاده از متغییرها color: @redColor !important; font-size : @sizeModel !impotant; }
//تغییر ادرس فایل به اکشن متد در کنترلر //Home //<link href="/Content/Site.Css" rel="stylesheet" /> //شکل صحیح آدرس دهی <link href="@Url.Action("Style", "Home")" rel="stylesheet" />
نکته: در صورتیکه متغیری بعد از دستورات استفاده شده تعریف گردد، با خطای زیر روبرو خواهید شد:
در خروجی نهایی تگ h1 با فونت 100 پیکسل و رنگ قرمز به نمایش در میآید: