در مقاله «استفاده از Razor در فایلهای JavaScript و CSS» با نحوهی استفاده از Razor در فایلهای Js و Css آشنا شدید. در مقالهی جاری با روش دیگری، با نحوهی استفاده از Syntax Razor در فایلهای Css آشنا خواهید شد.
در ابتدا بعد از ایجاد یک پروژهی جدید، نیاز دارید تا اسمبلی RazorEngin را توسط Package Manager Console به پروژه اضافه نماید.
در گام بعدی نیاز است در کنترلری، یک اکشن متد را تعریف نماید که خروجی آن از نوع رشته خواهد بود و دستورات زیر در آن تعریف میشوند:
در خط 21، فایل Css موجود در پوشهی Content واقع در ریشهی پروژه، خوانده شده و با متد Parse در کلاس Razor پردازش و بازگشت داده میشود. در کد زیر تمامی متدهای موجود در کلاس Razor را میتوانید ملاحظه کنید:
در این حالت میتوان از دستورات Razor در فایل Css نیز استفاده کرد:
و در انتها میبایست در Layout پروژه، آدرس فایل Css را مشخص کرد:
نکته: در صورتیکه متغیری بعد از دستورات استفاده شده تعریف گردد، با خطای زیر روبرو خواهید شد:
در خروجی نهایی تگ h1 با فونت 100 پیکسل و رنگ قرمز به نمایش در میآید:
در ابتدا بعد از ایجاد یک پروژهی جدید، نیاز دارید تا اسمبلی 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 پیکسل و رنگ قرمز به نمایش در میآید: