Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Example Razor C#Video

Ajax call

The ajax method used to use js directly in the browser to interact with the server currently only supports both input and output as json, and the return value is a json string, which can be converted and processed by itself.

Basic usage

Impersonate a login

Demo

Special attention:

Here is only a login simulation, and there is no real call to HttpContext.SignInAsync , the real use needs to refresh the page after the login is completed, otherwise the real login can not be successful.

var option = new AjaxOption
{
    Url = "/api/Login",
    Data = new User() { UserName = "admin", Password = "1234567" }
};
var result = await AjaxService.InvokeAsync(option);

@using BootstrapBlazor.Components
@using System.Text.Json

<div class="mt-3">
    <Button OnClick="Success">@Localizer["NormalButtonText1"]</Button>
    <Button OnClick="Fail">@Localizer["NormalButtonText2"]</Button>
    @if (!string.IsNullOrEmpty(ResultMessage))
    {
        <div class="mt-2"><code>@ResultMessage</code></div>
    }
</div>

@code
{
    private string? ResultMessage { get; set; }

    [Inject]
    [NotNull]
    private IStringLocalizer<AjaxNormal>? Localizer { get; set; }

    [Inject]
    [NotNull]
    private AjaxService? AjaxService { get; set; }

    [Inject]
    [NotNull]
    private SwalService? SwalService { get; set; }

    private Task Success() => ProcessResponse("admin", "123456");

    private Task Fail() => ProcessResponse("admin", "123");

    private async Task ProcessResponse(string userName, string password)
    {
        var option = new AjaxOption()
        {
            Url = "/api/Login",
            Data = new User() { UserName = userName, Password = password }
        };
        var result = await AjaxService.InvokeAsync(option);
        if (result == null)
        {
            ResultMessage = "Login failed";
        }
        else
        {
            ResultMessage = result;
            var doc = JsonDocument.Parse(result);
            if (200 == doc.RootElement.GetProperty("code").GetInt32())
            {
                await SwalService.Show(new SwalOption() { Content = "Login success！", Category = SwalCategory.Success });
            }
            else
            {
                await SwalService.Show(new SwalOption() { Content = $"Login failed: {doc.RootElement.GetProperty("message").GetString()}", Category = SwalCategory.Error });
            }
        }
    }

    class User
    {
        public string? UserName { get; set; }

        public string? Password { get; set; }
    }
}

Page jump

Implementing page jumps with Js addresses an issue where Blazor pages don't really refresh when they're jumped as SPA

Demo

<Button OnClick="Goto">@Localizer["GotoButtonText1"]</Button>
<Button OnClick="GotoSelf">@Localizer["GotoButtonText2"]</Button>

@code {
    [Inject]
    [NotNull]
    private IStringLocalizer<AjaxGoto>? Localizer { get; set; }

    [Inject]
    [NotNull]
    private AjaxService? AjaxService { get; set; }

    private async Task Goto()
    {
        await AjaxService.Goto("/introduction");
    }

    private async Task GotoSelf()
    {
        await AjaxService.Goto("/ajaxs");
    }
}

Methods

@page "/ajaxs"
@inject IStringLocalizer<Ajaxs> Localizer

<h3>Ajax call</h3>

<h4>The ajax method used to use js directly in the browser to interact with the server currently only supports both input and output as json, and the return value is a json string, which can be converted and processed by itself.</h4>

<DemoBlock Introduction="Impersonate a login" Title="Basic usage" Name="Normal" Demo="typeof(Demos.Ajax.AjaxNormal)">
    <p>
        <b>Special attention:</b>
        <div>Here is only a login simulation, and there is no real call to<code> HttpContext.SignInAsync </code>, the real use needs to refresh the page after the login is completed, otherwise the real login can not be successful.</div>
    </p>
    <Pre>var option = new AjaxOption
{
    Url = "/api/Login",
    Data = new User() { UserName = "admin", Password = "1234567" }
};
var result = await AjaxService.InvokeAsync(option);</Pre>
</DemoBlock>

<DemoBlock Introduction="Implementing page jumps with<code> Js </code> addresses an issue where <code> Blazor </code> pages don't really refresh when they're jumped as <b> SPA </b>" Title="Page jump" Name="Goto" Demo="typeof(Demos.Ajax.AjaxGoto)" />

<MethodTable Items="@GetMethods()" />

@code
{
    /// <summary>
    /// 获得属性方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<MethodItem> GetMethods() => new MethodItem[]
    {
        new MethodItem()
        {
            Name = "InvokeAsync",
            Description = Localizer["InvokeAsync"],
            Parameters = "AjaxOption",
            ReturnValue = "string"
        },
        new MethodItem()
        {
            Name = "Goto",
            Description = Localizer["Goto"],
            Parameters = "string",
            ReturnValue = " — "
        }
    };
}

Ajax call

The ajax method used to use js directly in the browser to interact with the server currently only supports both input and output as json, and the return value is a json string, which can be converted and processed by itself.

Demo

Demo

Methods

Bootstrap Blazor Component library updated to 7.2.5-beta02