How To Configure Radzen And Use In Oqtane Modules

Introduction

In your Blazor Oqtane modules, you can use the Radzen Component Library.

Radzen Blazor Components is a free collection of more than 60+ native Blazor UI widgets.

Blazor Oqtane is a software application made on Microsoft's Blazor technology. It allows you to deploy and operate Blazor modules. When Oqtane is installed and operational, it provides a dynamic web experience that can be run as client-side Blazor or server-side Blazor. if you not have configured Oqtane then you can follow our Oqtane Blazor CMS And Its Configuration article.

What is Oqtane CMS?

Mr. Shaun Walker, who is also the founder of DNN, created Oqtane. "Oqtane is an open source and cross-platform modular application framework for building single-page applications," according to the Oqtane organisation. It is clear from this that Oqtane is incredibly useful for single-page application development. It has the majority of the necessary qualities that are extremely beneficial to development. It supports in-built Oauth and open ID connect, which are really useful for authentication, and you can utilise them as needed. Its most recent version has multitenant capability. It also supports the swagger UI. So we can claim that Oqtane is a framework with a lot of development features. Following that, I'll explain why we require Oqtane.

Make a Custom Oqtane External Module

Activate Module

Follow the instructions at this link: Making an External Oqtane Module in Blazor Oqtane using Custom JavaScript.

The code developed in that article will be built upon this one. You'll have to launch two Visual Studio instances. One for test2 and another for the Oqtane framework. External module.

We will apply Radzen according to the instructions found here: How to use the Radzen Blazor components.

Include the Radzen Nuget package for Blazor

NuGet Package

Right-click the Solution node in Visual Studio, where the test2.External module is loaded, and then choose Manage NuGet Packages.

Radzen Install

Look up Radzen.Blazor and click Install after choosing the Client and Server projects.

Radzen should be included. The Blazor Assembly is included in the Module Package

debugcmd

The Oqtane framework will include test2.External module (in the other Visual Studio instance).

The test2.External module must be instructed to include the Radzen.Blazor.dll.

Open the debug.cmd file and add the following line:

XCOPY "..\Server\bin\Debug\net6.0\Radzen.Blazor.dll" "..\..\oqtaneSource\Oqtane.Server\bin\Debug\net6.0\" /Y

Note: The /bin folder location has changed from net5.0 to net6.0 as part of the migration from.NET 5 to.NET 6.

Please note that where I have "oqtaneSource" you must change it with the name of your Oqtane installation's folder.

My Oqtane solution is installed under C:TempOqtaneoqtaneSource.

Imports.razor should now include Using Statements

ImportRazor

Add the following using statements by opening the _Imports.razor file in the Client project:

@using Radzen
@using Radzen.Blazor

Implement IServerStartup to call Radzen Services

Several services that are part of Radzen need to be registered in the Startup class of an Oqtane framework application.

To do this, we must add a class that implements the Oqtane IServerStartup interface to test2.External module project.

Server Startup

Create a folder called Startup in the Server project, and then use the following code to create a class file there called ServerStartup.cs:

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
using Oqtane.Infrastructure;
using Radzen;
namespace test2.External.Server.Startup {
    public class ServerStartup: IServerStartup {
        public void ConfigureServices(IServiceCollection services) {
            services.AddScoped < DialogService > ();
            services.AddScoped < NotificationService > ();
            services.AddScoped < TooltipService > ();
            services.AddScoped < ContextMenuService > ();
        }
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {}
        public void ConfigureMvc(IMvcBuilder mvcBuilder) {}
    }
}

Oqtane WebAssembly Mode support

ModuleInfo

Note: The two operating modes for Blazor Oqtane are server and webassembly (you can switch modes by updating the Runtime property in the appsettings.json file on the Oqtane website).

Oqtane's developer, Shaun Walker, claims "...the implementation for IModule, which contains a Dependencies property, is contained in the ModuleInfo.cs file in the Client project. When using WebAssembly, this should have a comma-separated list of all the assemblies that the client needs to download.

Open the ModuleInfo.cs file, and change the Dependencies field to read: Add a comma and the Radzen.Blazor assembly.

