🔹 Blazor - التعامل مع InputText و InputSelect و InputDate

توفر Blazor مكونات إدخال مدمجة متوافقة مع <EditForm>، مثل: <InputText> و<InputSelect> و<InputDate>. هذه المكونات تدعم ربط البيانات (Binding)، والتحقق من الصحة (Validation) تلقائيًا.

---

🧪 1. InputText - حقل نصي


<InputText @bind-Value="model.Name" class="form-control" />

يُستخدم لإدخال نص مثل الاسم أو البريد الإلكتروني. ويُفضَّل على <input type="text"> لأنه يدعم التحقق من الصحة تلقائيًا.

---

🔢 2. InputNumber - حقل رقمي


<InputNumber @bind-Value="model.Age" class="form-control" />

يُستخدم للأرقام الصحيحة أو العشرية. يمكن ربطه بـ int أو decimal أو double.

---

📅 3. InputDate - حقل تاريخ


<InputDate @bind-Value="model.BirthDate" class="form-control" />

يُستخدم لاختيار التاريخ من تقويم، ويجب أن تكون الخاصية المرتبطة من نوع DateTime.

---

🔽 4. InputSelect - قائمة منسدلة

مثال على قائمة اختيار الجنس:


<InputSelect @bind-Value="model.Gender" class="form-select">
    <option value="">-- اختر الجنس -->
    <option value="ذكر">ذكر</option>
    <option value="أنثى">أنثى</option>
</InputSelect>

---

📦 نموذج متكامل باستخدام الحقول المختلفة


public class PersonForm
{
    [Required] public string? Name { get; set; }
    [Range(1, 120)] public int Age { get; set; }
    public DateTime BirthDate { get; set; } = DateTime.Today;
    public string? Gender { get; set; }
}


@using System.ComponentModel.DataAnnotations

<EditForm Model="@person" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />

    <div class="mb-3">
        <label>الاسم</label>
        <InputText class="form-control" @bind-Value="person.Name" />
        <ValidationMessage For="@(() => person.Name)" />
    </div>

    <div class="mb-3">
        <label>العمر</label>
        <InputNumber class="form-control" @bind-Value="person.Age" />
        <ValidationMessage For="@(() => person.Age)" />
    </div>

    <div class="mb-3">
        <label>تاريخ الميلاد</label>
        <InputDate class="form-control" @bind-Value="person.BirthDate" />
    </div>

    <div class="mb-3">
        <label>الجنس</label>
        <InputSelect class="form-select" @bind-Value="person.Gender">
            <option value="">اختر الجنس</option>
            <option value="ذكر">ذكر</option>
            <option value="أنثى">أنثى</option>
        </InputSelect>
    </div>

    <button class="btn btn-success" type="submit">✔️ إرسال</button>
</EditForm>

@code {
    private PersonForm person = new();

    void HandleValidSubmit()
    {
        Console.WriteLine($"📝 تم حفظ البيانات: {person.Name}, {person.Age}, {person.BirthDate}, {person.Gender}");
    }
}

---

✅ خلاصة الدرس

توفر Blazor مجموعة من مكونات الإدخال المتوافقة مع التحقق من الصحة و EditForm. استخدام هذه المكونات يسهّل إدارة النماذج، ويُحسن تجربة المستخدم بشكل كبير.

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

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