Blazor ScriptLoader
Documentation and examples for using the Blazor Bootstrap ScriptLoader component.
How it works #
In the following example, the jQuery script is loaded using the Script Loader component.
<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.
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.
<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;
}