Dependencies = "test2.External.Shared.Oqtane,Radzen.Blazor"

Using JavaScript and The Radzen Theme

Package Download

First, click the following link to download the NuGet package: Radzen.Blazor 2.18.8 from NuGet Gallery.

UnZip

To unzip it, we utilize a tool like 7-Zip.

StaticWebAssets

The necessary resources are then extracted to the staticwebassets folder.

CSSFontJS

Finally, we organize the files into folders for each type of element and add them to the Server\wwwroot\Modules\test2.External directory.

References in _Host.cshtml Are Included Using IHostResources

UI component suites, like Radzen, need that their.css, JavaScript, and fonts are linked in the _Hosts.cshtml file of the main Blazor application, in contrast to the manner of registering JavaScript files mentioned in Using Custom JavaScript in Blazor Oqtane (in this case the Oqtane framework).

Oqtane demands that your module have a class that implements the IHostResources interface in order to make this possible.

HostResources

Create a HostResources.cs file in the Server project.

Change the code to the following,

using System.Collections.Generic;
using Oqtane.Infrastructure;
using Oqtane.Models;
using Oqtane.Shared;
namespace test2.External.Server.Resources {
    public class HostResources: IHostResources {
        public List < Resource > Resources => new List < Resource > () {
            // Note: The reference to CustomJavaScript.js 
            // existed previously
            new Resource {
                ResourceType = ResourceType.Script,
                    Url = "Modules/" + GetType().Namespace + "/CustomJavaScript.js"
            },
            // New References:
            new Resource {
                ResourceType = ResourceType.Script,
                    Url = "Modules/" + GetType().Namespace + "/fonts/MaterialIcons-Regular.woff"
            },
            new Resource {
                ResourceType = ResourceType.Stylesheet,
                    Url = "Modules/" + GetType().Namespace + "/css/default.css"
            },
            new Resource {
                ResourceType = ResourceType.Script,
                    Url = "Modules/" + GetType().Namespace + "/js/Radzen.Blazor.js"
            },
        };
    }
}

Note: If you get some exceptions you can replace the method ( GetType().Namespace)with your project name i.e ("test2.External")

In The Module, Consume Radzen

IndexRazor

We can now use the Radzen UI controls in our Oqtane module.

Replace the HTML markup in the Index.razor file in the Client project with the following code (keep the C# code in the @code section):

@using test2.External.Services
@using test2.External.Models
@namespace test2.External
@inherits ModuleBase
@inject IExternalService ExternalService
@inject NavigationManager NavigationManager
@inject IStringLocalizer < Index > Localizer < RadzenText TextStyle = "TextStyle.H6"
TagName = "TagName.H3" > Welcome To The Radzen In Oqtane < /RadzenText>
@code {
    public override List < Resource > Resources => new List < Resource > () {
        new Resource {
            ResourceType = ResourceType.Stylesheet, Url = ModulePath() + "Module.css"
        },
        new Resource {
            ResourceType = ResourceType.Script, Url = ModulePath() + "Module.js"
        }
    };
    List < External > _Externals;
    protected override async Task OnInitializedAsync() {
        try {
            _Externals = await ExternalService.GetExternalsAsync(ModuleState.ModuleId);
        } catch (Exception ex) {
            await logger.LogError(ex, "Error Loading External {Error}", ex.Message);
            AddModuleMessage(Localizer["Message.LoadError"], MessageType.Error);
        }
    }
    private async Task Delete(External External) {
        try {
            await ExternalService.DeleteExternalAsync(External.ExternalId, ModuleState.ModuleId);
            await logger.LogInformation("External Deleted {External}", External);
            _Externals = await ExternalService.GetExternalsAsync(ModuleState.ModuleId);
            StateHasChanged();
        } catch (Exception ex) {
            await logger.LogError(ex, "Error Deleting External {External} {Error}", External, ex.Message);
            AddModuleMessage(Localizer["Message.DeleteError"], MessageType.Error);
        }
    }
}

After building the solutions we get the following window

output

Conclusion

In this article we have configured the Radzen we can use other radzen components in Oqtane after successful configuration.