🔹 Blazor - استخدام Forms و EditForm للتعامل مع المدخلات

في Blazor، يمكن التعامل مع النماذج (Forms) بطريقة مرنة وقوية باستخدام المكون <EditForm>. يسمح هذا المكون بربط نموذج ببيانات، وإجراء التحقق من الصحة، وتنفيذ دوال عند الإرسال.

---

🧱 ما هو EditForm؟

هو مكون Blazor يُستخدم لإنشاء نموذج مرتبط بكائن بيانات (Model)، ويوفر التحقق من الصحة (Validation) بشكل تلقائي بناءً على الخصائص المعنونة بـ [DataAnnotations].

---

🛠️ مثال عملي بسيط على EditForm

✅ 1. إنشاء الكلاس المرتبط بالنموذج:


public class ContactFormModel
{
    [Required(ErrorMessage = "الاسم مطلوب")]
    public string? Name { get; set; }

    [Required(ErrorMessage = "البريد الإلكتروني مطلوب")]
    [EmailAddress(ErrorMessage = "صيغة البريد غير صحيحة")]
    public string? Email { get; set; }
}

✅ 2. استخدام EditForm في الصفحة:


@using System.ComponentModel.DataAnnotations

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

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

    <div class="mb-3">
        <label class="form-label">البريد الإلكتروني</label>
        <InputText class="form-control" @bind-Value="formModel.Email" />
    </div>

    <button class="btn btn-primary" type="submit">📤 إرسال</button>
</EditForm>

@code {
    private ContactFormModel formModel = new();

    void HandleSubmit()
    {
        Console.WriteLine($"✅ تم الإرسال: {formModel.Name} - {formModel.Email}");
    }
}

---

📌 مكونات مهمة داخل EditForm

<DataAnnotationsValidator />: يفعل التحقق من الصحة بناءً على Data Annotations.
<ValidationSummary />: يعرض قائمة بجميع الأخطاء في أعلى النموذج.
<InputText>, <InputNumber>, <InputSelect>: مكونات إدخال تدعم التحقق من الصحة.

---

🎯 طرق معالجة النتيجة


<EditForm Model="@formModel"
          OnValidSubmit="HandleValid"
          OnInvalidSubmit="HandleInvalid">

OnValidSubmit: يتم استدعاؤها عندما يكون النموذج صحيحًا.
OnInvalidSubmit: يتم استدعاؤها إذا كان هناك خطأ في التحقق.

---

💡 ملاحظات هامة

يجب أن يكون النموذج مرتبطًا بكائن (Model) وليس فقط متغيرات عشوائية.
لا تنسَ استخدام مكونات الإدخال الخاصة بـ Blazor مثل <InputText> للحصول على تحقق تلقائي.
يمكن تخصيص رسائل الأخطاء باستخدام الخصائص ErrorMessage داخل DataAnnotations.

---

✅ خلاصة الدرس

استخدام <EditForm> في Blazor هو الطريقة الرسمية لبناء نماذج تفاعلية وآمنة. يسمح بربط البيانات والتحقق من صحتها بطريقة بسيطة واحترافية باستخدام DataAnnotations.

بحث هذه المدونة الإلكترونية

Code3arabi | محمود السكري