May 7

Written by: Michael Washington
5/7/2019 7:27 AM  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 article will cover creating a module inline.

 

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.

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: https://github.com/oqtane/framework

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

image

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

image

When you open it, you will see three projects.

image

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: https://github.com/oqtane/module.sample

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

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 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>
}
else
{
    <p>Hello <b>World</b>!</p>
}
@functions {
}

 

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 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

image

Hit F5 to run the project.

image

Click Login.

image

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

image

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.

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.

image

It you log out

image

The module will display Hello World!.

 

Links

Creating a Database Driven Module For 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:

2 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

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