Blazor - تنفيذ العمليات الأساسية (CRUD)

Blazor Server - تنفيذ العمليات الأساسية (CRUD)

في Blazor Server، يمكننا تنفيذ العمليات الأساسية الأربعة على البيانات - إنشاء (Create)، قراءة (Read)، تحديث (Update)، حذف (Delete) - باستخدام Entity Framework Core بكل سهولة.

---

🔹 نظرة عامة على العمليات:

• Create: إضافة سجل جديد إلى قاعدة البيانات.
• Read: عرض السجلات من قاعدة البيانات.
• Update: تعديل سجل موجود.
• Delete: حذف سجل من القاعدة.

---

🔹 مثال عملي متكامل لإدارة الطلاب:

// ملف Pages/StudentsCrud.razor

@page "/studentscrud"
@inject ApplicationDbContext db

<h3>إدارة الطلاب (CRUD)</h3>

<EditForm Model="@student" OnValidSubmit="HandleSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div>
        <label>الاسم:</label>
        <InputText @bind-Value="student.Name" class="form-control" />
    </div>

    <br />
    <button type="submit" class="btn btn-primary">
        @(student.Id == 0 ? "إضافة طالب" : "تحديث بيانات الطالب")
    </button>
</EditForm>

<hr />

@if (students == null)
{
    <p>جاري التحميل...</p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>الاسم</th>
                <th>الإجراءات</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var s in students)
            {
                <tr>
                    <td>@s.Name</td>
                    <td>
                        <button class="btn btn-warning" @onclick="() => EditStudent(s)">تعديل</button>
                        <button class="btn btn-danger" @onclick="() => DeleteStudent(s.Id)">حذف</button>
                    </td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private List<Student> students;
    private Student student = new();

    protected override async Task OnInitializedAsync()
    {
        await LoadStudents();
    }

    private async Task LoadStudents()
    {
        students = await db.Students.ToListAsync();
    }

    private async Task HandleSubmit()
    {
        if (student.Id == 0)
        {
            db.Students.Add(student);
        }
        else
        {
            db.Students.Update(student);
        }

        await db.SaveChangesAsync();
        student = new Student();
        await LoadStudents();
    }

    private void EditStudent(Student s)
    {
        student = new Student
        {
            Id = s.Id,
            Name = s.Name
        };
    }

    private async Task DeleteStudent(int id)
    {
        var studentToDelete = await db.Students.FindAsync(id);
        if (studentToDelete != null)
        {
            db.Students.Remove(studentToDelete);
            await db.SaveChangesAsync();
            await LoadStudents();
        }
    }
}

---

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

• 💾 HandleSubmit: إذا كان Id == 0 نضيف سجل جديد، وإذا كان موجود نقوم بتحديث السجل الحالي.
• ✏️ EditStudent: عند الضغط على زر "تعديل"، نملأ النموذج ببيانات الطالب المختار.
• 🗑️ DeleteStudent: عند الضغط على "حذف"، يتم إزالة الطالب من القاعدة.
• 📋 LoadStudents: لجلب قائمة الطلاب من قاعدة البيانات وإعادة تحميلها بعد أي عملية.

---

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

• دائمًا بعد الإضافة أو التحديث أو الحذف، تأكد من استدعاء LoadStudents لتحديث البيانات المعروضة.
• يمكن تحسين تجربة المستخدم بإضافة رسائل تأكيد أو نوافذ تنبيه (Modals) قبل الحذف.

✅ بهذا الشكل أصبح لدينا إدارة بيانات كاملة (CRUD) داخل Blazor Server مع Entity Framework Core بطريقة منظمة واحترافية!