Question

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

我设法将组件呈现在MVC页面上，但是单击Blazor组件不会触发该组件的onclick事件，相反，我只是导航到https://localhost:44341/？

我不清楚我需要在MVC解决方案中进行哪些更改才能使其正常工作？ talks about using components in and MVC project中已经提到了官方文档video chat with 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模板（客户端，客户端托管和服务器端）中分解出新项目以寻找线索，但是所有这些示例均设置为具有以下内容的完整SPA .html文件中托管一个Blazor入口点（App文件），而我想在许多不同的现有MVC页面上呈现Blazor组件。

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

我也尝试遵循the answer here，但这是将Blazor组件文件添加到MVC项目中的工作，而我的Blazor文件当前（大部分）位于另一个项目中。

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

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

Answer 1

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

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

更改为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中的已知路由问题

上述更改是我进行工作所需的全部操作。在known issue with Core 5中，一旦您导航到带有Blazor组件的MVC或Razor页面，在刷新页面之前，路由将不再起作用-URL将在浏览器的地址栏中更改，但不会导航会发生。这些情况中的第一个似乎表明这可能在Core 3 Preview 6中得到了解决。

这在以下两个github问题上得到了跟踪：

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