إنشاء واجهة مستخدم باستخدام مكونات Blazor

مكتمل

تتيح لك مكونات Blazor تحديد صفحات الويب أو أجزاء من HTML التي تتضمن محتوى ديناميكيا باستخدام التعليمات البرمجية .NET. في Blazor، يمكنك صياغة محتوى ديناميكي باستخدام C#، بدلا من استخدام JavaScript.

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

في هذه الوحدة، تتعلم كيفية إنشاء مكونات في Blazor وكتابة التعليمات البرمجية التي تعرض المحتوى الديناميكي على هذه المكونات.

فهم مكونات Blazor

Blazor هو إطار عمل يمكن للمطورين استخدامه لإنشاء واجهة مستخدم تفاعلية غنية (UI) عن طريق كتابة التعليمات البرمجية C#. باستخدام Blazor، يمكنك استخدام نفس اللغة لجميع التعليمات البرمجية الخاصة بك، سواء من جانب الخادم أو من جانب العميل. يمكنك عرضه للعرض في العديد من المستعرضات المختلفة، بما في ذلك المستعرضات على الأجهزة المحمولة.

Note

هناك نموذجان لاستضافة التعليمات البرمجية في تطبيقات Blazor:

• Blazor Server: في هذا النموذج، يتم تنفيذ التطبيق على خادم الويب داخل تطبيق ASP.NET Core. على جانب العميل ، يتم إرسال تحديثات واجهة المستخدم والأحداث ومكالمات JavaScript من خلال اتصال SignalR بين العميل والخادم. في هذه الوحدة ، نناقش هذا النموذج ونبرمجه.
• Blazor WebAssembly: في هذا النموذج، يتم تنزيل تطبيق Blazor وتبعياته ووقت تشغيل .NET وتشغيله على المستعرض.

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

Note

يتم استخدام بناء جملة Razor لتضمين التعليمات البرمجية .NET في صفحات الويب. يمكنك استخدامه في تطبيقات MVC (Model-View-Controller) ASP.NET ، حيث يكون للملفات امتداد .cshtml . يتم استخدام بناء جملة Razor في Blazor لكتابة المكونات. تحتوي هذه المكونات على الامتداد .razor بدلا من ذلك ، ولا يوجد فصل صارم بين وحدات التحكم وطرق العرض.

فيما يلي مثال بسيط لمكون Blazor:

@page "/index"

<h1>Welcome to Blazing Pizza</h1>

<p>@welcomeMessage</p>

@code {
  private string welcomeMessage = "However you like your pizzas, we can deliver them blazing fast!";
}

في هذا المثال، تعين التعليمات البرمجية قيمة متغير سلسلة، المسمى welcomeMessage. يتم عرض هذا المتغير ضمن علامات <p> في HTML. ندرس أمثلة أكثر تعقيدا لاحقا في هذه الوحدة.

إنشاء مكونات Blazor

عند إنشاء تطبيق Blazor باستخدام blazor القالب في واجهة سطر الأوامر dotnet (CLI)، يتم تضمين العديد من المكونات افتراضيا:

dotnet new blazor -o BlazingPizzaSite

تتضمن المكونات الافتراضية الصفحة الرئيسية Index.razor ومكون العرض التوضيحي Counter.razor. يتم وضع كلا المكونين في مجلد Pages. يمكنك إما تعديل طرق العرض هذه لتناسب احتياجاتك، أو حذفها واستبدالها بمكونات جديدة.

لإضافة مكون جديد إلى تطبيق ويب موجود، استخدم هذا الأمر:

dotnet new razorcomponent -n PizzaBrowser -o Pages

• يحدد خيار -n اسم المكون المراد إضافته. يضيف هذا المثال ملفا جديدا باسم PizzaBrowser.razor.
• -o يحدد الخيار المجلد الذي تريد أن يحتوي على المكون الجديد.

Important

يجب أن يبدأ اسم مكون Blazor بحرف كبير.

بعد إنشاء المكون، يمكنك فتحه لتحريره باستخدام Visual Studio Code:

code Pages/PizzaBrowser

كتابة التعليمات البرمجية في مكون Blazor

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

دعونا ننظر في هذا المكون المثال مرة أخرى:

@page "/index"

<h1>Welcome to Blazing Pizza</h1>

<p>@welcomeMessage</p>

@code {
  private string welcomeMessage = "However you like your pizzas, we can deliver them fast!";
}

يمكنك التعرف على علامات HTML باستخدام علامات <h1> وعلامات <p>. هذا الترميز هو إطار العمل الثابت للصفحة، حيث تقوم التعليمات البرمجية بإدراج محتوى ديناميكي. تتكون علامات Razor من:

• توجيه @page: يوفر هذا التوجيه قالب توجيه إلى Blazor. في وقت التشغيل، يحدد Blazor موقع صفحة لعرضها من خلال مطابقة هذا القالب بعنوان URL الذي طلبه المستخدم. في هذه الحالة، قد يتطابق مع عنوان URL للنموذج http://yourdomain.com/index.
• توجيه @code: يعلن هذا التوجيه أن النص في الكتلة التالية هو التعليمات البرمجية C#. يمكنك وضع العديد من كتل التعليمات البرمجية كما تحتاج في مكون. يمكنك تعريف أعضاء فئة المكون في كتل التعليمات البرمجية هذه وتعيين قيمهم من العمليات الحسابية أو عمليات البحث عن البيانات أو مصادر أخرى. في هذه الحالة، تعرف التعليمات البرمجية عضو مكون واحد يسمى welcomeMessage وتعين قيمة السلسلة الخاصة به.
• توجيهات وصول العضو: إذا كنت تريد تضمين قيمة عضو في منطق العرض، فاستخدم رمز @ متبوعا بتعبير C#، مثل اسم العضو. في هذه الحالة، يتم استخدام توجيه @welcomeMessage لعرض قيمة عضو welcomeMessage في علامات <p>.