Blazor Script Loader
Documentation and examples for using the Blazor Bootstrap Script Loader component.
Script Loader Parameters
| Name | Type | Default | Required | Description | Added Version |
|---|---|---|---|---|---|
| Async | bool | false | Gets or sets the async. | 1.11.0 | |
| ScriptId | string? | null | Gets or set the script id. | 1.11.0 | |
| Source | string? | null | ✔️ | This parameter specifies the URI of an external script; this can be used as an alternative to embedding a script directly within a document. | 1.11.0 |
Script Loader Events
| Name | Description | Added Version |
|---|---|---|
| OnError | An event that is fired when a script loading error occurs. | 1.11.0 |
| OnLoad | An event that is fired when a script has been successfully loaded. | 1.11.0 |
How it works
In the following example, the jQuery script is loaded using the Script Loader component.
<ScriptLoaderAsync="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
In the following example, an incorrect script source is specified.This is why theOnError callback event is called, and the message is updated with the error message.
<ScriptLoaderAsync="true"
Class="mt-4"
OnLoad="OnScriptLoad"
OnError="OnScriptError"
ScriptId="script2"
Source="//cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min1.js"/>
<divclass="text-danger">@message</div>
@code{
string? message;
privatevoidOnScriptLoad()=> message="Script loaded successfully.";
privatevoidOnScriptError(string errorMessage)=> message= errorMessage;
}