将服务器端Blazor添加到现有的MVC Core应用程序

Question

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

我设法将组件呈现在MVC页面上，但是Blazor组件上的按钮单击不会触发组件的onclick事件，而是直接导航到https：// localhost：44341 /？

我不清楚我需要在MVC解决方案中进行哪些更改才能使其正常工作？官方文档讨论了在MVC项目中使用组件的问题，并且在与Dan Roth的视频聊天中提到了它，但是都没有详细介绍如何实现。

任何人都可以向我介绍如何将服务器端Blazor改造为MVC项目的完整步骤（或为我提供示例）吗？

我尝试过的

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

<div id="Counter">
  @(await Html.RenderComponentAsync<Counter>())
</div>

可以正确渲染，但单击按钮不起作用。

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

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

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

services.AddServerSideBlazor();

我还向MVC项目添加了Pages和Shared目录，并复制了_Imports和MainLayout文件-不确定是否需要这样做。

如果这样做没有做，我尝试从所有Blazor模板（客户端，客户端托管和服务器端）中分解新项目以寻找线索，但是所有这些示例都设置为具有单个Blazor的完整SPA。入口点（App文件）托管在.html文件中，而我想在许多不同的现有MVC页面上呈现Blazor组件。

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

我也尝试按照这里的答案进行操作，但这是将Blazor组件文件添加到MVC项目中的工作，而我的Blazor文件当前（大多数情况下）在另一个项目中。

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

• 我已经services.AddServerSideBlazor();在MVC应用程序的Startup.cs中添加了。还有什么需要的吗？
• 我的MVC应用仍然是传统的AspNetCore.Routing，如果仅将组件放在现有的MVC页面上（我将没有Blazor页面，而只有Blazor组件），是否仍需要切换到Core 3的端点路由。
• 浏览器中运行的blazor javascript文件与之通信的Blazor的服务器端部分是否需要通过端点路由？我从js文件的浏览器中收到404。
• 如果我只是托管组件，是否仍需要“ App”（App.razor）类/页面作为入口点？
• 如果是这样，我是否需要将<app>@(await Html.RenderComponentAsync<App>())</app>_Host.cshtml中的行放在我的MVC项目中的某个位置？
• 我是否需要从我的MVC项目中的Blazor项目中复制Pages和Shared文件夹，以及两个_Imports.razor文件和MainLayout.razor文件？
• 我认为Blazor现在是Microsoft.NETCore.Platforms文件的一部分（在MVC项目的SDK节点下引用），所以我是否认为我不需要为MVC项目的Blazor添加单独的NuGet包？

Answer 1

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

在同一解决方案的不同项目中使用服务器端Blazor和MVC的示例

下面的答案假设您的解决方案中有一个服务器端Blazor项目，并且在同一解决方案的单独MVC项目中尝试使用该项目中的组件。我是在VS2019中使用Core 3 Preview 5完成的。

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

对MVC项目的.csproj文件的更改

您只需要添加对blazor项目的引用：

    <ProjectReference Include="..\MyClient.Web.Blazor\MyClient.Web.Blazor.csproj" />

对MVC项目的Views \ Shared \ _Layout.cshtml文件的更改

添加对Blazor JS脚本的引用

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

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

对MVC项目的Startup.cs的更改

这是真正的工作完成的地方

在ConfigureServices方法中添加：

services.AddServerSideBlazor();

然后，我将配置切换到新样式的Core 3配置（因此不再使用该AddMvc方法）：

services.AddControllersWithViews()            
    .AddNewtonsoftJson(options =>
    {
        options.SerializerSettings.ContractResolver = new DefaultContractResolver();
    });

services.AddRazorPages();

最终使一切对我有用的更改是，通过以下Configure(IApplicationBuilder app, IWebHostEnvironment env)方法切换到Core 3的端点路由：

app.UseRouting();

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
    endpoints.MapRazorPages();
    endpoints.MapBlazorHub();
});

//app.UseMvc(routes =>
//{
//    routes.MapRoute(
//        name: "MyArea",
//        template: "{area:exists}/{controller=Home}/{action=Index}/{id?}");

//    routes.MapRoute(
//        name: "default",
//        template: "{controller=Home}/{action=Index}/{id?}");
//});

注释掉的代码显示了我正在使用的旧样式路由。我认为这是endpoints.MapBlazorHub();造成按钮点击问题的原因

Blazor项目的变更

Blazor项目无需任何更改即可开始工作。

然后如何将Blazor组件放在MVC页面上

完成上述所有操作后，使您的组件在MVC页面上呈现所需要做的就是添加

 @(await Html.RenderComponentAsync<YourComponent>())

这应该在MVC页面和Razor页面上均适用。

Core 3 Preview 5中的已知路由问题

以上更改是我进行工作所需的全部操作。Core 5的一个已知问题是，一旦您导航到带有Blazor组件的MVC或Razor页面，在刷新页面之前，路由将不再起作用-URL将在浏览器的地址栏中更改，但不会导航会发生。

我现在在Preview 6上运行，并且可以确认从Preview 6开始已经解决了路由问题。

在同一项目中使用服务器端Blazor和MVC的示例

克里斯·桑迪（Chris Sainty）在这里向现有MVC 项目中添加了服务器端Blazor组件的示例： 在现有MVC应用程序中使用Blazor组件（请参见此处）