BootStrapBlazor 安装教程--Server模式

2022-07-25 09:34:40 阅读：208 来源： 互联网

标签：... BootstrapBlazor -- builder Server BootStrapBlazor 文件 services 模板

使用模板

使用模板是最简单的办法。因为项目模板里已经包含了BootStrapBlazor的所有需要配置的内容。

首先我们安装项目模板：

dotnet new -i Bootstrap.Blazor.Templates::6.4.1

这里的6.4.1是版本号，截至到目前Templates的版本号为6.4.1。

然后创建项目

dotnet new bbapp

这里的bbapp是项目名称，你可以换成自己的项目名。

这样一个新鲜的BB项目就建好了。

在现有模板上增加

安装BootstrapBlazor的库

可以使用NuGet浏览器，也可以使用命令

dotnet add package BootstrapBlazor --version 6.8.17

来安装。发文时的版本号为6.8.17。

添加样式表文件

.net6默认的cshtml已经移动到了~/Pages/_Layout.cshtml文件，不是.net5的~/Pages/_Host.cshtml文件了，这里需要注意。

<head>
    ...

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

    ...
    <link href="css/site.css" rel="stylesheet">
    <link href="BlazorApp1.styles.css" rel="stylesheet">
</head>

这里注意一下，默认BB使用FontAwesome作为图标库，同时BB也做了集成，但是集成在了一个子包里面，需要使用NuGet安装BootstrapBlazor.FontAwesome。

这里还需要注意，需要删除默认模板带的bootstrap的css文件，否则会有css的冲突。

添加 Javascript 文件

<body>
    ...
    <!-- 增加代码 !-->
    <script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>
    ...
    <script src="_framework/blazor.server.js"></script>
</body>

这里需要注意一下，bootstrap的js一定要放在blazor.server.js的前面，否则可能出问题。

注册 BootstrapBlazor 服务

顶级语句：Program.cs

var builder = WebApplication.CreateBuilder(args);

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

// 添加本行代码
builder.Services.AddBootstrapBlazor();

var app = builder.Build();
//more code may be present here

非顶级语句：Starup.cs

namespace MyBlazorAppName
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddServerSideBlazor();

            // 添加本行代码
            services.AddBootstrapBlazor();
        }
    }
}

增加命名空间引用

将以下内容添加到 ~/_Imports.razor 文件中，以便 Razor 文件中能识别组件

@using BootstrapBlazor.Components

增加 `BootstrapBlazorRoot` 组件到 `~/App.razor` 文件中

注意，这一步很重要，如果不做，程序在运行时大概率会报错。

<BootstrapBlazorRoot>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <PageTitle>Title</PageTitle>
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>正在玩命开发中 ...</p>
            </LayoutView>
        </NotFound>
    </Router>
</BootstrapBlazorRoot>

标签：...,BootstrapBlazor,--,builder,Server,BootStrapBlazor,文件,services,模板
来源： https://www.cnblogs.com/j4587698/p/16516287.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9