.NET Core - إنشاء Views باستخدام Razor

.NET Core - إنشاء Views باستخدام Razor

Razor هي محرك العرض (View Engine) المستخدم في ASP.NET Core لإنشاء صفحات HTML ديناميكية. يتيح لك دمج كود C# مع HTML بسهولة داخل الصفحات باستخدام الصيغة @.

---

1. صفحة Razor أساسية

افترض أنك أنشأت صفحة جديدة باسم Welcome.cshtml داخل مجلد Pages. يمكنك كتابة HTML عادي داخل الصفحة، مع دمج C# مثل المثال التالي:

@page
@model WelcomeModel
@{
    var name = "محمود";
    ViewData["Title"] = "مرحبًا";
}

<h2>مرحبًا @name!</h2>
<p>أهلاً بك في موقعنا.</p>

النتيجة ستعرض الاسم داخل الوسم <h2> باستخدام C# Razor Syntax.

---

2. طباعة بيانات من Model

يمكنك تمرير بيانات من كود الـ C# إلى الصفحة عبر PageModel. مثال:

public class WelcomeModel : PageModel
{
    public string UserName { get; set; }

    public void OnGet()
    {
        UserName = "محمود السكري";
    }
}

وفي الصفحة:

<h2>أهلاً @Model.UserName</h2>

بهذا الشكل، يتم عرض البيانات من الكود الخلفي في الواجهة مباشرة.

---

3. استخدام الحلقات والشروط

Razor يدعم كتابة الشروط والحلقات داخل الصفحة بسهولة.

@{
    var items = new List<string> { "تفاحة", "موز", "برتقال" };
}

<ul>
@foreach (var item in items)
{
    <li>@item</li>
}
</ul>

---

4. ملاحظات مهمة

• كل كود C# يبدأ بـ @.
• للكتل البرمجية (if/for/foreach)، استخدم @{ ... }.
• يمكنك دمج البيانات مباشرة في HTML بسهولة.

---

خلاصة

Razor هو أداة قوية تساعدك على دمج كود C# مع HTML لإنشاء صفحات تفاعلية وديناميكية بسهولة. في الدرس القادم، سنتعلم كيفية ربط هذه الصفحات بقواعد البيانات باستخدام Entity Framework Core.