1/23/2022 Admin

Using Custom JavaScript in Blazor Oqtane


You can implement custom JavaScript in your internal and external Blazor Oqtane modules.

Blazor Oqtane is an application that is built using Microsoft’s Blazor technology. It allows you to deploy and run modules written in Blazor. When Oqtane is deployed and running, it provides a dynamic web experience that can be run as client side Blazor or as server side Blazor.

What makes Oqtane different from other Blazor applications, is that it produces the entire website, not just a single application. Oqtane was created by Shaun Walker and is inspired by the DotNetNuke web application framework. Oqtane is a native Blazor application written from the ground up using modern .NET Core technology. It is a modular framework offering a fully dynamic page compositing model, multi-site support, designer friendly templates (skins), and extensibility via third party modules.

This article covers implementing your custom JavaScript in your own Oqtane custom modules. If you need to implement a JavaScript framework, for example for controls or themes, you will need to register the JavaScript framework. To do that, see: Using Radzen In Oqtane Modules.

In this article, we are implementing this simple custom JavaScript example by Oqtane founder Shaun Walker: Register Telerik UI for Blazor · Discussion #690 · oqtane/oqtane.framework (github.com)

To learn more about Oqtane see What is Blazor Oqtane?

Install Blazor Oqtane

image

Use the directions here to install Oqtane using Visual Studio: oqtane/oqtane.framework: Modular Application Framework for Blazor (github.com).

Custom JavaScript In An Oqtane Module

image

Add a new instance of the Module Creator to a page.

image

Click Create Module.

The module will be created.

Close the web browser and return to Visual Studio.

image

You will see that the module has been created in a folder that is at the same level, in the file system, as the Oqtane solution.

image

Open the solution in a new instance of Visual Studio (however, also keep the main Oqtane solution open in the first instance of Visual Studio).

Update The Code

image

Open the file at:

Server\wwwroot\Modules\MyCompany.TestExternal\Module.js

and replace all the code with the following code:

								
									/* Module Script */
								
									var
									MyCompany = MyCompany || {};
								

								
MyCompany.TestExternal = {
								
									showAlert:
									function
									(message) {
								
									alert(message);
								
									}
								
};

image

In the Client project, open the Interop.cs file and add the following method to the class:

								
									public
									Task ShowAlert(string
									message)
								
									{
								
									try
								
									{
								
									_jsRuntime.InvokeVoidAsync(
								
									"MyCompany.TestExternal.showAlert",
								
									message);
								
									return
									Task.CompletedTask;
								
									}
								
									catch
								
									{
								
									return
									Task.CompletedTask;
								
									}
								
									}

image

In the Client project, open the Index.razor file and add the following markup to display the button to invoke the JavaScript:

								
									<
									button
									class="btn btn-primary"
									@onclick="ShowAlert"
									>
								
									ShowAlert
									</
									button
									>
								

Finally, add the following code to implement the method:

								
									private
									async Task ShowAlert()
								
									{
								
									var interop =
									new
									Interop(JSRuntime);
								
									await interop.ShowAlert("Test");
								
									}

image

Rebuild the MyCompanyTestExternalSolution in Visual Studio, and hit F5 to run the application in the instance of Visual Studio that contains the Oqtane solution.

If you have not already done so, click the Activate Module button to activate the module and place an instance of it in your Oqtane portal.

image

You will see a ShowAlert button.

When you click it, the JavaScript will run, and a JavaScript popup will display.

Download

The project is available on the Downloads page on this site.

You must have Visual Studio 2022 (or higher) installed to run the code.

Links (BlazorHelpWebsite.com)

What is Blazor Oqtane?

Upgrading a Blazor Oqtane Module

Blazor Oqtane Survey Module

Using Syncfusion In Oqtane Modules

Using Radzen In Oqtane Modules

Using Custom JavaScript in Blazor Oqtane

Creating a Custom Distribution of Blazor Oqtane Using Site Templates

Upgrading a Blazor Oqtane Module

Links (other)

Support for dynamic inclusion of global resources in _host.cshtml

www.oqtane.org

oqtane.framework

An error has occurred. This application may no longer respond until reloaded. Reload 🗙