生成 Windows 窗体 Blazor 应用 （WinForm+Bootstrap Blazor）
官方文档有介绍如何用
WinForm+ Blazor 生成应用， 生成 Windows 窗体 Blazor 应用
先按照官方文档
启动 Visual Studio。 在“开始”窗口中，选择“创建新项目”： 创建WinForm项目
起名为：WinFormsBlazor
框架我们选择：.NET 8.0
创建完成项目后，使用 NuGet 包管理器安装 Microsoft.AspNetCore.Components.WebView.WindowsForms NuGet 包。（这里如果框架是选的8.0，我们就必须要选择8.*的版本，不然后面无法加载出来 BlazorWebView 控件，我这里选择的是8.0.100）
在“解决方案资源管理器”中，右键单击项目的名称 WinFormsBlazor，然后选择“编辑项目文件”以打开项目文件 (WinFormsBlazor.csproj)。
在项目文件的顶部，将 SDK 更改为 Microsoft.NET.Sdk.Razor：
<Project Sdk="Microsoft.NET.Sdk.Razor">
将更改保存到项目文件 (WinFormsBlazor.csproj)。
再在解决方案上右键，添加-》新建项目 添加Bootstrap Blazor项目 （怎么安装Bootstrap Blazor项目模板，请查看 官方文档：项目模板）。
创建完项目后 ，我们将BootStrap Blazor下的wwwroot整个文件夹复制到WinForm项目根目录，复制完后 WinForm项目目录结构如下。
在将具有以下标记的 index.html 文件添加到 wwwroot 文件夹。
wwwroot/index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>WinFormsBlazor</title> <base href="/" /> <!--<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />--> <!-- 需引用 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="_content/BootstrapBlazor/css/motronic.min.css" rel="stylesheet"/> <link href="WinFormsBlazor.styles.css" rel="stylesheet" /> <Link href="css/app.css" rel="stylesheet"/> </head> <body> <div id="app"></div> <!--<div id="blazor-error-ui" data-nosnippet> An unhandled error has occurred. <a href="" class="reload">Reload</a> <a class="dismiss">🗙</a> </div>--> <!-- 增加代码 !--> <script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script> <script src="_framework/blazor.webview.js"></script> </body> </html>
BootstrapBlazor 组件添加到WinForm现有项目。
版本也选择和框架对应的8.0版本，我们这里选择8.11.0
BootstrapBlazor.FontAwesome 也一并安装上
回到WinForm 项目：在“解决方案资源管理器”中，双击 Form1.cs 文件以打开设计器：
通过选择 Visual Studio 窗口左边缘的“工具箱”按钮，或选择“查看”>“工具箱”菜单命令来打开“工具箱”。
在 Microsoft.AspNetCore.Components.WebView.WindowsForms 下找到 BlazorWebView 控件。 将 BlazorWebView 从“工具箱”拖到 Form1 设计器中。 请务必小心，勿将 WebView2 控件意外拖动到窗体中。
Visual Studio 将窗体设计器中的 BlazorWebView 控件显示为 WebView2 并自动命名控件 blazorWebView1：
在 Form1 中，单击一下以选择 BlazorWebView (WebView2)。
在 BlazorWebView 的“属性”中，确认控件已命名为 blazorWebView1。 如果名称不是 blazorWebView1，则从“工具箱”中拖动了错误的控件。 删除 Form1 中的 WebView2 控件，然后将 BlazorWebView 控件拖动到窗体中。
在控件的属性中，将 BlazorWebView 的 Dock 值更改为“FILL”：
在 Form1 设计器中，右键单击 Form1，然后选择“查看代码”。
将 Microsoft.AspNetCore.Components.WebView.WindowsForms 和 Microsoft.Extensions.DependencyInjection 的命名空间添加到 Form1.cs 文件的顶部：
using Microsoft.AspNetCore.Components.WebView.WindowsForms; using Microsoft.Extensions.DependencyInjection;
在 Form1 构造函数中的 InitializeComponent 方法调用后面，添加以下代码：
var services = new ServiceCollection(); // 增加 BootstrapBlazor 服务 services.AddBootstrapBlazor(); services.AddWindowsFormsBlazorWebView(); ; blazorWebView1.HostPage = "wwwroot\\index.html"; blazorWebView1.Services = services.BuildServiceProvider(); blazorWebView1.RootComponents.Add<Main>("#app");
可以看到Main这里标红。
复制Blazor项目里的。_Imports.razor文件，Pages，Shared文件夹，复制完后，记得修改对应的命名空间。
复制Routes.razor 重命名为：Main.razor ，一定要认真改命名空间 一般飘红的地方都是命名空间问题，修改完后。启动项目
我们点击Table 发现没有数据
Form1 修改成如下:
var services = new ServiceCollection(); // 增加 BootstrapBlazor 服务 services.AddBootstrapBlazor(); services.AddWindowsFormsBlazorWebView(); // 增加 Table 数据服务操作类 services.AddTableDemoDataService(); blazorWebView1.HostPage = "wwwroot\\index.html"; blazorWebView1.Services = services.BuildServiceProvider(); blazorWebView1.RootComponents.Add<Main>("#app");
再次启动。 数据OK，正常。
我们发现左下角有 An unhandled error has occurred. 显示。。。，很不美观。
找到wwwroot/index.html
将
这段DIV删除掉。
每次第一次启动加载会显示一个Loading...
将 index.html
Loading... 删除掉 千万不要删除DIV 。不然启动会报错。
源码地址：WinFormsBlazor
