🔹 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</h1>
    <h3 class="text-muted">عذرًا، الصفحة غير موجودة!</h3>
    <p>الرابط الذي أدخلته غير صحيح أو لم يعد متاحًا.</p>
    <a class="btn btn-primary mt-3" href="/">العودة إلى الصفحة الرئيسية</a>
</div>

---

🎨 أفكار لتزيين الصفحة

استخدم أيقونة أو صورة جذابة.
أضف زر للرجوع إلى الصفحة الرئيسية أو السابقة.
اجعل النص بسيطًا وواضحًا، مع أسلوب ودّي.

---

✅ مثال محسّن بصريًا


<div class="text-center mt-5">
    <img src="images/404.svg" alt="Not Found" style="max-width: 300px;" />
    <h1 class="display-4 text-danger">404 - الصفحة غير موجودة</h1>
    <p>لا يمكننا العثور على الصفحة التي تبحث عنها.</p>
    <a class="btn btn-outline-secondary" href="/">⬅️ العودة إلى الرئيسية</a>
</div>

---

✅ خلاصة الدرس

بإنشاء صفحة خطأ 404 مخصصة، تمنح تطبيقك مظهرًا احترافيًا وتجربة مستخدم أفضل. يُنصح دائمًا بتنسيق هذه الصفحة وجعلها مفيدة للمستخدم بدلًا من عرض رسالة عامة.

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

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