C# 将服务器端Blazor添加到现有MVC核心应用程序

我有一个完全可操作的Blazor服务器端项目和一个.NET Core 3 MVC项目，两者都在同一个解决方案中。我现在正试图在我的MVC项目中使用Blazor项目中的组件

我已经设法让组件在MVC页面上呈现，但是在Blazor组件上单击按钮不会触发组件的onclick事件，而是导航到

我不清楚我需要在MVC解决方案中做什么样的更改才能使其正常工作？这篇文章中提到了官方文件和它，但都没有详细说明如何实现它

有人能告诉我如何将服务器端Blazor改造成MVC项目的全部步骤吗（或者给我举个例子）

我试过的 我的Blazor项目仍然有标准模板的计数器组件，因此我尝试通过引用Blazor项目，然后将其添加到index.cshtml文件，将其添加到我的MVC解决方案中：

@（等待Html.RenderComponentAsync（））

这将正确渲染，但按钮单击不起作用

我已将JS文件添加到MVC应用程序布局页面：

在MVC项目的Startup.cs文件中打开服务器端Blazor：

services.AddServerSideBlazor（）；

我还向MVC项目添加了页面和共享目录，并复制了_导入和MainLayout文件-不确定是否需要

当这不起作用时，我尝试从所有Blazor模板（客户端、客户端托管和服务器端）旋转新项目以寻找线索，但所有这些示例都被设置为完整的SPA，只有一个Blazor入口点（应用程序文件）托管在一个.html文件中，然而，我想在许多不同的现有MVC页面上呈现Blazor组件

然后，我尝试将这些项目的一部分（以及我正在工作的Blazor项目的一部分）添加到MVC项目中，但无法让它完全工作

我也尝试过这样做，但这是为了将Blazor组件文件添加到MVC项目中，而我的Blazor文件目前（大部分）在另一个项目中

迄今为止我的实验中的随机问题

• 我添加了

  services.AddServerSideBlazor（）在MVC应用程序的Startup.cs中。还有什么需要的吗

• 我的MVC应用程序仍在传统的

  AspNetCore上。路由

  ，如果我只在现有MVC页面上放置组件（即，我没有Blazor页面，只有Blazor组件），我是否仍需要切换到Core 3的端点路由
• 浏览器中运行的Blazor javascript文件与之对话的Blazor服务器端部分（通过SignalR）是否需要端点路由？我在浏览器中从js文件中得到一个404
• 如果我只是托管组件，我还需要“App”（App.razor）类/页面作为入口点吗
• 如果是这样，我是否需要在我的MVC项目中的某个地方放置来自\u Host.cshtml的

  @（wait Html.RenderComponentAsync（））

  行
• 我是否需要复制MVC项目中Blazor项目的页面和共享文件夹，以及两个_Imports.razor文件和MainLayout.razor文件
• 我认为Blazor现在是Microsoft.NETCore.Platforms文件的一部分（在MVC项目的SDK节点下引用），所以我认为我不需要为Blazor添加单独的NuGet包到MVC项目中，对吗

---

我现在已经弄清了真相。在我的问题中描述了所有的尝试和错误之后，解决方案竟然只涉及很少的代码

同一解决方案中不同项目中的服务器端Blazor和MVC示例 下面的答案假设您的解决方案中有一个工作的服务器端Blazor项目，并且正在尝试在同一解决方案中的一个单独的MVC项目中使用该项目中的组件。我在VS2019中使用Core 3 Preview 5实现了这一点

请参见页面底部或指向同一项目中MVC和Blazor示例的链接

对MVC项目的.csproj文件的更改 您只需添加对blazor项目的引用：

对MVC项目的Views\Shared\\u Layout.cshtml文件的更改 将基本url添加到标头中：

添加对Blazor JS脚本的引用

（这实际上并不存在于您的本地文件系统中，Blazor会在应用程序进入浏览器时自动对其进行排序）

对MVC项目Startup.cs的更改 这才是真正的工作要做的地方

在

ConfigureServices

方法中添加：

services.AddServerSideBlazor（）；

然后，我将配置切换到新型Core 3配置（因此不再使用

AddMvc

方法）：

services.AddControllersWithViews（）
.AddNewtonsoftJson（选项=>
{
options.SerializerSettings.ContractResolver=新的DefaultContractResolver（）；
});
services.AddRazorPages（）；

然后，最终让我一切顺利的变化是在

Configure（IApplicationBuilder应用程序，IWebHostEnvironment env）

方法中切换到Core 3的端点路由：

app.UseRouting（）；
app.UseEndpoints（端点=>
{
endpoints.MapControllerRoute(
名称：“默认”，
模式：“{controller=Home}/{action=Index}/{id？}”）；
endpoints.MapRazorPages（）；
endpoints.MapBlazorHub（）；
});
//app.UseMvc（路由=>
//{
//routes.MapRoute(
//名称：“MyArea”，
//模板：“{area:exists}/{controller=Home}/{action=Index}/{id？}”）；
//routes.MapRoute(
//名称：“默认”，
//模板：“{controller=Home}/{action=Index}/{id？}”）；
//});

注释掉的代码显示了我使用的老式路由。我认为这是因为缺少

endpoints.MapBlazorHub（）导致我的按钮单击问题的原因

Blazor项目的更改
无需进行任何更改即可完成