آشنایی با Razor در ASP.NET CORE

Razor پیج یک امکان جدید از ASP.NET است. تمامی وب سایت‌هایی که به کمک این فریم ورک ارائه می‌شوند، کاملا کراس پلتفرم می‌باشند. به نوعی برنامه‌نویس صرفا یک بار سایت را طراحی می‌کند که بر هر سیستم عاملی قابل اجرا است. به کمک این فریم ورک می‌توان به‌ راحتی سطح بسیار بالایی از separation of concerns را ایجاد کنیم. این قابلیت نرم افزار را به حوزه‌های متفاوتی تقسیم می‌کند. هدف اصلی از ارائه‌ی Razor Pages رفع مشکلاتی است که برنامه‌نویسان با MVC داشتند. همچنین برای ایجاد کاربردهای وب قابل استفاده است. در این آموزش قصد آشنایی با Razor را داریم.

فریم ورک ASP.NET Core Razor Pages به منظور ساخت وب سایت های مبتنی بر داده و یا data-driven که قرار است به صورت پویا و متمرکز بر صفحه و یا page-focused مورد استفاده قرار بگیرند ایجاد شده است.

Razor چیست؟

Razor یک موتور نمایش (view engine) برای ایجاد صفحات وب پویا در ASP.NET Core است. این تکنولوژی به توسعه‌دهندگان اجازه می‌دهد تا کدهای C# را درون HTML بنویسند و با استفاده از آن صفحات وب پویا ایجاد کنند. Razor برای ترکیب HTML و C# از سینتکس مخصوصی استفاده می‌کند.

چرا Razor ؟

• سرعت و کارایی بالا: Razor کدها را به صورت مؤثر کامپایل می‌کند و صفحات وب سریع بارگذاری می‌شوند.
• یکپارچگی با ASP.NET Core: به طور کامل با سایر اجزای ASP.NET Core یکپارچه است.

Razor یکی از ابزارهای قدرتمند و کارآمد برای توسعه وب در ASP.NET Core است که توسعه‌دهندگان را قادر می‌سازد تا صفحات وب پویا و کاربرپسند ایجاد کنند.

ویژگی‌های Razor

• ساده و خوانا: ترکیب کدهای C# با HTML به شکل ساده و روان.
• کدنویسی تمیز: بدون نیاز به علامت‌های زیاد یا پیچیده.
• انعطاف‌پذیری: می‌توان به راحتی کدهای C# را درون HTML استفاده کرد.
• پشتیبانی از IntelliSense: در Visual Studio و Visual Studio Code پشتیبانی می‌شود و به توسعه‌دهندگان کمک می‌کند تا سریع‌تر و با خطای کمتر کدنویسی کنند.

نحوه استفاده از Razor

Razor یک engine است که توسط آن میتوان، در کد های HTML دستورات C# و یا VB نوشت. و توسط این قابلیت، میتوانیم صفحات داینامیک ایجاد کنیم. به طور مثال یک فروشگاه را در نظر بگیرید، برای هر محصول یک صفحه ایجاد نمیکنیم. بلکه یک صفحه ایجاد میکنیم و اطلاعات محصولات را در آن فراخوانی میکنیم. پس میتوانیم بینهایت محصول را در یک صفحه نمایش دهیم. در ASP.NET CORE هم توسط قابلیت Razor میتوانیم صفحات داینامیک ایجاد کنیم. در ادامه بیشتر با نحوه استفاده از Razor آشنا میشویم.

کد های تک خطی و چند خطی در Razor

• کدهای تک خطی: زمانی که کد های C# ما به صورت تک خطی است. کافی است از علامت @ استفاده کنیم. به مثال های زیر توجه کنید.

دریافت تاریخ توسط کد های Razor

@DateTime.Now.ToString()

• کدهای چند خطی: زمانی که کد های C# ما به صورت چند خطی است. کافی است از علامت @ و آکولاد باز و بسته استفاده کنیم. به مثال های زیر توجه کنید.

دریافت تاریخ توسط کد های Razor

@{
    DateTime.Now.ToString();
}

در مثال بالا مقدار تاریخ نمایش داده نمیشود. در حالت چند خطی برای نمایش Text میتوانیم از ۲ روش استفاده کنیم.

روش اول : استفاده از @

@{
    string time = DateTime.Now.ToString();
    @:Date Is @time
}

روش دوم : استفاده از تگ text

@{
    string date = DateTime.Now.ToString();
    <text>Date Is : @date</text>
}

• دسترسی به متغییر ها در Razor : در Razor به راحتی میتوان به متغییر ها با علامت @ دسترسی داشت. به مثال زیر توجه کنید.

@{
    int x = 100;
}
<p>@x</p>

• استفاده از دستورات شرطی در Razor

@{
    int x = 110;
}
@if (x == 100)
{
    <text>value = 100</text>
}
else
{
    @:value != 100
}
OR
@{
    if (x == 100)
    {
        <text>value = 100</text>
    }
    else
    {
        <text>value != 100</text>
    }
}

نکته : به جای تگ Text میتوانید از سایر تگ های Html هم استفاده کنید. مثل Span و یا …

• استفاده از حلقه در Razor

@for (int i = 0; i < 10; i++)
{
    <p>@i</p>
}

• استفاده از مدل در Razor : ویو هایی که از قابلیت Razor استفاده میکنند. توانایی این را دارند که به آن یک مدل یا بهتر است بگوییم یک کلاس C# و یا هر نوع داده ای را پاس بدهیم.

مثال – ارسال داده یک مدل به صورت تکی. فرض کنید قرار است اطلاعات یک کاربر را نمایش دهیم. ابتدا مدل کاربر را ایجاد میکنیم.

public class Users
{
    public int Id { get; set; }
    public string? Name { get; set; }
    public string? Family { get; set; }
}

سپس مدل خود را در Controller مقدار دهی کرده و به View پاس میدهیم.

public IActionResult Index()
{
    Users users = new Users() {
        Id = 1,
        Family="Ahadian",
        Name="Mohammadreza",
    };
    return View(users);
}

مدل خود را به صفحه View معرفی میکنیم.

@model WebApplication1.Models.Users

برای نمایش اطلاعات در View از کد زیر استفاده میکنیم.

@Model.Id
@Model.Name
@Model.Family

مثالی جهت ارسال داده یک مدل به صورت لیست . فرض کنید قرار است اطلاعات همه کاربر را در قالب یک لیست نمایش دهیم.

مدل خود را در Controller مقدار دهی کرده و به View پاس میدهیم.

public IActionResult Index()
{
    List<Users> users = new List<Users>() {
        new Users { Id=1,Name="Mohammadreza",Family="Ahadian"},
        new Users { Id=2,Name="Ahmadreza",Family="Jafari"},
        new Users { Id=3,Name="Alireza",Family="Akbari"},
        new Users { Id=4,Name="Hoda",Family="Mahmodi"},
        new Users { Id=5,Name="Tanaz",Family="Rezaei"}
    };
    return View(users);
}

مدل خود را به صفحه View معرفی میکنیم.

@model IEnumerable<WebApplication1.Models.Users>

برای نمایش اطلاعات در View از کد زیر استفاده میکنیم.

@{
    foreach (var item in Model)
    {
        <div>
            <span>@item.Id</span>
            <span>@item.Name</span>
            <span>@item.Family</span>
        </div>
    }
}