www.dntips.ir
مطالب ۳۶۹۴
نویسندگان ۲۷۶
گروه‌های مطالب ۱۰۲۴
نقشه‌های راه ۱۱۹
دوره‌ها ۱۴
اشتراک‌ها ۱۷۹۱۴
عنوان:

‫استفاده از Razor در فایل Css


نویسنده: امیدنصری
تاریخ: ۱۳۹۴/۰۳/۲۲ ۲۰:۰
آدرس: www.dntips.ir
در مقاله «استفاده از Razor در فایل‌های JavaScript و CSS» با نحوه‌ی استفاده از Razor در فایل‌های Js و Css آشنا شدید. در مقاله‌ی جاری با روش دیگری، با نحوه‌ی استفاده از Syntax Razor در فایل‌های Css آشنا خواهید شد.

در ابتدا بعد از ایجاد یک پروژه‌ی جدید، نیاز دارید تا اسمبلی 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")));
        }
    }
}
در خط 21، فایل Css موجود در پوشه‌ی Content واقع در ریشه‌ی پروژه، خوانده شده و با متد Parse در کلاس Razor پردازش و بازگشت داده می‌شود. در کد زیر تمامی متدهای موجود در کلاس Razor را می‌توانید ملاحظه کنید:
#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;
 }
و در انتها می‌بایست در Layout پروژه، آدرس فایل Css را مشخص کرد:
//تغییر ادرس فایل به اکشن متد در  کنترلر
//Home
//<link href="/Content/Site.Css" rel="stylesheet" />
//شکل صحیح آدرس دهی
<link href="@Url.Action("Style", "Home")" rel="stylesheet" />

نکته: در صورتیکه متغیری بعد از دستورات استفاده شده تعریف گردد، با خطای زیر روبرو خواهید شد:




در خروجی نهایی تگ h1  با فونت 100 پیکسل و رنگ قرمز به نمایش در می‌آید:


Image

 

 :در صورتیکه خروجی نهایی به شکل صحیح اجرا نگردید، برای تست صحیح بودن گام‌های قبلی می‌توانید اکشن متد را در مرورگر اجرا کنید 
 localhost:1599/Home/Style
مطالب مشابه