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

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