Bootstrap Blazor - 企业级 UI 组件库

Enterprise-level component library based on Bootstrap and Blazor

Example Razor C#Video

获取客户端连接信息

多用系统日志跟踪

普通用法

注入服务显示客户端信息

Demo

用法介绍

1. Startup.cs 文件中使用 UseBootstrapBlazor 中间件进行客户端信息收集

public void Configure(IApplicationBuilder app)
{
    // ...
    // 增加下面这一行
    app.UseBootstrapBlazor();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapDefaultControllerRoute();
        endpoints.MapBlazorHub();
        endpoints.MapFallbackToPage("/_Host");
    });
}

2. 组件中使用注入服务 WebClientService 调用 RetrieveRemoteInfo 方法

[Inject]
[NotNull]
private WebClientService? ClientService { get; set; }

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await base.OnAfterRenderAsync(firstRender);

    if (firstRender)
    {
        await ClientService.RetrieveRemoteInfo();
        StateHasChanged();
    }
}

您的连接信息

连接 ID

当前用户

IP 地址

操作系统

浏览器

设备

语言

请求地址

@page "/client"

<h3>获取客户端连接信息</h3>

<h4>多用系统日志跟踪</h4>

<Block Title="普通用法" Introduction="注入服务显示客户端信息">
    <p>用法介绍</p>
    <div class="mb-3">
        <p>1. <b>Startup.cs</b> 文件中使用 <code>UseBootstrapBlazor</code> 中间件进行客户端信息收集</p>
        <Pre>public void Configure(IApplicationBuilder app)
{
    // ...
    // 增加下面这一行
    app.UseBootstrapBlazor();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapDefaultControllerRoute();
        endpoints.MapBlazorHub();
        endpoints.MapFallbackToPage("/_Host");
    });
}</Pre>
    </div>
    <div class="mb-3">
        <p>2. 组件中使用注入服务 <code>WebClientService</code> 调用 <code>RetrieveRemoteInfo</code> 方法</p>
        <Pre>[Inject]
[NotNull]
private WebClientService? ClientService { get; set; }

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await base.OnAfterRenderAsync(firstRender);

    if (firstRender)
    {
        await ClientService.RetrieveRemoteInfo();
        StateHasChanged();
    }
}
</Pre>
    </div>
    <GroupBox Title="您的连接信息">
        <div class="row g-3 form-inline">
            <div class="col-12 col-sm-6">
                <Display Value="ClientService.Id" DisplayText="连接 ID" ShowLabel="true" />
            </div>
            <div class="col-12 col-sm-6">
                <Display Value="ClientService.UserName" DisplayText="当前用户" ShowLabel="true" />
            </div>
            <div class="col-12 col-sm-6">
                <Display Value="ClientService.Ip" DisplayText="IP 地址" ShowLabel="true" />
            </div>
            <div class="col-12 col-sm-6">
                <Display Value="ClientService.OS" DisplayText="操作系统" ShowLabel="true" />
            </div>
            <div class="col-12 col-sm-6">
                <Display Value="ClientService.Browser" DisplayText="浏览器" ShowLabel="true" />
            </div>
            <div class="col-12 col-sm-6">
                <Display Value="ClientService.Device" DisplayText="设备" ShowLabel="true" />
            </div>
            <div class="col-12 col-sm-6">
                <Display Value="ClientService.Language" DisplayText="语言" ShowLabel="true" />
            </div>
            <div class="col-12 col-sm-6">
                <Display Value="ClientService.RequestUrl" DisplayText="请求地址" ShowLabel="true" />
            </div>
        </div>
    </GroupBox>
</Block>

// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

using BootstrapBlazor.Components;
using Microsoft.AspNetCore.Components;
using System.Diagnostics.CodeAnalysis;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public partial class Client
    {
        [Inject]
        [NotNull]
        private WebClientService? ClientService { get; set; }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="firstRender"></param>
        /// <returns></returns>
        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            await base.OnAfterRenderAsync(firstRender);

            if (firstRender)
            {
                await ClientService.RetrieveRemoteInfo();

                StateHasChanged();
            }
        }
    }
}