Enterprise-level component library based on Bootstrap and Blazor

star nuget license download repo commit master coverage

Get client connection information

More for system log tracking

The injection service displays client information

Demo

Introduction to usage

1. The UseBootstrapBlazor middleware in the Startup.cs file that client information collection is performed.

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

2. The component uses the injection service WebClientService to call the GetClientInfo method.

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

private ClientInfo? ClientInfo { get; set; }

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

    if (firstRender)
    {
        ClientInfo = await ClientService.GetClientInfo();
        StateHasChanged();
    }
}
@page "/client"
@inject IStringLocalizer<Client> Localizer

<h3>Get client connection information</h3>

<h4>More for system log tracking</h4>

<DemoBlock Title="Basic usage" Introduction="The injection service displays client information" Name="Normal">
    <p>Introduction to usage</p>
    <div class="mb-3">
        <p>1. The <code>UseBootstrapBlazor</code> middleware in the <b>Startup.cs</b> file that client information collection is performed.</p>
        <Pre>public void Configure(IApplicationBuilder app)
{
    // ...
    // 增加下面这一行
    app.UseBootstrapBlazor();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapDefaultControllerRoute();
        endpoints.MapBlazorHub();
        endpoints.MapFallbackToPage("/_Host");
    });
}</Pre>
    </div>

    <Tips>
        <p><code>app.UseBootstrapBlazor</code> Middleware is located assembly <code>BootstrapBlazor.Middleware</code>, please refer to this package yourself for proper use</p>
    </Tips>

    <div class="mb-3">
        <p>2. The component uses the injection service <code>WebClientService</code> to call the <code>GetClientInfo</code> method.</p>
        <Pre>[Inject]
[NotNull]
private WebClientService? ClientService { get; set; }

private ClientInfo? ClientInfo { get; set; }

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

    if (firstRender)
    {
        ClientInfo = await ClientService.GetClientInfo();
        StateHasChanged();
    }
}
</Pre>
    </div>

    <GroupBox Title="Connection information">
        <div class="row g-3 form-inline">
            <div class="col-12 col-sm-6">
                <Display Value="ClientInfo.Id" DisplayText="Connection ID" ShowLabel="true" />
            </div>
            <div class="col-12">
                <Display Value="ClientInfo.RequestUrl" DisplayText="RequestUrl" ShowLabel="true" />
            </div>
            <div class="col-12 col-sm-6">
                <Display Value="ClientInfo.Ip" DisplayText="Ip" ShowLabel="true" />
            </div>
            <div class="col-12 col-sm-6">
                <Display Value="ClientInfo.OS" DisplayText="OS" ShowLabel="true" />
            </div>
            <div class="col-12 col-sm-6">
                <Display Value="ClientInfo.Browser" DisplayText="Browser" ShowLabel="true" />
            </div>
            <div class="col-12 col-sm-6">
                <Display Value="ClientInfo.Engine" DisplayText="Engine" ShowLabel="true" />
            </div>
            <div class="col-12 col-sm-6">
                <Display Value="ClientInfo.Device" DisplayText="Device" ShowLabel="true" />
            </div>
            <div class="col-12 col-sm-6">
                <Display Value="ClientInfo.Language" DisplayText="Language" ShowLabel="true" />
            </div>
            <div class="col-12">
                <BootstrapInput Value="ClientInfo.UserAgent" DisplayText="UserAgent" ShowLabel="true" readonly />
            </div>
        </div>
    </GroupBox>
</DemoBlock>
// 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.Samples;

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

    private ClientInfo ClientInfo { get; set; } = new ClientInfo();

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

        if (firstRender)
        {
            ClientInfo = await ClientService.GetClientInfo();
            StateHasChanged();
        }
    }
}

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion
Themes
Bootstrap
Motronic
Ant Design (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload