12/26/2020 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.

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 in the _Host.cshtml file. 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)

Install Blazor Oqtane

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

Custom JavaScript In An Inline Module

Hit F5 in Visual Studio to run Oqtane. It will open up in a web browser.

Open the Administration menu.

Add the Module Creator to a page.

Fill in the details and click Create Module.

The module will be created.

Close the web browser and return to Visual Studio.

Update The Code

The Module Creator will conveniently create a Module.js file.

Open it and replace all the code with the following code:

																	/* Module JavaScript */
								
								var MyCompany = MyCompany || {};
								
								MyCompany.Test = {
																	showAlert: function (message) {
																	alert(message);
																	}
								};

To allow our code to call the JavaScript, open the Interop.cs file and add the following method to the class:

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

Open the Index.razor page (this will be the first page displayed by the module).

You will note that it already contains the following code that will load the Module.js JavaScript file and make it available to this .razor page.

																	new
									Resource {
								
																	ResourceType = ResourceType.Script,
								
																	Url = ModulePath() + "Module.js" }

To invoke the showAlert JavaScript method we created, add the following markup, to the .razor file, that will display a button:

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

Finally, add the following code to implement the method when the button is clicked:

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

Test The Code

Rebuild the Solution in Visual Studio, and hit F5 to run the application.

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.

Now you will see a ShowAlert button.

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

When we navigate to the page, and look in the F12 web browser tools, we see that the Module.js script is properly registered.

We also see that the code is loaded.

Custom JavaScript In An External Module

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

This time select the External template.

Click Create Module.

The module will be created.

Close the web browser and return to Visual Studio.

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

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

This time we will use IHostResources to register the resources to load the custom JavaScript code, rather than declaring the resources in each .razor component of the module, and setting the Declaration property to Global.

According to Shaun Walker: "The benefit of IHostResources is that it can be declared in one place in your module rather than in each razor component - but both approaches accomplish the same thing.".

In the Server project, create a Resources folder and a file called HostResources.cs using the following code:

																	using
									System.Collections.Generic;
								
								
																	using
									Oqtane.Infrastructure;
								
																	using
									Oqtane.Models;
								
																	using
									Oqtane.Shared;
								
								
																	namespace
									MyCompany.TestExternal
								
								{
									public
									class
									HostResources : IHostResources
								
																	{
								
																	public
									List<Resource> Resources =>
									new
									List<Resource>()
								
																	{
								
																	new
									Resource {
								
																	ResourceType = ResourceType.Script,
								
																	Url = "Modules/"
								
																	+ GetType().Namespace
								
																	+ "/CustomJavaScript.js"
								
																	}
								
																	};
								
																	}
								
								}

Next, create a file at:

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

using the following code:

																	/* Module Script */
								
								var MyCompany = MyCompany || {};
								
								MyCompany.CustomJavaScript = {
																	showAlert: function (message) {
																	alert(message);
																	}
								};

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.CustomJavaScript.showAlert",
																	message);
																	return
									Task.CompletedTask;
																	}
																	catch
								
																	{
																	return
									Task.CompletedTask;
																	}
																	}

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

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.