الوصول إلى البيانات من مكون Blazor

7 دقائق

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

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

في هذه الوحدة، تتعلم كيفية الوصول إلى البيانات وعرضها ضمن ترميز HTML لعرضها للمستخدم.

إنشاء خدمة بيانات مسجلة

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

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

Note

تتضمن مصادر البيانات التي يمكنك استخدامها في تطبيق Blazor قواعد البيانات الارتباطية وقواعد بيانات NoSQL وخدمات الويب وخدمات Azure المختلفة والعديد من الأنظمة الأخرى. يمكنك استخدام تقنيات .NET مثل Entity Framework وعملاء HTTP وODBC (اتصال قاعدة البيانات المفتوحة) للاستعلام عن هذه المصادر. هذه التقنيات خارج نطاق هذه الوحدة النمطية. هنا ، تتعلم كيفية تنسيق واستخدام البيانات التي حصلت عليها من أحد هذه المصادر والتقنيات.

يبدأ إنشاء خدمة مسجلة بكتابة فئة تحدد خصائصها. فيما يلي مثال قد تكتبه لتمثيل بيتزا:

namespace BlazingPizza.Data;

public class Pizza
{
    public int PizzaId { get; set; }
    
    public string Name { get; set; }
    
    public string Description { get; set; }
    
    public decimal Price { get; set; }
    
    public bool Vegetarian { get; set; }
    
    public bool Vegan { get; set; }
}

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

بعد ذلك، يمكنك تحديد الخدمة:

namespace BlazingPizza.Data;

public class PizzaService
{
    public Task<Pizza[]> GetPizzasAsync()
    {
    // Call your data access technology here
    }
}

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

يمكنك تسجيل الخدمة عن طريق إضافة سطر إلى قسم Add Services to the container في ملف Program.cs:

...
// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
// Register the pizzas service
builder.Services.AddSingleton<PizzaService>();
...

استخدام خدمة للحصول على البيانات

الآن يمكنك استخدام الخدمة التي حددتها عن طريق استدعائه في مكون Blazor والحصول على البيانات. لنفترض أن لديك رمز المكون التالي، وتريد عرض البيتزا فيه:

@page "/pizzas"

<h1>Choose your pizza</h1>

<p>We have all these delicious recipes:</p>

إدخال الخدمة

قبل أن تتمكن من استدعاء الخدمة من المكون، يجب استخدام إدخال التبعية لإضافة الخدمة. أدخل الخدمة عن طريق إضافة التعليمات البرمجية التالية بعد توجيه @page:

@using BlazingPizza.Data
@inject PizzaService PizzaSvc

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

تجاوز أسلوب OnInitializedAsync

مكان جيد لاستدعاء الخدمة والحصول على البيانات في أسلوب OnInitializedAsync. يتم تشغيل هذا الحدث عند اكتمال تهيئة المكون وتلقي معلماته الأولية، ولكن قبل عرض الصفحة وعرضها للمستخدم. يتم تعريف الحدث على الفئة الأساسية لمكون Blazor. يمكنك تجاوزه في كتلة التعليمات البرمجية كما في هذا المثال:

protected override async Task OnInitializedAsync()
{
    \\ Call the service here
}

الاتصال بالخدمة للحصول على البيانات

عند استدعاء الخدمة، استخدم الكلمة الأساسية await لأن الاستدعاء غير متزامن:

private Pizza[] todaysPizzas;

protected override async Task OnInitializedAsync()
{
    todaysPizzas = await PizzaSvc.GetPizzasAsync();
}

عرض البيانات للمستخدم

بعد الحصول على بعض البيانات من الخدمة، ستحتاج إلى عرضها للمستخدم. في مثال البيتزا، نتوقع أن تقوم الخدمة بإعادة قائمة البيتزا التي يمكن للمستخدمين الاختيار من بينها. يتضمن Blazor مجموعة غنية من التوجيهات التي يمكنك استخدامها لإدراج هذه البيانات في الصفحة التي يراها المستخدم.

التحقق من وجود بيانات

أولا ، نحدد ما تعرضه الصفحة قبل تحميل البيتزا عن طريق التحقق مما إذا كانت المجموعة todaysPizzasnull. لتشغيل رمز العرض الشرطي في مكون Blazor، استخدم توجيه @if:

@if (todaysPizzas == null)
{
    <p>We're finding out what pizzas are available today...</p>
}
else
{
    <!-- This markup will be rendered once the pizzas are loaded -->
}

يعرض توجيه @if العلامات في كتلة التعليمات البرمجية الأولى فقط إذا كان تعبير C# يرجع true. يمكنك أيضا استخدام كتلة التعليمات البرمجية else if لتشغيل اختبارات أخرى وعرض العلامات إذا كانت صحيحة. وأخيرا، يمكنك تحديد كتلة التعليمات البرمجية else لعرض التعليمات البرمجية إذا لم يتم إرجاع أي من الشروط السابقة بشكل صحيح. من خلال التحقق من null وجود مكون @if الرمز ، فإنك تضمن أن Blazor لا تحاول عرض تفاصيل البيتزا قبل الحصول على البيانات من الخدمة.

Note

يتضمن Blazor أيضا توجيه @switch لعرض العلامات استنادا إلى اختبار قد يرجع قيما متعددة. يعمل توجيه @switch بطريقة مشابهة لعبارة switch C#‎.

عرض مجموعة من الكائنات

إذا نفذ Blazor عبارة else في التعليمات البرمجية السابقة، فأنت تعلم أنه تم الحصول على بعض أنواع البيتزا من الخدمة. المهمة التالية هي عرض هذه البيتزا للمستخدم. لنلق نظرة على كيفية عرض البيانات في جدول HTML بسيط.

لا نعرف عدد البيتزا المتوفرة عندما نقوم بترميز هذه الصفحة. يمكننا استخدام توجيه @foreach للحلقة عبر جميع الكائنات في مجموعة todaysPizzas وعرض صف لكل واحد:

<table>
 <thead>
  <tr>
   <th>Pizza Name</th>
   <th>Description</th>
   <th>Vegetarian?</th>
   <th>Vegan?</th>
   <th>Price</th>
  </tr>
 </thead>
 <tbody>
  @foreach (var pizza in todaysPizzas)
  {
   <tr>
    <td>@pizza.Name</td>
    <td>@pizza.Description</td>
    <td>@pizza.Vegetarian</td>
    <td>@pizza.Vegan</td>
    <td>@pizza.Price</td>
   </tr>
  }
 </tbody>
</table>

لقطة شاشة توضح كيفية ظهور قائمة البيتزا على مكون Blazor.

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

Note

يتضمن Blazor توجيهات التكرار الحلقي الأخرى، مثل @for@while@do while. ترجع هذه التوجيهات كتلا متكررة من العلامات. وهي تعمل بطريقة مشابهة forC# المكافئة whileوالحلقات do...while.

في الوحدة التالية، ستقوم بتسجيل خدمة البيانات الخاصة بك!

الملاحظات

هل كانت هذه الصفحة مفيدة؟

الوصول إلى البيانات من مكون Blazor

التحقق من معرفتك

الملاحظات