Based Blazor Admin Templates BlazAdmin Blazui formal early adopters

Brief introduction

　　BlazAdmin is a template-based Blazui management background, no JS, no TS, non-Silverlight, non WebForm, a label can be used.
　　My next article will discuss the basic principles of Blazor server-side rendering and rendering client, server-side rendering contrast similarities and differences with the WebForm
　　after nearly a month of development, BlazAdmin early adopters version finally get, the function is very limited, only incorporates a background management system the most basic functions, including:

Tabbed page management, no Iframe

Secondary Navigation menu

Identity user registration and login, based on Cookies

　　One thing to note is that we do not support IdentityServer4 short time and Jwt, but will support Session registration and login in the next plan. Below are the results of BlazAdmin

Administrators can create the initial operation

image.png-40.7kB

Main interface

image.png-81.7kB

change Password

image.png-84.2kB

Sign out

image.png-82.3kB

Immediately began early adopters

Create a new server-side rendering application Blazor

image.png-49.6kB

BlazAdmin.ServerRender Nuget installation package

image.png-160.2kB

Delete files NavMenu.razor

image.png-73.6kB

_Imports.razor file add the following

@using BlazAdmin
@using Blazui.Component.Container
@using Blazui.Component.Button
@using Blazui.Component.Dom
@using Blazui.Component.Dynamic
@using Blazui.Component.NavMenu
@using Blazui.Component.Input
@using Blazui.Component.Radio
@using Blazui.Component.Select
@using Blazui.Component.CheckBox
@using Blazui.Component.Switch
@using Blazui.Component.Table
@using Blazui.Component.Popup
@using Blazui.Component.Pagination
@using Blazui.Component.Form
@using Blazui.Component

To enable login, file contents App.razor need to be replaced as follows

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
         <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

Login need to use the database, so add DemoDbContext class

image.png-22.6kB

public class DemoDbContext : IdentityDbContext
{
    public DemoDbContext(DbContextOptions options) : base(options)
    {
    }
}

What is missing namespace directly using, not repeat them

Startup folder of the following alternative methods ConfigureService

For example it is convenient to use a memory database, you need to install nuget package Microsoft.EntityFrameworkCore.InMemory
need using the associated namespace

public void ConfigureServices(IServiceCollection services)
{
    services.AddDbContext<DemoDbContext>(options =>
    {
        options.UseInMemoryDatabase("demo");
    });
    services.AddBlazAdmin<DemoDbContext>();
    services.AddSingleton<WeatherForecastService>();
}

Configure the Startup folder add the following method

Increased Login configuration

app.UseAuthorization();
app.UseAuthentication();

Note that need added app.UseRouting () method below
image.png-32.2kB

Increase WebApi configuration, mainly as the login service

image.png-27.6kB

_Host.cshtml replaced by the following page content

@page "/"
@namespace BlazorApp4.Pages //此处 BlazorApp4 需要改成你实际的命名空间，一般就是项目名
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BlazAdmin Demo</title>
    <base href="~/" />
    <link href="/_content/BlazAdmin/css/admin.css" rel="stylesheet" />
    <link rel="stylesheet" href="/_content/Blazui.Component/css/index.css" />
    <link rel="stylesheet" href="/_content/Blazui.Component/css/fix.css" />
</head>
<body>
    <app>
        @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
    </app>
    <script src="/_content/Blazui.Component/js/dom.js"></script>
    <script src="_framework/blazor.server.js"></script>
</body>
</html>

The next step is to test menus and pages, the contents of the file is replaced with the following MainLayout.razor

@inherits LayoutComponentBase
<BAdmin Menus="Menus" NavigationTitle="BlazAdmin Demo"></BAdmin>
@code{
    protected List<MenuModel> Menus { get; set; } = new List<MenuModel>();
    protected override void OnInitialized()
    {
        Menus.Add(new MenuModel()
        {
            Label = "示例页面",
            Icon = "el-icon-s-promotion",
            Children = new List<MenuModel>() {
              new MenuModel(){
               Label="示例子页面1",
            Icon = "el-icon-s-promotion",
               Route="/page1"
              },
                 new MenuModel(){
               Label="示例子页面2",
            Icon = "el-icon-s-promotion",
               Route="/page2"
              }
             }
        });
    }
}

Razor two new components at page Pages, note the Razor component, are set to routing / page1 and / page2

image.png-123.3kB

Run to see the effect

image.png-44.2kB

Demo Download

Examples Demo obtain Come QQ group 74522853

Fuck Fork Me, Star Me

Blazui component library: https: //github.com/wzxinchen/Blazui

BlazAdmin core component library: https: //github.com/wzxinchen/BlazAdmin

BlazAdmin server-side rendering library: https: //github.com/wzxinchen/BlazAdmin.ServerRender