|آموزش جامع Microsoft Blazor|فراخوانی توابع جاوا اسکریپت در فریمورک Blazor|

فراخوانی توابع جاوا اسکریپت در فریمورک Blazor

فریمورک بلیزر

یک فریمورک سمت کاربر (frontend) است، اما هیچ دسترسی مستقیمی به DOM API مرورگر ندارد.

• به عنوان توسعه دهندگان وب، می خواهیم به API های مرورگر و توابع جاوا اسکریپت موجود دسترسی داشته باشیم.

• زمان هایی وجود دارد که کد .NET

  در فریم ورک بلیزر

  نیازمند فراخوانی یک تابع جاوا اسکریپت باشد.

• برای مثال، یک فراخوانی جاوا اسکریپت می تواند قابلیت ها یا عملکرد مرورگر را از یک کتابخانه جاوا اسکریپت، برای یک

  فریمورک بلیزر

  ، در معرض نمایش قرار دهد.

جاوا اسکریپت Interop

برنامه کاربردی فریمورک blazor

می تواند توابع جاوا اسکریپت را از .NET و متدهای .NET را از کد جاوا اسکریپت فراخوانی کند. این خصیصه فراخوانی یک متد JS از کد C# و بالعکس، به عنوان interop جاوا اسکریپت شناخته می شود.

• فریم ورک بلیزر

  برای اداره کردن اعمال نفوذ DOM و فراخوانی های API مرورگر، از interop جاوا اسکریپت استفاده می کند.

• برای فراخوانی یک جاوا اسکریپت از .NET ، از IJSRuntime استفاده کنید که از طریق JSRuntime.Current در دسترس است.

حال بیاید دو تابع جاوا اسکریپت را به فایل index.html اضافه کنیم.

    < app>Loading...< /app>

    < script src="_framework/blazor.webassembly.js">
        < /script>
    < script type="blazor-boot">
        < /script>
        < script>
        function JSMethod() {
            $ ("#demop").text("JavaScript function called from C#");
        }
        < /script>
                    < script>
        function CSMethod() {
            DotNet.invokeMethodAsync('BlazorApplication', 'CSCallBackMethod');
        }
        < /script>

        

• تابع JSMethod، متن تگ p که شامل شناسه demop است را به تابع جاوا اسکریپت فراخوانی شده از C# ، تنظیم خواهد کرد.

• تابع CSMethod یک باز فراخوانی(call back) به متد CSCallBackMethod از C# که بعدا تعریف می شود، خواهد داشت.

حال یک مولفه جدید بلیزر با نام JSInterop.cshtml را بسازید و توابع زیر را اضافه کنید.

@ functions {
    protected static string message { get; set; }
    
    protected void CallJSMethod()
    {
        JSRuntime.Current.InvokeAsync< bool>("JSMethod");
    }

    protected void CallCSMethod()
    {
        JSRuntime.Current.InvokeAsync< bool>("CSMethod");
    }
    
    [JSInvokable]
    public static void CSCallBackMethod()
    {
        message = "C# function called from JavaScript";
    }
}

• CallJSMethod و CallCSMethod با استفاده از متد JSRuntime.Current.InvokeAsync ، توابع JS ، JSMethod و CSMethod را فراخوانی می کنند.

• متد JSRuntime.Current.InvokeAsync ، می تواند دو پارامتر داشته باشد : نام تابع JS و هر پارامتر دیگری که باید برای تابع JS فراهم شود. اما ما هیچ پارامتری را به تابع JS پاس نمی دهیم.

• CSCallBackMethod یک متد ایستا است، و از تابع جاوا اسکریپت CSMethod فراخوانی خواهد شد.

• دارای ویژگی [JSInvokable] است.

• این متد، مقدار یک پیام متغیر رشته ای که رو UI نمایش داده خواهد شد را تعیین می کند.

اضافه کردن دو دکمه به فایل JSInterop.cshtml ، متدهای CallJSMethod و CallCSMethod را در رویداد onclick ، فراخوانی می کند.

@ page "/jsinterop"
@ using BlazorApplication.Pages
@ using Microsoft.JSInterop

< h1>JavaScript Interop Demo< /h1>

< hr />



< button class="btn btn-primary" onclick="@ CallJSMethod">Call JS Method< /button>
< button class="btn btn-primary" onclick="@ CallCSMethod">Call C# Method< /button>
< br />

< p id="demop">< /p>
< br />

< p>@ message< /p>

@ functions {
    protected static string message { get; set; }
    
    protected void CallCSMethod()
    {
        JSRuntime.Current.InvokeAsync< bool>("CSMethod");
    }
    
    protected void CallJSMethod()
    {
        JSRuntime.Current.InvokeAsync< bool>("JSMethod");
    }
    
    [JSInvokable]
    public static void CSCallBackMethod()
    {
        message = "C# function called from JavaScript";
    }
}

برای فراخوانی توابع جاوا اسکریپت و متد C# ، بر روی دکمه ها کلیک کنید.