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

🔹 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 - قائمة منس...

🔹 Blazor - التحقق من صحة الحقول وعرض الرسائل Blazor يوفّر نظام تحقق من صحة (Validation) مدمج، يعتمد على Data Annotations . في هذا الدرس سنتعلم كيفية التحقق من صحة الحقول داخل النموذج، وطريقة عرض رسائل الخطأ بجانب كل حقل بشكل واضح وجذاب. --- ✅ التحقق باستخدام DataAnnotations Blazor يعتمد على السمات (Attributes) داخل الكلاس للتحقق، مثل: public class LoginModel { [Required(ErrorMessage = "اسم المستخدم مطلوب")] public string? Username { get; set; } [Required(ErrorMessage = "كلمة المرور مطلوبة")] [StringLength(20, MinimumLength = 6, ErrorMessage = "يجب أن تكون كلمة المرور بين 6 و 20 حرفًا")] public string? Password { get; set; } } --- 🧪 عرض رسائل الخطأ بجانب الحقول يمكن استخدام <ValidationMessage For=... /> أسفل كل حقل لعرض رسالة الخطأ الخاصة به. <EditForm Model="@loginModel" OnValidSubmit="SubmitForm"> <DataAnnotationsValidator /> <div class="mb-3">...

🔹 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"> <Data...

🔹 Blazor - التعامل مع أخطاء التنفيذ (Runtime Errors) في التطبيقات الواقعية، من الطبيعي أن تحدث أخطاء أثناء التشغيل (مثل NullReference أو مشكلة في API). في هذا الدرس سنتعلم كيفية رصد هذه الأخطاء، التعامل معها بشكل سليم، و عرض رسائل مخصصة للمستخدم دون انهيار الصفحة. --- 🧠 ما هو Runtime Error؟ Runtime Errors هي الأخطاء التي تحدث أثناء تشغيل التطبيق وليس أثناء ترجمته (Build). مثل: محاولة الوصول إلى خاصية كائن غير مهيأ، فشل الاتصال بالخادم، أو تقسيم على صفر. --- 🛠️ 1. استخدام try-catch داخل المكون أفضل أسلوب للتعامل مع الأخطاء البسيطة مباشرة داخل الدوال هو استخدام try-catch: <button class="btn btn-danger" @onclick="LoadData">تحميل البيانات</button> @if (!string.IsNullOrEmpty(ErrorMessage)) { <div class="alert alert-danger mt-2">⚠️ @ErrorMessage</div> } @code { private string? ErrorMessage; async Task LoadData() { try { // كود قد يسبب خطأ var result =...

🔹 Blazor - إنشاء صفحة خطأ 404 مخصصة عندما يزور المستخدم رابطًا غير موجود في تطبيق Blazor، يتم عرض رسالة خطأ افتراضية غير جذابة. في هذا الدرس سنتعلم كيف ننشئ صفحة خطأ 404 مخصصة وجذابة، لتعزيز تجربة المستخدم. --- 🧱 أين تُعرض صفحات NotFound؟ التحكم في عرض صفحات 404 يتم من خلال مكون <Router> الموجود في ملف App.razor . بداخله يوجد بلوك <NotFound> وهو المكان الذي يتم فيه عرض محتوى الصفحة عند عدم تطابق أي Route. --- 🛠️ خطوات إنشاء صفحة خطأ 404 مخصصة ✅ 1. تحرير App.razor <Found Context="routeData"> <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /> </Found> <NotFound> <LayoutView Layout="@typeof(MainLayout)"> <Error404 /> </LayoutView> </NotFound> ✅ 2. إنشاء مكون Error404.razor <div class="text-center mt-5"> <h1 class="display-1 text-danger">404</h...

🔹 Blazor - استخدام Layout داخل Layout آخر (Nested Layouts) في Blazor يمكنك استخدام أكثر من Layout متداخل، حيث يعتمد أحد الـ Layouts على آخر أكبر منه. هذا مفيد عندما تريد تقسيم الهيكل إلى أجزاء: مثل Layout عام يحتوي على Layout فرعي للأقسام الإدارية أو أجزاء الموقع. --- 🧠 ما هو Nested Layout؟ هو عندما يقوم Layout فرعي باستخدام Layout رئيسي. يعني: بدل ما تكون الصفحة فقط هي من تُستخدم داخل Layout، يمكن أن يكون Layout نفسه داخل Layout آخر! --- 🛠️ خطوات إنشاء Layout داخل Layout ✅ 1. أنشئ Layout عام (خارجي): <div class="p-4 border"> <h2>🌐 إطار خارجي (OuterLayout)</h2> @Body </div> ✅ 2. أنشئ Layout فرعي (داخلي) يستخدم الخارجي: @layout OuterLayout <div class="p-3 bg-light"> <h4>📁 إطار داخلي (InnerLayout)</h4> @Body </div> ✅ 3. صفحة تستخدم الـ InnerLayout فقط: @page "/nested-layout" @layout InnerLayout <p>✅ هذه الصفحة داخل Layout داخلي، والذي بدوره داخل L...