How to structure a single Oqtane module with multiple pages (Admin dashboard style)?

[Bhushan02-dot]

Hii @sbwalker
I’m building an ERP-style application on Oqtane and I’m a bit confused about the correct/official way to handle multiple pages within a single module.

My scenario

I have one functional module (for example: ERP Admin / Master Data) but it contains multiple pages, such as:

• Contacts
• Locations
• Purchase Orders
• Sales Orders
• Job Work
• Job Work Issue

This is similar to an Admin Dashboard, where:

• It is logically one module
• But it needs multiple screens/pages
• Each page has its own Razor component and routing

My confusion

In Oqtane:

• A module has one entry point (Index.razor)
• Navigation typically happens via ModuleId + Page
• Official docs mostly show single-page modules

So I’m unsure about the recommended pattern for:

• Hosting multiple Razor pages inside one module
• Navigating between them (menu, tabs, routes, parameters, etc.)
• Whether this should be:

One module with internal routing?

1. Multiple modules (ContactsModule, SalesModule, etc.)?
2. One module + multiple components rendered conditionally?

What I’m looking for

Official or recommended Oqtane approach

Any example modules (admin/dashboard style)

Best practice for ERP or large business apps
below project is already blazor wasm and we want migrate in oqtane

[leigh-pointer]

The Core Misunderstanding (and why your instinct is correct)

Many people assume:
• “One module = one page”
• Or that you must split functionality into many modules

That assumption is wrong for complex business apps.

Oqtane modules are functional units, not pages.

An ERP Admin module with:
• Contacts
• Locations
• Orders
• Job Work

…is exactly what a single module is meant to represent.

⸻

The Official / Intended Oqtane Pattern

✅ One module

✅ Multiple Razor components

✅ Internal routing via ActionLink

This is the same pattern used by Oqtane core admin modules.

⸻

How Oqtane Actually Thinks About Pages

An Oqtane module has:
• One entry point (Index.razor)
• Many internal views
• Navigation driven by:
• ModuleId
• Action
• Optional route parameters

⚠️ This is not Blazor Router navigation
⚠️ This is Oqtane-managed routing

[sbwalker]

@Bhushan02-dot there are various ways you can approach this, but at the end of the day the most important aspect to understand is routing. This video describes the fundamentals of Oqtane routing: https://www.youtube.com/watch?v=77_-4OLat_o&list=PLYhXmd7yV0elLNLfQwZBUlM7ZSMYPTZ_f&index=2 (the video is old however the core concepts in Oqtane routing have not changed).

