Skip to main content

Blazor Script Loader

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

Blazor Progress - How it works

Script Loader Parameters

NameTypeDefaultRequiredDescriptionAdded Version
AsyncboolfalseGets or sets the async.1.11.0
ScriptIdstring?nullGets or set the script id.1.11.0
Sourcestring?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

NameDescriptionAdded Version
OnErrorAn event that is fired when a script loading error occurs.1.11.0
OnLoadAn 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"
Source="//" />

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

See demo here.


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"

<div class="text-danger">@message</div>
@code {
string? message;
private void OnScriptLoad() => message = "Script loaded successfully.";
private void OnScriptError(string errorMessage) => message = errorMessage;