Blazer یک فریمورک جدید توسعه وب single-page از سوی مایکروسافت ه.Blazor به توسعه دهندگان دات نت اجازه میده تا به سرعت برنامه های single-page را توسعه دهند، چون برای نوشتن منطق سمت کلاینت به جای جاوا اسکریپت از  Csharp  استفاده می کنه.

 از اونجایی که در Blazer تگهای اسکریپت را فقط به فایل  root  HTML میتونید اضافه کنید, افزودن یک فایل جاوا اسکریپت فقط در یک component ، دشواره و تریکی هست.

در این پست توضیح خواهم داد که چگونه می توانیم کد جاوا اسکریپت را به صورت داینامیک به یک کامپوننت در Blazor اضافه کنیم.

یک اسکریپت لودر ایجاد کنید
یک تابع جدید به فایل script.js اضافه کنید. این تابع یک فایل اسکریپت را از URL مشخص شده بارگیری می کند.

function loadJs(sourceUrl) {
    if (sourceUrl.Length == 0) {
        console.error("Invalid source URL");
        return;
    }

    var tag = document.createElement('script');
    tag.src = sourceUrl;
    tag.type = "text/javascript";

    tag.onload = function () {
        console.log("Script loaded successfully");
    }

    tag.onerror = function () {
        console.error("Failed to load script");
    }

    document.body.appendChild(tag);
}

این فایل اسکریپت را به داکیومنت اصلی _Host.cshtml اضافه کنید. این فایل در پوشه Shared قرار خواهد گرفت.

/* Add this code above the Blazor server script */
<script src="/js/site.js"></script>
<script src="_framework/blazor.server.js"></script>

IJSRuntime را اینجکت کنید

به کامپوننت Index.razor یا هر کامپوننت دیگری که می‌خواهید اسکریپت‌ها را به صورت داینامیک بارگذاری کنید، IJSRuntime را اینجکت کنید.

@inject IJSRuntime _js

سپس، متد OnAfterRenderAsync را override کنید و تابع loadJs را فراخوانی کنید.

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    var targetUrl = "https://unpkg.com/sweetalert/dist/sweetalert.min.js";
    await _js.InvokeVoidAsync("loadJs", targetUrl);
}

در این مثال، ما در حال بارگیری کتابخانه Sweetalert از یک CDN هستیم. می توانید این URL را با URL کد جاوا اسکریپت خود جایگزین کنید.

فراخوانی JS با استفاده از IJSRuntime
اکنون، ما یک فایل اسکریپت جدید را به صورت پویا از کامپوننت بارگذاری کرده ایم. هر تابعی از اسکریپت جدید اضافه شده را می توان با کمک IJSRuntime فراخوانی کرد.

در اینجا یک مثال است.

@page "/"
@inject IJSRuntime _js;

<h1>Hello, world!</h1>

Welcome to your new app.

<button @onclick="Alert">Show Alert</button>

@code{
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var targetUrl = "https://unpkg.com/sweetalert/dist/sweetalert.min.js";
        await _js.InvokeVoidAsync("loadJs", targetUrl);

    }

    async Task Alert()
    {
        await _js.InvokeVoidAsync("swal", "Success!", "Script loaded", "success");
    }
}