So @leigh-pointer is correct - you could use a single module for the ERP Admin. Lets assume you have a "page" with a route of /erpadmin in your site which is where you want to expose all of the ERP Admin functionality. You could have a single ERP Admin module instance on this page (ie. let's assume it is ModuleId: 1). Each route Action can then relate to a Razor component:

/erpadmin/*/1/Contacts = Contacts.razor (specify UseAdminContainer = false to avoid modal dialog)
/erpadmin/*/1/EditContact?id=1 = EditContact.razor
/erpadmin/*/1/Locations = Locations.razor (specify UseAdminContainer = false to avoid modal dialog)
/erpadmin/*/1/EditLocation/id=1 = EditLocation.razor

etc...

The only challenge remaining is how to surface your navigation menu so that users can click links which correspond to the routes above. I am assuming that the navigation menu is expected to be displayed on every page so I would suggest embedding it in your Theme component and simply hard-coding the Urls (similar to a default Blazor application and the NavMenu component). Hard-coding is not really a problem as there are a finite number of menu options in your application.

[Bhushan02-dot]

@sbwalker , @leigh-pointer
Thanks for the clarification and routing guidance.
I have implemented a single-module approach and am handling internal navigation inside the module itself. Instead of creating multiple modules, all ERP pages are implemented as Razor components within the same module, and I dynamically load them from Index.razor based on the current page route.

• All ERP pages (Parameter, Contacts, Location, etc.) are Razor components inside the module.
• Index.razor acts as the entry point for the module.
• I read the current route using PageState.Page.Path.
• Based on the path, I resolve the correct component using a dictionary and render it via DynamicComponent.

index.razor :

@using Teninfo.Erp.Client.Modules.Pages
@using Teninfo.Erp.Module.ParameterModule.Services
@using Teninfo.Erp.Module.ParameterModule.Models
@using Teninfo.Erp.Client.Modules.Teninfo.Erp.Module.ParameterModule;
<RadzenComponents />
@using System.Text.Json

@namespace Teninfo.Erp.Module.ParameterModule
@inherits ModuleBase
@inject IParameterModuleService ParameterModuleService
@inject NavigationManager NavigationManager
@inject IStringLocalizer<Index> Localizer
@inject DialogService dialogService;
@inject ErpWiseService ErpWiseService;


<div class="container-fluid">
    @if (CurrentComponent != null)
    {
        <DynamicComponent Type="@CurrentComponent" />
    }
    else
    {
        <div class="alert alert-warning">
            <h4>Page Not Found</h4>
            <p>The page "@currentPage" does not exist.</p>
        </div>
    }
</div>

@code {
    [Inject]
    public Radzen.NotificationService NotificationService { get; set; }
    [Parameter]
    public string ParaType { get; set; }
    public string Caption { get; set; }
    private IEnumerable<Parameters> parameters;
    private bool value { get; set; }
    private bool Visible { get; set; }
    private bool IsAdd { get; set; }
    private bool IsAutoParaCode { get; set; }
    private bool IsDesc1 { get; set; }
    private bool IsValue1 { get; set; }
    private bool IsValue2 { get; set; }
    private bool IsShort1 { get; set; }
    private bool IsShort2 { get; set; }
    private bool IsRadzenDatagridDropdown { get; set; }
    private bool isFormfield { get; set; } = true;
    private string currentPage = "";
    private Guid? data ;
    private Type CurrentComponent => GetComponentForPage(currentPage);


    private static readonly Dictionary<string, Type> PageComponentMap = new()
    {
        { "master/parameter", typeof(ParameterComponent) },
        { "master/contacts", typeof(ContactComponent) },
        { "master/location", typeof(LocationComponent) }


    };
    public override List<Resource> Resources => new List<Resource>()
    {
        new Stylesheet("_content/Radzen.Blazor/css/default-base.css"),
        new Stylesheet("_content/Radzen.Blazor/css/material-base.css"),
        new Stylesheet("_content/Bhushan.Module.ParameterModule/Module.css"),
        new Script("_content/Bhushan.Module.ParameterModule/Module.js"),
        new Resource { ResourceType = ResourceType.Script, Level = ResourceLevel.Site, Url = "_content/Radzen.Blazor/Radzen.Blazor.js" }
    };
  
    protected override async Task OnInitializedAsync()
    {
        currentPage = PageState?.Page?.Path?.ToLower() ?? "unknown";   
    }

    private Type GetComponentForPage(string pagePath)
    {
        return PageComponentMap.TryGetValue(pagePath, out var componentType)
            ? componentType
            : null;
    }

    public void ValidateParaType()
    {
        bool exists = parameters.Any(p => p.ParaType == ParaType);
        if (!exists)
        {
            ShowNotification("Invalid ParaType", "The provided ParaType does not exist.", NotificationSeverity.Error);
        }
    }

    private void ShowNotification(string title, string message, NotificationSeverity severity)
    {
        NotificationMessage notification = new()
        {
            Summary = title,
            Detail = message,
            Severity = severity,
            Duration = 4000
        };

        NotificationService.Notify(notification);
    }
} 

[Bhushan02-dot]

@leigh-pointer, @sbwalker
I am creating a project using the Oqtane Application Template.
I want to build a page template, but most of the documentation and blog posts I found are based on the core Oqtane framework project, not the Application Template.

I followed one blog website, but it applies to the core Oqtane setup and doesn’t seem to work the same way with the Application Template.
https://blazorhelpwebsite.com/ViewBlogPost/41
Could you please guide me on how to create or configure page templates when using the Oqtane Application Template, or point me to the correct documentation for this scenario?

[leigh-pointer]

@Bhushan02-dot I think it will be someting like thsi. Run the Application, log in, navigate to Module Management, create a new module "My Page Templates" and create it . Stop the application and in the oqante client solution under modules along side your main module you will see your new module. Open the ModuleInfo class change Categories = "Headless", You can remove everything and add a class the implements the correct funtionalites.
When you build and run your solution and you create a new Tenant you will see your templates.

[sbwalker]

@Bhushan02-dot dynamically loading components from within Index.razor is a possible solution however you will encounter some challenges as the various state objects (ie. SiteState, PageState, ModuleState) will not be available within the dynamically loaded component (unless you explicitly handle passing them yourself). Also, many of the methods in ModuleBase will not work as expected, as they rely on state objects and a specific component hierarchy. You can avoid these challenges by using the routing approach I outlined earlier in this thread.

[sbwalker]

@Bhushan02-dot in regards to programmatically creating your site structure (ie. pages/modules) I would suggest using SiteMigrations as this is exactly what they are intended for:

https://www.oqtane.org/blog/!/38/site-migrations-deployment

You can add a SiteMigration class to your module project and it will automatically be executed at startup.

On that note, I would highly recommend you read the Oqtane Blog as it contains a lot of useful information related to module development.

[Bhushan02-dot]

@sbwalker , @leigh-pointer Thank you for your response. It was very helpful and clarified things well.

[LaxmiYogi]

[sbwalker]

@LaxmiYogi I am not sure if your answer may have been generated by AI... but it is NOT the recommended approach and it contains some misleading information as Oqtane does not use Blazor's default router.