如何在现有的 .NET MVC 项目中启用/使用/配置 WebAssembly Blazor？答案

【问题标题】：How to enable/use/configure WebAssembly Blazor in existing .NET MVC Project?如何在现有的 .NET MVC 项目中启用/使用/配置 WebAssembly Blazor？
【发布时间】：2020-09-11 18:52:42
【问题描述】：

我有一个用 .net core MVC 编写的 Web 应用程序，这是一个使用模型/视图/控制器模式的标准“老派”Web 应用程序。在这个应用程序中，我有一些复杂的表单，它们会根据用户的选择而变化。根据用户在前几个下拉列表中选择的内容加载不同的元素。目前我使用 Vue.js 成功构建了这样一个接口。所以基本上我没有 SPA 应用程序，但是当需要复杂的前端界面时，我偶尔会在整个应用程序中使用 Vue.js。

现在客户端 WebAssembly Blazor 正式推出，我想用基于 Blazor 的代码替换我用 vue.js 编写的复杂表单。我找到了解释如何使用服务器端 Blazor here 执行此操作的帖子，但我找不到任何关于它的 WebAssembly 版本的信息。

有没有人设法将客户端 - Web 程序集 Blazor 集成到现有的 MVC 项目中？如果有怎么办？

【问题讨论】：

你的意思是用UseMvc代替UseEndpoints？
我的意思是用户 MVC 项目在控制器、视图和模型中不是新的 Razor Pages 项目模板，而是一个 MVC 项目模板。他们所有的例子都是从 Razor Pages 项目开始的。

标签： asp.net-mvc blazor asp.net-core-3.0

【解决方案1】：

要将 Blazor WASM 设置到现有项目，您需要：

在 ASP.Net Core 项目中添加对 Blazor WASM 项目的引用
将包引用添加到Microsoft.AspNetCore.Components.WebAssembly.Server
在中间件管道中添加 UseBlazorFrameworkFiles()
在中间件管道中添加 UseStaticFiles()
将MapFallbackToFile 添加到指向 Blazor WASM 的端点index.html

public void Configure(IApplicationBuilder app)
{
    if (Environment.IsDevelopment())
    {
        app.UseDeveloperExceptionPage()
            .UseDatabaseErrorPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error")
            .UseHsts();
    }

    app.UseHttpsRedirection()
        .UseBlazorFrameworkFiles()
        .UseStaticFiles()
        .UseRouting()
        .UseAuthentication()
        .UseAuthorization()
        .UseEndpoints(endpoints =>
        {
            endpoints.MapControllerRoute(
               name: "default",
               pattern: "{controller=Home}/{action=Index}/{id?}");
            endpoints.MapFallbackToFile("index.html");
        });
}

【讨论】：

好的，我已经完成了所有这些，但我仍然无法使用任何 Blazor 组件。例如，我不能只通过 MVC 视图中的之类的标记帮助程序从 Blazor 项目中引用 Counter 组件。
由于这是关于遗留项目，因此值得注意的是您需要 >= asp.net Core 3
这是一个 SPA 应用程序，您不能在 MVC 视图中使用标签助手使用 Blazor WASM 组件。您可以通过添加与 index.html 相同的 javascript 和标签将应用程序集成到 View 中
@HenkHolterman 这是一个使用 SingalR Blazor 集线器的服务器端 Blazor 集成示例。我想要客户端 Blazor 集成。
同样，它是一个在浏览器中运行的 SPA 应用程序，而不是在服务器中。它以_framework/blazor.webassembly.js 启动。如果你想在 .cshtml 视图中托管应用程序，你需要这个脚本，就像 index.html 一样。您无需重新构建应用程序。 Blazor WASM 与 Razor Pages 或 MVC 无关，如果需要，它可以在 github 页面或任何提供静态页面的 http 服务器上运行。

【解决方案2】：

我有这个工作，它真的让我度过了我的一周。

首先，将您的 MVC 项目更新或转换为 .Net 5.0.402。它可能适用于早期版本，但我尚未对其进行测试。

向您的 MVC 解决方案添加一个 blazor Web 程序集应用程序项目。这是 Web 程序集组件项目。

在 MVC 视图中，在您希望呈现 blazor 组件的位置添加：

@using myawesomewasmprojectnamespace.Pages

<component type="typeof(Counter)" render-mode="WebAssemblyPrerendered"/>

<script src="_framework/blazor.webassembly.js"></script>

“@using”声明指的是 blazor Web 程序集应用程序项目 Pages 目录。 “typeof(Counter)”类型是指 Visual Studio 提供的默认 blazor Web 程序集应用程序项目中的 Counter.razor 组件。这当然可以换成最终的设计组件。

在 MVC 项目的 _Layout.cshtml 中，或 MVC 视图的 <head> 标记所在的任何位置，在其中包含 blazor 组件的每个页面的 <head> 标记中包含：

<base href="/"/>

将“Microsoft.AspNetCore.Components.WebAssembly.Server”包添加到您的 MVC 项目中。

在 MVC 依赖项、项目引用中添加对 blazor Web 程序集应用程序项目的引用。

在 MVC 应用 Startup.cs, 'public void Configure(IApplicationBuilder app, IWebHostEnvironment env)' 方法中，添加以下内容：

app.UseBlazorFrameworkFiles();

在 blazor Web 程序集应用程序项目 Program.cs 文件中，注释掉以下行以停止应用程序寻找“<div id="app"></div>”

//builder.RootComponents.Add<App>("#app");

最后，从 blazor Web 程序集应用程序项目的 wwwroot 目录中删除图标，因为它会与 MVC 冲突。

这会将“计数器”组件添加到您的 MVC 视图中。

要将不同的组件添加到不同的视图，请将其插入：

@using myawesomewasmprojectnamespace.Pages

<component type="typeof(Myawsomecomponentnamecompletelydifferentfromanymvccontrolleroractionname)" render-mode="WebAssemblyPrerendered"/>

<script src="_framework/blazor.webassembly.js"></script>

然后使用以下命令启动您的 blazor 组件：

@page "/myawsomecomponentnamecompletelydifferentfromanymvccontrolleroractionname"

我很高兴能得到这个工作，因为我已经尝试了很多年。如果你不能让它工作，请给我发消息，我会尽力回答任何问题。

【讨论】：

如何让 Blazor 组件在客户端上初始化？缺少一些东西
@Wulfbane ，我刚刚在 Visual Studio 中创建了一个全新的 .Net core 5.0 MVC 应用程序。然后，我向其中添加了 blazor Web 程序集应用程序项目，并按照上面的所有说明进行操作。确保添加 nuget 包和项目依赖项引用。我在默认的 MVC 项目隐私页面上包含了 Counter.razor 组件，它可以立即工作。 javascript 在页面上的组件标记中启动 Web 程序集。请问您遇到了什么错误？