Popular blog tags

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.

In this post, we will discuss the following

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

Visual Studio 2019
Install .NET Core 3.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; }