Popular blog tags

NopCommerce|.NET 6.x|NopCommerce 4.5.x|How to create admin Blazor server for NopCommerce 4.x step by step


Install NopCommerce 4.5.x  step by step


Step 1:DataConnectionString


  "DataConnectionString": "Data Source=SRKSERVER\\SQLEXPRESS;Initial Catalog=msly;Integrated Security=True;Persist Security Info=False",
  "DataProvider": "sqlserver",
  "SQLCommandTimeout": null,
  "RawDataSettings": {}


Step 2:Content management ->Topics  修改各种提示的Admin 缺省欢迎页信息


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.

I will use the NopCommerce 4.x application we have created in the previous post and extend it with the new functionalities we are going to talk about in this post.  You will be familiar with the following topics after you read this post.

Blazor, HttpClientFactory, and Web API

In this post, we will discuss the following:

1.Create the Shared Models Project named with Nop.Models

2.Create the Web API Project  named with Nop.Api

3.Create the Blazor Server Project named with Nop.BlazeorServer

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


Visual Studio 2019
Install .NET Core 5.x
Install Blazor Templates

step 1.新建一个Blazor server项目


step 2.引入几个项目

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

    <FrameworkReference Include="Microsoft.AspNetCore.App" />

    <ProjectReference Include="..\..\Libraries\Nop.Core\Nop.Core.csproj" />
    <ProjectReference Include="..\..\Libraries\Nop.Data\Nop.Data.csproj" />
    <ProjectReference Include="..\..\Libraries\Nop.Services\Nop.Services.csproj" />
    <ProjectReference Include="..\Nop.Web.Framework\Nop.Web.Framework.csproj" />

step 3. 添加

    <FrameworkReference Include="Microsoft.AspNetCore.App" />

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