Blazor Widgets and Dashboard

Question

Hi Team,

I am currently working on a Blazor project where I need to create a financial dashboard with customized widgets based on user roles and access levels. Can you please share a sample project without using any third-party tools like Syncfusion, Radzen, jqwidgets, etc.?

Thanks

Diwakar

Answer 1

Hi Diwakar, please follow my steps to create a .Net 8 blazor web app which integrating Role-based authorization. Firstly let's use VS 2022 to create a new blazor web app. Please choose the Authentication type as Individual Accounts, so that the template project will containing Asp.net core Identity Module.

The project now will connect to local DB for test purpose, you can run the application now if you don't want to use other database. Then you can click the register an user but you will be redirect to an error page if this is the first time to run the app and because the database hasn't ready to work (no data tables are created), you can click the Apply Migrations button to complete the initialization work. Then you will have an user and you will be able to visit Auth Required View. We already complete authentication part.

The rest is to adding Role Management system and Role-based Authorization part. For testing purpose, I just create Roles and do role-assignment work directly in Database. There are 3 tables related. We will have one row in AspNetUsers table which represent the user you registered just now. Going to the user table and copy the user Id. Then you can go to the AspNetRoles table to create a role, for example, in my side I create a Developer role which Id is "1aed". And now we can go to AspNetUserRoles table to assign role to the user.

We also need to modify our application. In Program.cs, let's add the Role Management Module by adding AddRoles<>, please note this line has to be placed before AddEntityFrameworkStores<>.

builder.Services.AddIdentityCore<ApplicationUser>(options => options.SignIn.RequireConfirmedAccount = true)
    .AddRoles<IdentityRole>()
    .AddEntityFrameworkStores<ApplicationDbContext>()
    .AddSignInManager()
    .AddDefaultTokenProviders();

Also we can modity the Auth.razor component. @attribute [Authorize] will make sure that this component can only be accessed when there's a user signed in the application. <AuthorizeView> is used for displaying content to signed in users. We can set Roles attribute in both [Authorize] and <AuthorizeView> to control the component or the content is only available for users who has specific roles.

@page "/auth"
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize(Roles = "Developer")]

<PageTitle>Auth</PageTitle>
<h1>You are authenticated</h1>

<AuthorizeView Roles="Admin">
    Hello Admin @context.User.Identity?.Name!
</AuthorizeView>
<br />
<AuthorizeView Roles="Developer">
    Hello Developer @context.User.Identity?.Name!
</AuthorizeView>
<br />
<AuthorizeView Roles="Developer, Admin">
    Hello Admin/Developer @context.User.Identity?.Name!
</AuthorizeView>

If you want to control the menus to be accessible for specific roles, you can take a look at NavMenu.razor component, it shows us a sample using <AuthorizeView><Authorized><NotAuthorized> tags. You can also use AuthorizeView + Roles to control whether the menus are visible.

<AuthorizeView Roles="Admin">
    <NavLink class="nav-link" href="auth">
        <span class="bi bi-lock-nav-menu" aria-hidden="true"></span> Admin Only Menu
    </NavLink>
</AuthorizeView>
<AuthorizeView Roles="Developer">
    <NavLink class="nav-link" href="auth">
        <span class="bi bi-lock-nav-menu" aria-hidden="true"></span> Developer Only Menu
    </NavLink>
</AuthorizeView>

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Tiny

Answer 2

there appear to be few blazor options

https://mudblazor.com

https://antblazor.com/en-US/

list of current crop of widgets (any framework)

https://www.creative-tim.com/blog/web-design/free-dashboard-templates/

https://colorlib.com/wp/free-html5-admin-dashboard-templates/