Blazor

مكتمل

هناك العديد من الأساليب لإنشاء تطبيقات الويب. لإنشاء تطبيقات ويب تفاعلية وسريعة للغاية، عادة ما تستخدم الكثير من JavaScript.

هناك نهج آخر وهو استخدام Microsoft لإطار عمل Blazor، والذي يسمح لك باستخدام C# و.NET للتعامل مع جميع مخاوف تطوير الويب الخاصة بك.

ما هو Blazor؟

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

ما هو WebAssembly؟

WebAssembly هي تقنية قياسية متوفرة في كل متصفح حديث يسمح بتشغيل التعليمات البرمجية، على غرار JavaScript، في المتصفح. يمكننا استخدام الأدوات لإعداد التعليمات البرمجية C# للاستخدام في المتصفح كتطبيق WebAssembly، ويتم تضمين هذه الأدوات مع .NET SDK.

تحديث تطبيقك على الفور باستخدام Hot Reload

عند تطوير تطبيق، تريد التأكد من أن تدفق المطور الخاص بك سريع حتى تتمكن من رؤية كيفية تأثير التغييرات على تطبيقك. قد يستغرق الأمر وقتا طويلا لإجراء تغيير وحفظه وإعادة إنشاء جميع الموارد وإعادة نشر التطبيق في المستعرض.

يمكنك تحسين سير العمل هذا باستخدام Hot Reload. باستخدام Hot Reload، يمكنك تطبيق تغيير على التطبيق قيد التشغيل دون الحاجة إلى إعادة تشغيله.

مكونات Blazor

عند إنشاء تطبيقات باستخدام Blazor، يتكون تطبيقك من العديد من المكونات، كل منها له مجال مسؤوليته الخاص. لإنشاء مكونات، يمكنك استخدام ملفات Razor مع ملحق .razor. إذا، ما هو Razor؟

Razor هو بناء جملة برمجة يمزج بناء جملة HTML مع التعليمات البرمجية C#. فيما يلي مثال:

<div>@product.Name</div>

@code {
  Product product = new Product{ Name = "Blazor" }
}

في هذا المثال، يتم حل @product.Name إلى السلسلة "Blazor"، والتي يتم عرضها بعد ذلك داخل علامة div. يبدو الإخراج المعروض كما يلي:

<div>Blazor</div>

يتكون الجزء العلوي من مثال Razor من علامات HTML التي سيعرضها المكون عند تنفيذه. يمكنك عرض قيمة تعبيرات C# باستخدام الحرف @. سيستمر Razor في تفسير التعليمات البرمجية C# بعد @ حتى يحدد علامة ثم يستأنف تقديم HTML. يمكنك أن تكون صريحا حول متى يبدأ التعبير C# وينتهي باستخدام parens: @(...).

يحتوي كل شيء داخل @code {} على تعليمة C# البرمجية لتعريف أعضاء فئة المكون التي تم إنشاؤها. يمكنك التفكير في ملف Razor كطريقة ملائمة لتعريف فئة C# التي تحدد منطق عرض HTML. يمكنك استخدام كتلة @code لتعريف أعضاء C# لنوع المكون الخاص بك، مثل الحقول والخصائص والأساليب.

تصميم مكون Blazor

تعرض مكونات Blazor HTML، بحيث يمكنك نمط مكونات Blazor باستخدام أوراق أنماط CSS العادية. بدلا من ذلك، تحتوي مكونات Blazor على ميزة تسمى عزل CSS تسمح لك بإنشاء قواعد نمط تنطبق فقط على محتويات هذا المكون. من خلال إنشاء ملف بنفس اسم المكون وإضافة ملحق اسم الملف .css، يتعرف Blazor على هذه التسمية كأنماط يجب تطبيقها فقط على محتوى HTML في المكون المقابل.

يمكن لمكونات Blazor أيضا تعريف المحتوى المراد إضافته إلى رأس HTML للصفحة باستخدام علامة HeadContent خاصة:

<HeadContent>
    <style>
        ...my styles here
    </style>
</HeadContent>

يتم عرض علامة ومحتويات style هذه داخل علامة head للصفحة.

المكونات القابلة للتوجيه

ملف Home.razor هو مكون يمكن الانتقال إليه من مستعرض ويب. يحتوي على HTML وC# ومراجع لمكونات Blazor الأخرى. يمكننا تحديد هذا الملف كصفحة بسبب وجود توجيه @page "/" في السطر الأول. يعين هذا التوجيه المسار "/" إلى المكون ويرشد Blazor للاستجابة بمحتويات هذا الملف عند طلب الصفحة الافتراضية في العنوان "/".