🔹 Blazor - مقدمة في JavaScript Interop

Blazor هو إطار عمل يعتمد على C#، لكن في بعض الحالات ستحتاج إلى استخدام وظائف JavaScript داخل تطبيقك – مثل التعامل مع مكتبات خارجية، التفاعل مع DOM، أو استدعاء أكواد جاهزة. هنا يأتي دور JavaScript Interop.

---

🔁 ما هو JavaScript Interop؟

JavaScript Interop (اختصار لـ Interoperability) هو جسر يسمح لتطبيق Blazor باستدعاء دوال JavaScript، وأيضًا يسمح لـ JavaScript باستدعاء دوال C# في Blazor.

---

🛠️ كيف يعمل؟

يتم ذلك باستخدام خدمة IJSRuntime المدمجة في Blazor.

✅ 1. استدعاء دالة JavaScript من C#

@inject IJSRuntime JS

<button @onclick="SayHello">قل مرحبًا</button>

@code {
    async Task SayHello()
    {
        await JS.InvokeVoidAsync("alert", "مرحبًا من Blazor!");
    }
}

InvokeVoidAsync تُستخدم للدوال التي لا تُرجع قيمة.

---

✅ 2. استدعاء دالة JavaScript مخصصة

قم بإنشاء ملف JavaScript وإضافة دالة فيه:

// wwwroot/scripts/myjs.js
function showMessage(message) {
    alert("📢 " + message);
}

ثم أضف الملف إلى ملف _Host.cshtml أو index.html:

<script src="scripts/myjs.js"></script>

واستدعِ الدالة من C#:

await JS.InvokeVoidAsync("showMessage", "تم التشغيل!");

---

🔄 متى أستخدم JavaScript Interop؟

• عند الحاجة إلى مكتبة JavaScript خارجية (مثل Chart.js أو SweetAlert).
• للتعامل مع DOM مباشرة (إضافة كلاس، تمرير Scroll... إلخ).
• لتكاملات لا يمكن تنفيذها من C# فقط (مثل Google Maps، أدوات الدفع...).

---

⚠️ ملاحظات هامة

• Interop يُفضل استخدامه عند الحاجة فقط، لأنه يُقلل من أداء التطبيق لو أُفرط استخدامه.
• تأكد من تحميل ملفات JS قبل استخدامها.
• في Blazor Server، Interop يعتمد على SignalR، لذا تأخر الاستجابة ممكن.

---

✅ خلاصة الدرس

JavaScript Interop يفتح لك الباب للاستفادة من عالم JavaScript داخل تطبيقات Blazor بسهولة. في الدرس القادم، سنتعلم كيفية تنفيذ دوال JavaScript من داخل Blazor بطريقة منظمة وقابلة لإعادة الاستخدام.