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

في هذا الدرس سنتعلم كيفية استدعاء دوال C# داخل Blazor **من JavaScript**، وهذا يفيد عندما نريد إشعار Blazor من طرف JavaScript (مثل عند الضغط على زر خارجي، أو اكتمال عملية تحميل).

---

🧠 الفكرة العامة

Blazor يتيح لنا تعريف كائن C# يمكن الوصول إليه من JavaScript باستخدام DotNetObjectReference، ثم يمكننا من خلال JS استدعاء دوال تم وسمها بـ [JSInvokable].

---

🛠️ خطوات استدعاء دالة Blazor من JavaScript

✅ 1. إنشاء دالة C# قابلة للاستدعاء من JS

public class JsInteropHelper
{
    [JSInvokable]
    public static void ShowAlertFromJs(string message)
    {
        Console.WriteLine("📥 تم استدعاء Blazor من JavaScript: " + message);
    }
}

✅ 2. استدعاؤها من JavaScript

DotNet.invokeMethodAsync("اسم_المشروع", "ShowAlertFromJs", "رسالة من JavaScript");

استبدل اسم_المشروع بـ اسم مشروع Blazor (الموجود في csproj).

---

📦 مثال عملي - زر JavaScript يستدعي C#

✅ 1. ملف JS:

// wwwroot/scripts/invoke.js
function callBlazorMethod() {
    DotNet.invokeMethodAsync("BlazorApp", "ShowAlertFromJs", "🎯 تم الاستدعاء من JavaScript");
}

✅ 2. إضافة الزر في HTML:

<button onclick="callBlazorMethod()">اتصل بـ Blazor</button>
<script src="scripts/invoke.js"></script>

✅ 3. في C# - تعريف الدالة:

[JSInvokable]
public static Task ShowAlertFromJs(string message)
{
    Console.WriteLine("🔔 Blazor تم استدعاؤه: " + message);
    return Task.CompletedTask;
}

---

🔁 إذا أردت استدعاء دالة غير ثابتة (Instance Method)

يمكنك تسجيل كائن C# في JS:

@inject IJSRuntime JS

@code {
    DotNetObjectReference<MyComponent>? objRef;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            objRef = DotNetObjectReference.Create(this);
            await JS.InvokeVoidAsync("registerBlazorObject", objRef);
        }
    }

    [JSInvokable]
    public void ReceiveData(string data)
    {
        Console.WriteLine("✅ استلمت من JS: " + data);
    }
}

// JS
let dotNetRef;

function registerBlazorObject(ref) {
    dotNetRef = ref;
}

function sendToBlazor() {
    dotNetRef.invokeMethodAsync("ReceiveData", "📨 بيانات من JS");
}

---

✅ خلاصة الدرس

يمكنك تنفيذ دوال C# داخل Blazor من خلال JavaScript باستخدام DotNet.invokeMethodAsync ووسم الدوال بـ [JSInvokable]. وهذا مفيد جدًا عند بناء واجهات تفاعلية تعتمد على JavaScript.

---

✅ انتهى قسم JavaScript Interop

تعلمت الآن كيفية الدمج بين Blazor وJavaScript في كلا الاتجاهين:

1. Blazor ⟶ JavaScript
2. JavaScript ⟶ Blazor