个人中心
gpt4 book ai didi

c# - 将服务器端 Blazor 添加到现有 MVC 核心应用

转载 作者：太空狗 更新时间：2023-10-29 23:04:56 27 4
gpt4 key购买 nike

我有一个完全可用的 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单个 Blazor 入口点(App 文件)托管在 .html 文件中，而我想在许多不同的现有 MVC 页面上呈现 Blazor 组件。

然后，我尝试将这些项目的一部分(以及我工作的 Blazor 项目的一部分)添加到 MVC 项目中，但无法使其完全运行。

我尝试关注 the answer here也一样，但这是将 Blazor 组件文件添加到 MVC 项目中，而我的 Blazor 文件目前(大部分)在不同的项目中。

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

  • 我添加了 services.AddServerSideBlazor();在 MVC 应用程序的 Startup.cs 中。还有什么需要吗？
  • 我的 MVC 应用程序仍在传统 AspNetCore.Routing ，如果我只将组件放在现有的 MVC 页面上(即我不会有 Blazor 页面，只有 Blazor 组件)，我还需要切换到 Core 3 的端点路由吗？
  • 在浏览器中运行的 blazor javascript 文件与之通信(通过 SignalR)的 Blazor 服务器端部分是否需要端点路由？我在浏览器中从 js 文件中收到 404。
  • 如果我只是托管组件，我还需要“App”(App.razor) 类/页面作为入口点吗？
  • 如果是这样，我是否需要将 <app>@(await Html.RenderComponentAsync<App>())</app>来 self 的 MVC 项目中某处的 _Host.cshtml 的行？
  • 我是否需要在我的 MVC 项目中从 Blazor 项目复制 Pages 和 Shared 文件夹，以及两个 _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 项目的引用:

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

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

将基本 url 添加到头部:

<head>
<meta charset="utf-8" />
<base href="~/" />

添加对 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 将在浏览器的地址栏中更改，但不会发生导航。

我现在运行的是 Preview 6，我可以确认路由问题现在已从 Preview 6 开始修复。

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

Chris Sainty 在此处有一个服务器端 Blazor 组件添加到现有 MVC 项目 的示例:Using Blazor Components In An Existing MVC Application ( source here )

关于c# - 将服务器端 Blazor 添加到现有 MVC 核心应用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56241125/

27 4 0
文章推荐： c# - 如何在微服务分布式环境中创建一个简短易读的 UUID
文章推荐： c++ - 是否有 iswctype() 函数的窄字符版本？
文章推荐： c++ - QT 5.2 - 没有 'Qt Gui application' 选项
文章推荐： c# - EF Core 中的 AddRange 和 AddRangeAsync 有什么区别
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com