Bootstrap Blazor 实战动态表单组件

最新推荐文章于 2025-09-22 05:25:24 发布

原创

最新推荐文章于 2025-09-22 05:25:24 发布 · 5.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #前端 #html

本文详细介绍了如何在Blazor项目中集成BootstrapBlazor组件、添加样式表和JavaScript引用，管理命名空间，创建EditorForm并实现动态字段禁用。最后展示了数据验证组件ValidateForm的使用。

1.新建工程

源码

新建工程b18ValidateForm,使用 nuget.org 进行 BootstrapBlazor 组件安装, Chart 库,字体. 将项目添加到解决方案中

dotnet new blazorserver -o b18ValidateForm
dotnet add b06chart package BootstrapBlazor
dotnet add b06chart package BootstrapBlazor.FontAwesome
dotnet sln add b18ValidateForm/b18ValidateForm.csproj

2.样式表和Javascript 引用

增加主题样式表到 Pages/_Layout.cshtml 文件中

删除 <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />

并在下面添加三行

<link href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel="stylesheet" />
<link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet" />

添加 Javascript 引用到 Pages/_Layout.cshtml 文件中

在 <script src="_framework/blazor.server.js"></script> 之前添加

<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js" asp-append-version="true"></script>

3.添加增加命名空间引用到 `_Imports.razor` 文件中

@using BootstrapBlazor.Components

4.增加 BootstrapBlazorRoot 组件到 App.razor 文件中

<BootstrapBlazorRoot>
    <Router AppAssembly="@typeof(App).Assembly">
        ...
    </Router>
</BootstrapBlazorRoot>

5.添加BootstrapBlazor服务到 `Program.cs` 文件中

在 builder.Services.AddSingleton<WeatherForecastService>(); 后加入

builder.Services.AddBootstrapBlazor();

6.添加EditorForm测试代码

Index.razor

<EditorForm Model="@Model">
    <FieldItems>
        <EditorItem @bind-Field="@context.Name" />
        <EditorItem @bind-Field="@context.Education" />
        <EditorItem @bind-Field="@context.Complete" />
    </FieldItems>
    <Buttons>
        <Button Icon="fa