استفاده از دستورات جاوااسکریپت در Blazor توسط سرویس IJsRuntime

پاسخ هوش مصنوعی

در Blazor، برای استفاده از دستورات جاوااسکریپت می توان از سرویس IJSRuntime استفاده کرد. این سرویس به شما این امکان را می دهد که با جاوااسکریپت ارتباط برقرار کنید و فراخوانی های JS را انجام دهید.

برای استفاده از IJSRuntime، ابتدا باید آن را در کامپوننت خود تزریق کنید. سپس می توانید از متدهای آن برای فراخوانی توابع جاوااسکریپت استفاده کنید.

در زیر یک مثال عملی از نحوه استفاده از IJSRuntime آورده شده است:

@page "/js-example"
@inject IJSRuntime JSRuntime

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

@code {
    private async Task CallJsFunction()
    {
        await JSRuntime.InvokeVoidAsync("showAlert", "سلام از Blazor!");
    }
}

سپس شما باید یک تابع جاوااسکریپت را در فایل wwwroot/index.html یا wwwroot/_Host.cshtml اضافه کنید:

<script>
    function showAlert(message) {
        alert(message);
    }
</script>

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

در بلیزر به صورت پیش فرض ما نمیتونیم از دستورات JavaScript در Razor Page ها استفاده کنیم. چون همونطوری که می دونید کدنویسی سمت کلایت در بلیزر توسط کد اسمبلی انجام میشه. اما با استفاده از کتابخانه IJsRunTime میتونیم این قابلیت رو فعال کنیم. به عنوان مثال فرض کنیم میخواهید از دستور زیر که یک دستور جاوا اسکریپتی هست در Razor Page خودتون استفاده کنید.

console.write('Hello');

خب دستور بالا یک دستور مربوط به جاوا اسکریپت هست و به صورت پیش فرض در Blazor غیر قابل استفاده هست. اما شما میتونید به روش زیر از دستورات جاوا اسکریپت استفاده کنید.

@inject IJSRuntime jsruntime
@page "/page"

<h3>page</h3>

@code {
    protected override async Task OnInitializedAsync()
    {
        await jsruntime.InvokeAsync<string>("console.log", "Hello");
    }
}

در مثال بالا با استفاده از این کتابخانه دستور console.log که یکی از دستورات جاوا اسکریپت می باشد رو اجرا کردیم.