Nop.Admin.BlazorServer project
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; }
blazor server Modal
@page "/Pages/News/List"
@using Microsoft.AspNetCore.Authorization
@inject INewsService _newsService
@*come from:https://thecodehubs.com/crud-using-blazor-entity-framework-core-and-dapper/*@
<h2>NavInfo</h2>
<div>
<a class="btn btn-primary" href='/Pages/News/Create'>Create</a>
</div>
@if (results == 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 item in results)
{
<tr>
@*<td><img src="@user.headimgurl" /></td>
<td>@user.nickname</td>*@
<td>@item.Id</td>
<td>@item.Short</td>
<td>@item.Title</td>
<td>@item.Url</td>
<td>@item.AllowComments</td>
<td>
<a class="btn btn-primary" href='/Pages/NavInfoLink/Edit/@item.Id'>Edit</a> |
@*<a class="btn btn-danger" @onclick="() => DeleteArticle(article.ID)">Delete</a>*@
</td>
</tr>
}
</tbody>
</table>
}
@code {
IList<NewsItem> results;
[Parameter]
public NewsItem newsItem { get; set; }
string storeId = "";
protected string modalTitle { get; set; }
protected Boolean isAdd = false;
protected Boolean isEdit = false;
protected Boolean isDelete = false;
protected Boolean isViewDetail = false;
protected override async Task OnInitializedAsync()
{
results = _newsService.GetAllNews();
}
void Create()
{
}
void Update(NavInfo item)
{
this.modalTitle = "编辑";
this.isEdit = true;
//_emailAccount = _emailAccountService.GetEmailAccountById(item.Id.ToString());
}
void Delete(NavInfo item)
{
}
private void HandleValidSubmit()
{
Console.WriteLine("OnValidSubmit");
}
protected async Task ViewCwDataInfo()
{
}
#region modal
protected void closeModal()
{
this.isAdd = false;
this.isEdit = false;
this.isDelete = false;
this.isViewDetail = false;
}
#endregion
}