Script Loader
Documentation and examples for using the Script Loader 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" />
Events #
Blazor 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="@BulmaCssClass.HasTextDanger">@message</div>
@code {
string? message;
private void OnScriptLoad() => message = "Script loaded successfully.";
private void OnScriptError(string errorMessage) => message = errorMessage;
}