🔹 Blazor - تنفيذ دوال JavaScript من Blazor

في هذا الدرس، سنتعلم كيفية تنفيذ دوال JavaScript من داخل كود Blazor C# باستخدام IJSRuntime. سنتناول حالات عملية، مثل تمرير المعاملات واستقبال القيم، وتنظيم الاستدعاءات في ملفات مستقلة.

---

🧱 الصيغة العامة لاستدعاء JavaScript

await JS.InvokeVoidAsync("اسم_الدالة", المعاملات);

• InvokeVoidAsync: تُستخدم عندما لا تُرجع الدالة قيمة.
• InvokeAsync<T>: تُستخدم عندما تُرجع الدالة قيمة من نوع T.

---

🛠️ مثال عملي - تنفيذ دالة JavaScript

✅ 1. أنشئ ملف JavaScript:

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

function addNumbers(a, b) {
    return a + b;
}

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

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

✅ 3. استدعِ الدوال من Blazor:

@inject IJSRuntime JS

<button class="btn btn-info" @onclick="Show">عرض رسالة</button>
<button class="btn btn-success ms-2" @onclick="Add">جمع 5 + 3</button>

@code {
    async Task Show()
    {
        await JS.InvokeVoidAsync("showAlert", "مرحبًا من Blazor 🎉");
    }

    async Task Add()
    {
        int result = await JS.InvokeAsync<int>("addNumbers", 5, 3);
        Console.WriteLine("النتيجة: " + result);
    }
}

---

🔄 تمرير كائنات JSON إلى JavaScript

var person = new { name = "Mahmoud", age = 30 };
await JS.InvokeVoidAsync("console.log", person);

---

📦 تنظيم الكود باستخدام ملفات JavaScript

لأفضل تنظيم، ضع كل دوال JS الخاصة بك في مجلد مثل /scripts، وسمِّ الدوال بأسماء واضحة مثل interop.showToast أو interop.scrollToTop.

يمكنك حتى إنشاء كائن JavaScript خاص بك:

// wwwroot/scripts/interop.js
window.myInterop = {
    showToast: function (msg) {
        console.log("🔔 " + msg);
    }
};

واستدعاؤه من Blazor:

await JS.InvokeVoidAsync("myInterop.showToast", "تم بنجاح ✅");

---

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

• تأكد من تحميل ملفات JavaScript قبل استخدامها.
• استخدم أسماء واضحة لدوال JS لتفادي التعارضات.
• للمشاريع الكبيرة، استخدم مكتبات JavaScript جاهزة (مثل toastr أو sweetalert).

---

✅ خلاصة الدرس

يمكنك استدعاء أي دالة JavaScript من داخل كود Blazor باستخدام IJSRuntime بسهولة. يمكنك تمرير معاملات واستقبال قيم، أو حتى التعامل مع كائنات كاملة.