May 7

Written by: Michael Washington
5/7/2019 7:27 AM  RssIcon



In this article we will create a Hello World module for Oqtane, the new web application framework that runs in Microsoft Blazor. There are two methods to create custom modules in Oqtane, inline, and as a separate Visual Studio project. This article will cover creating a module inline.


Also see:



Microsoft Blazor, a new web framework for .NET Core that lets you build interactive web UIs using C# instead of JavaScript. Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS. Both client and server code is written in C#, allowing you to share code and libraries.

Oqtane was created by Shaun Walker and is inspired by the DotNetNuke web application framework. Initially created as a proof of concept, 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.

Note: At this point Oqtane offers a minimum of desired functionality and is not recommended for production usage. The expectation is that Oqtane will rapidly evolve as a community driven open source project. At this point in time we do not promise any upgrade path from one version to the next, and developers should expect breaking changes as the framework stabilizes.

Install Oqtane

From the current directions at:

1. Oqtane is currently compatible with .NET Core 3.0 Preview 4 SDK (3.0.100-preview4-011223). Microsoft continues to release new versions of .NET Core 3.0 on a regular basis and we do our best to keep up; however, for the best results you should use the most compatible .NET Core 3.0 version.

2. Install the latest preview of Visual Studio 2019 with the ASP.NET and web development workload.

3. Install the latest Blazor extension from the Visual Studio Marketplace.

4. Enable Visual Studio to use preview SDKs: Open Tools > Options in the menu bar. Open the Projects and Solutions node. Open the .NET Core tab. Check the box for Use previews of the .NET Core SDK. Select OK.

5. Open the Oqtane.sln solution file. If you want to develop using server-side Blazor ( which includes a full debugging experience in Visual Studio ) you should choose to Build the solution using the default Debug configuration. If you want to develop using client-side Blazor ( WebAssembly ) you should first choose the "Wasm" configuration option in the Visual Studio toolbar and then Build.


Create The Hello World Module


Open Oqtane in Visual Studio 2019 Preview (or higher).


When you open it, you will see three projects.


When you develop a custom module using a separate project, you can add you project to the solution.

You can download an example project from this location:

However, in this article we will cover creating a custom module inline.


Open the Modules folder in the Client project.


Name the folder Hello World.


Right-click on the Hello World folder and select Add then New Item…


Choose the Text File template, but name the file Index.razor.

Change all the code to the following:


@using Oqtane.Modules
@using Oqtane.Shared
@inherits ModuleBase
@if (@PageState.User != null)
    <p>Hello <b>@PageState.User.Username</b>!</p>
    <p>Hello <b>World</b>!</p>
@functions {



We now need to create file that tells Oqtane what our module is so that it can allow it to be used.

Create a file called Module.cs and replace all the code with the following:


using Oqtane.Modules;
namespace Oqtane.Client.Modules.HelloWorld
    public class Module : IModule
        public string Name { get { return "Hello World"; } }
        public string Description { get { return "Hello World Sample"; } }
        public string Version { get { return "1.0.0"; } }
        public string Owner { get { return ""; } }
        public string Url { get { return ""; } }
        public string Contact { get { return ""; } }
        public string License { get { return ""; } }
        public string Dependencies { get { return ""; } }

Invoke The Module


Hit F5 to run the project.


Click Login.


Login as host for the username and host for the password.


Note: At the time of this writing, there is a known issue in Blazor server side that wont detect the JavaScript interop method immediately, so for now, you will need to click on another page (for example page 3) then return to page 1.


Click on the hamburger menu.


The Hello World module will show up in the Module dropdown list (because of the Module.cs file).

Use the settings screen to add the module to the page.


The module will show up on the page.


It you log out


The module will display Hello World!.



Creating a Database Driven Module For Blazor Oqtane

Get started with Blazor

Announcing Oqtane... a Modular Application Framework for Blazor!

Oqtane (GitHub)

Oqtane Custom Module Sample (GitHub)

Tags: Blazor , Oqtane

2 comment(s) so far...


Re: Creating a Hello World Module For Blazor Oqtane

Hi Michael, a little off topic but how would compare Oqtane with Radzen?


By Dave Vorgang on   6/27/2019 1:28 PM

Re: Creating a Hello World Module For Blazor Oqtane

@Dave Vorgang - Oqtane is only concerned with Hosting applications. Radzen is concerned only with Building applications.

By Michael Washington on   6/27/2019 1:29 PM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Security Code
Enter the code shown above in the box below
Add Comment   Cancel 
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation