Blazor - الاتصال بـ API خارجي باستخدام HttpClient

Blazor Server - الاتصال بـ API خارجي باستخدام HttpClient

لجلب البيانات أو إرسالها عبر الإنترنت، نستخدم الكلاس HttpClient في Blazor بطريقة بسيطة جدًا ومدمجة ضمن النظام.

🔹 كيفية إعداد HttpClient:

• في Blazor Server، يتم حقنه (Inject) تلقائيًا في المشروع الجديد.
• فقط تحتاج إلى استخدامه مباشرة داخل مكوناتك (Components) أو خدماتك (Services).

🔹 مثال عملي: جلب بيانات من API:

// ملف FetchDataExample.razor

@page "/fetchdataexample"
@inject HttpClient Http

<h3>جلب بيانات من API</h3>

@if (posts == null)
{
    <p>جاري التحميل...</p>
}
else
{
    <ul>
        @foreach (var post in posts)
        {
            <li>@post.Title</li>
        }
    </ul>
}

@code {
    private List<Post> posts;

    protected override async Task OnInitializedAsync()
    {
        posts = await Http.GetFromJsonAsync<List<Post>>("https://jsonplaceholder.typicode.com/posts");
    }

    public class Post
    {
        public int Id { get; set; }
        public string Title { get; set; }
    }
}

---

🔹 شرح مفصل للكود:

• @inject HttpClient Http: يحقن كائن HttpClient الجاهز للاستخدام.
• Http.GetFromJsonAsync: يقوم بإرسال طلب GET إلى الرابط المحدد ويحول الاستجابة إلى List من الكائنات.
• يتم تخزين النتيجة داخل المتغير posts وعرضها على الشاشة باستخدام حلقة foreach.

---

🔹 ملاحظات إضافية:

• يمكنك استخدام PostAsJsonAsync لإرسال بيانات إلى API.
• يمكنك استخدام PutAsJsonAsync لتحديث بيانات.
• استخدم DeleteAsync لحذف بيانات.

✅ بفضل HttpClient يمكنك التواصل مع أي خدمة ويب (Web API) بسهولة تامة داخل Blazor Server.