When you buy this book you support this site! - Thank You for your support!

Oct 17

Written by: Michael Washington
10/17/2019 4:00 PM  RssIcon

image 

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 post will cover creating an inline module.

 

Also see:

 

image

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.

 

Install Oqtane

image

See the article: What is Blazor Oqtane? for instructions on installing Oqtane.

 

Create The Hello World Module

image

Open Oqtane in Visual Studio 2019 (or higher).

 

image

When you open it, you will see three projects.

 

image

Open the Modules folder in the Client project.

 

image

Name the folder Hello World.

 

image

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

 

image

Choose the Razor Component template, and 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>
}
else
{
    <p>Hello <b>World</b>!</p>
}
@code {
}

 

image

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 System.Collections.Generic;
namespace Oqtane.Modules.HelloWorld
{
    public class ModuleInfo : IModule
    {
        public Dictionary<string, string> Properties
        {
            get
            {
                Dictionary<string, string> properties = new Dictionary<string, string>
                {
                    { "Name", "HelloWorld" },
                    { "Description", "Hello World Sample" },
                    { "Version", "1.0.0" }
                };
                return properties;
            }
        }
    }
}

 

Note: This step is actually optional. For a simple module like Hello World you do not need to implement the IModule interface - the framework will create one automatically with default values using reflection. The goal is that Oqtane is to minimize the ceremony required to build web applications.

Invoke The Inline Module

image

Hit F5 to run the project.

 

image

Click Login.

 

image

Login.

 

image

Click on the hamburger menu.

 

image

In the Control Panel, click the Add Page button.

 

image

Enter the settings for a new page and click the Save button.

 

image

Navigate to the page.

 

image

Click on the hamburger menu.

 

image

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.

 

image

The module will show up on the page.

It will say Hello { your name }!

 

image

It you log out

 

image

The module will display Hello World!.

 

Links

What is Blazor Oqtane?

Blazor.net

Get started with Blazor

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

www.oqtane.org

Oqtane (GitHub)

Oqtane Custom Module Sample (GitHub)

Tags: Blazor , Oqtane
Categories:

4 comment(s) so far...


Gravatar

Re: Creating a Hello World Module For Blazor Oqtane

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

Thanks,
Dave

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

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
Gravatar

Re: Creating a Hello World Module For Blazor Oqtane

I don't get the Hamburger menu and unable to do anything

By Sam on   10/24/2019 9:58 AM
Gravatar

Re: Creating a Hello World Module For Blazor Oqtane

@Sam - Please log an issue at: https://github.com/oqtane/oqtane.framework/issues

By Michael Washington on   10/24/2019 9:59 AM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
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