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

Install NopCommerce 4.5.x  step by step

Step 1：DataConnectionString

/App_Data/dataSettings.json

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

Prerequisites

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

step 1.新建一个Blazor server项目

step 2.引入几个项目

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

  <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>
  </PropertyGroup>
  
  <ItemGroup>
    <FrameworkReference Include="Microsoft.AspNetCore.App" />
  </ItemGroup>


  <ItemGroup>
    <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" />
  </ItemGroup>
</Project>

step 3. 添加

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

step 4.注入服务

 public void ConfigureServices(IServiceCollection services)
        {
            services.AddDI();
            //注册所有服务
            services.AddCustomRegistrarServices(Configuration);

            services.AddRazorPages();
            services.AddServerSideBlazor();
            services.AddSingleton<WeatherForecastService>();
        }

step 5.前台显示页面

List.razor

@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

<h2>用户角色</h2>

@if (users == null)
{
    <p><em>Loading...</em></p>

}
else
{
    <table class='table'>
        <thead>
            <tr>
                @*<th>用户图像</th>
                    <th>用户昵称</th>*@
                <th>ID</th>
                <th>Name</th>
                <th>IsSystemRole</th>
                <th>SystemName</th>
                <th>Active</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var user in users)
            {
                <tr>
                    @*<td><img src="@user.headimgurl" /></td>
                        <td>@user.nickname</td>*@
                    <td>@user.Id</td>
                    <td>@user.ShortMessage</td>
                    <td>@user.PageUrl</td>
                    <td>@user.IpAddress</td>
                    <td>@user.CreatedOnUtc</td>
                    <td>
                        <a href='/editemployee/@user.Id'>Edit</a>
                        <a href='/deleteemployee/@user.Id'>Delete</a>
                    </td>
                </tr>



            }
        </tbody>
    </table>
}

@code {

    IPagedList<Log>  users;

    


    protected override async Task OnInitializedAsync()
    {


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

}

新建Nop.Models项目

采用netstandard2.0，安装System.ComponentModel.Annotations，便于winform等多项目引用

Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
  
    <TargetFramework>netstandard2.0</TargetFramework>
  </PropertyGroup>

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

</Project>

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