Popular blog tags

How to create admin Blazor Server Net 5.x step by step


Blazor is a new web UI framework based on C#, Razor, and HTML.  This runs in the browser via WebAssembly.  It helps build interactive web UI using C# instead of JavaScript.  This post demonstrates how to build a SPA using Blazor.  Blazor simplifies the task of building fast and beautiful SPAs that run in any browser. It does this by enabling developers to write Dotnet based web apps that run client-side in web browsers using open web standards. Let’s get started with Blazor.


In this post, we will discuss the following

Hosting Models
Enable Authentication and Authorization
Dive deep into Default Blazor pages


Visual Studio 2019
Install the latest .NET 5 SDK.
Install Blazor Templates

step 1.Create a Blazor Server App with Visual Studio


step 2.引入几个项目

<Project Sdk="Microsoft.NET.Sdk.Web">


    <ProjectReference Include="..\Stockso.BlazorServer.Services\Stockso.BlazorServer.Services.csproj" />


    <PackageReference Include="Microsoft.AspNetCore.JsonPatch" Version="5.0.0-rc.1.*" />

    <PackageReference Include="Microsoft.AspNetCore.SignalR.Client" Version="5.0.0-rc.1.20451.17" />
    <PackageReference Include="Microsoft.Extensions.Caching.Abstractions" Version="5.0.0-rc.1.*" />
    <PackageReference Include="System.Net.Http.Json" Version="5.0.0-rc.1.*" />


step 3.Authentication and Authorization

add <CascadingAuthenticationState>

add <CascadingAuthenticationState>

//change  from RouteView to AuthorizeRouteView
 <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /> 
<AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />


    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>

step 4.注入服务

 public void ConfigureServices(IServiceCollection services)



step 5.前台显示页面


@page "/Pages/Log/List"

@using Nop.Core;
@using Nop.Core.Domain.Logging;
@using Nop.Services.Logging;

@using Microsoft.AspNetCore.Authorization

@inject Nop.Services.Logging.INopLogger NopLogger


@if (users == null)

    <table class='table'>
            @foreach (var user in users)
                    @*<td><img src="@user.headimgurl" /></td>
                        <a href='/editemployee/@user.Id'>Edit</a>
                        <a href='/deleteemployee/@user.Id'>Delete</a>


@code {

    IPagedList<Log>  users;


    protected override async Task OnInitializedAsync()

        users = NopLogger.GetAllLogs(null, null, "", null, 0, 10);





Project Sdk="Microsoft.NET.Sdk">


    <PackageReference Include="System.ComponentModel.Annotations" Version="4.7.0" />


添加System.ComponentModel.Annotations后,可使用[Display(Name = "Account.Login.Fields.Email")]

using System.ComponentModel.DataAnnotations;

namespace Nop.Models.Messages
    /// <summary>
    /// Represents a queued email model
    /// </summary>
    public partial class QueuedEmailModel
        #region Properties

        public int Id { get; set; }

        [Display(Name = "Account.Login.Fields.Email")]
        public string PriorityName { get; set; }

1.NopCommerce and ASP.NET Core 3 Blazor

I have finally found a solution after struggling for a whole day.
The solution is to follow the instructions from the blog posts above but instead of registering Blazor  the normal way, add this class in Nop.Web.Framework.Infrastructure

using Microsoft.AspNetCore.Builder;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Nop.Core.Infrastructure;

namespace Nop.Web.Framework.Infrastructure
    public class BlazorStartup : INopStartup
        public int Order => 999;//It has to be registered before NopMVCStartup

        public void Configure(IApplicationBuilder application)

            application.UseEndpoints(endpoints =>
                endpoints.MapFallbackToController("Blazor", "Home");

        public void ConfigureServices(IServiceCollection services, IConfiguration configuration)


2.I experimented and have ported nopCommerce to blazor and what I have:



3.I need to clear the code from unnecessary notes and implement a demo db before publishing. Maybe I will publish without db implementation. But I am tired a little bit of the project  and I am lazy to do it right now. Your question is very wide. I changed target framework (for client-side in future), overrode the router, implemented native DI (memory leak of Autofac on preview stages), rewrote all necessary views to razor pages, rewrote all necessary controllers to the same razor pages, moved out all scripts to a js file, wrote some of extensions and utilities. I tried hard not to modify the native nopcommerce code like core, data, services and framework, only wrapping or overriding if it had needed.

asp.net core 3 blazor server-side.
Experimental based on nopCommerce v4.10 single page eStore.
Use DB v4.10

The source code https://github.com/aybelanov/spaCommerce



ASP.NET Core Blazor CSS isolation