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.

<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.

See demo here.

Events

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;
}