图解 BootstrapBlazor 组件库的使用01：在 .NET 8.0 的 Blazor Web App 项目模板中引用 BootstrapBlazor

cqths

已于 2024-07-25 16:13:10 修改

阅读量3.2k

点赞数 13

分类专栏： Blazor # Blazor Web App 文章标签： web app c# .net

于 2023-12-01 22:50:15 首次发布

本文链接：https://blog.csdn.net/cqths/article/details/134743511

版权

Blazor 同时被 2 个专栏收录

13 篇文章 3 订阅

订阅专栏

Blazor Web App

4 篇文章 1 订阅

订阅专栏

一、在 Visual Studio 2022 中创建 Blazor Web App 项目

图1-1

图1-2

图1-3

注：如果 Interactivity location 选择 Per page/component ，则需要在 App.razor 中的 Routes 组件中指定 rendermode ，否则 BootstrapBlazor 中的 Layout 组件中的侧边栏折叠按钮无效。示例代码：<Routes @rendermode="InteractiveServer" />

二、使用 NuGet 引用 BootstrapBlazor，尽量选择最新版本

图2-1

图2-2

三、使用 NuGet 引用 BootstrapBlazor.FontAwesome，尽量选择最新版本

图3-1

四、在 Program.cs 中添加引用

注：Blazor Web App 不使用 <NotFound> 模板，需要自定义出错处理页面。

............
............
............

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

// BootstrapBlazor 引用
builder.Services.AddBootstrapBlazor();

var app = builder.Build();

............
............
............

// 指定错误处理页面：本例直接使用项目模板自带的 Error.razor
app.UseStatusCodePagesWithRedirects("/Error");

app.Run();

代码4-1

五、在 _Imports.razor 中添加引用

............
............
............
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using BlazorWebApp.WithBB
@using BlazorWebApp.WithBB.Components

@* BootstrapBlazor 引用 *@
@using BootstrapBlazor.Components

代码5-1

六、在 App.razor 中添加引用，指定 rendermode（完整示例）

注：如果不指定 @rendermode="InteractiveServer"，则 Layout 组件中的侧边栏折叠按钮无效。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />

    @* BootstrapBlazor 中已集成 Bootstrap 最新版，项目模板自带的则不再需要。
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" /> *@

    @* 引用 BootstrapBlazor 样式（已集成 Bootstrap 最新版）。 *@
    <link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" />
    @* FontAwesoem 字体样式 注意需要使用 NuGet 引用 BootstrapBlazor.FontAwesome 包。 *@
    <link rel="stylesheet" href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" />
    @* 如果不使用 Motronic 样式，则下句不需要。 *@
    <link rel="stylesheet" href="_content/BootstrapBlazor/css/motronic.min.css" />

    @* 自动生成的当前项目的样式表文件，可以保存自定义样式。 *@
    <link rel="stylesheet" href="app.css" />
    @* 自动生成的隔离样式文件，不需要修改。 *@
    <link rel="stylesheet" href="BlazorWebAppWithBB.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    @* 创建 Blazor Web App 项目时选择的是 Server、Global 模式，则此处自动生成匹配说明：@rendermode="InteractiveServer"。 *@
    <HeadOutlet @rendermode="InteractiveServer" />
</head>

<body>
    @* 创建 Blazor Web App 项目时选择的是 Server、Global 模式，则此处自动生成匹配说明：@rendermode="InteractiveServer"。
    注1：此处指定 rendermode 后，则在其它 razor 组件中可以不再单独添加。
    注2：如果创建项目时选择 Server、Per page/component 模式，则需要在每个有动态更新操作的 razor 文件中单独指定 rendermode。 *@
    <Routes @rendermode="InteractiveServer" />

    @* BootstrapBlazor 引用 *@
    <script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>

    <script src="_framework/blazor.web.js"></script>
</body>

</html>

代码6-1

七、在 app.css 文件中添加 BootstrapBlazor 中的 Layout 组件（参见代码8-1）需要的样式

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

............
............
............

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}


/* ********** 以下 css 为 BootstrapBlazor 的 <Layout> 组件使用（下列样式可根据自己项目的需要进行修改）。 ********** */
.layout-header {
    border-bottom: 1px solid var(--bs-border-color);
}
.layout-banner {
    border-bottom: 1px solid var(--bs-border-color);
}
.layout-side {
    border-right: 1px solid var(--bs-border-color);
}


.layout {
     --bb-layout-user-height: 0px;
 }


.layout-footer-gray {
    color: gray;
    cursor: pointer;
}

代码7-1

八、在 Layout 文件夹中创建 BootstrapBlazor 的 Layout 模板： BBLayout.razor（完整示例）

图8-1

@inherits LayoutComponentBase

<BootstrapBlazorRoot>

    <Layout SideWidth="0" IsPage="true" IsFullSide="true" ShowCollapseBar="true"
            IsFixedHeader="true" IsFixedFooter="true"
            ShowFooter="true" ShowGotoTop="true"
            Menus="@Menus"
            UseTabSet="true" TabDefaultUrl="/">
        <Header>
            <span class="ms-3 flex-fill">Blazor Web App 模板引用 BootstrapBlazor</span>
            <span class="mx-3 d-none d-sm-block">登录用户名</span>
        </Header>
        <Side>
            <div class="layout-banner">
                <img alt="logo" class="layout-logo" src="favicon.png" />
                <div class="layout-title">
                    <span>项目名称</span>
                </div>
            </div>
        </Side>
        <Main>
            @Body
        </Main>
        <Footer>
            <div class="text-center flex-fill">
                <a class="layout-footer-gray">版权说明、使用说明</a>
            </div>
        </Footer>
    </Layout>

</BootstrapBlazorRoot>


@code {
    private IEnumerable<MenuItem>? Menus { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        Menus = new List<MenuItem>
        {
            new () { Text = "Home", Icon = "fa-fw fa-solid fa-house", Url = "/" },
            new () { Text = "counter", Icon = "fa-fw fa-solid fa-desktop", Url = "/counter" },
            new() { Text = "weather", Icon = "fa-fw fa-solid fa-laptop", Url = "/weather" }
        };
    }
}

代码8-1：BBLayout.razor

九、在 Home.razor、Counter.razor 等页面中使用 BootstrapBlazor 的 Layout 模板

@page "/"

@* 指定使用 BBLayout *@
@layout BlazorWebAppWithBB.Components.Layout.BBLayout

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

代码9-1

@page "/counter"

@* 指定使用 BBLayout *@
@layout BlazorWebAppWithBB.Components.Layout.BBLayout

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

代码9-2