Blazor Script Loader

Documentation and examples for using the Blazor Bootstrap Script Loader component.

How it works#

In the following example, the jQuery script is loaded using the Script Loader component.
Razor
<ScriptLoader Async="true"
              Class="mt-4"
              ScriptId="script1"
              Source="//cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js" />
Test
To test whether the jQuery script has been loaded successfully, run $('#script1')[0] in the browser console.
Blazor Script Loader - Test whether the jQuery script has been loaded successfully

Events#

Blazor Bootstrap Script Loader component exposes two events.
Event Name Description
OnError An event that is fired when a script loading error occurs.
OnLoad An event that is fired when a script has been successfully loaded.
In the following example, an incorrect script source is specified. This is why the OnError callback event is called, and the message is updated with the error message.
Razor
<ScriptLoader Async="true"
              Class="mt-4"
              OnLoad="OnScriptLoad"
              OnError="OnScriptError"
              ScriptId="script2"
              Source="//cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min1.js"/>

<div class="text-danger">@message</div>

@code {
    string? message;
    private void OnScriptLoad() => message = "Script loaded successfully.";
    private void OnScriptError(string errorMessage) => message = errorMessage;
}