如何将 Blazor Web assembly 添加到现有 ASP.NET Core Web 应用程序的身份区域？

问题描述 投票：0回答：1

我有一个 ASP Razor 页面 Web 应用程序。
我想将 Blazor 组件 添加到我的项目中。
当我将此行放入 index.cshtml 时，它有效

<component type="typeof(CountComponent)" render-mode="ServerPrerendered" />

但是当我将组件添加到身份区域中的cshtml

文件时

ProjectMainFolder\Areas\Identity\Pages\Account\Manage\ManageUsers.cshtml

它不起作用。

这是我的 StartUp.cs

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthentication();
app.UseAuthorization();

app.UseBlazorFrameworkFiles();

app.UseEndpoints(endpoints =>
{
    endpoints.MapHub<AmarbarHub>("/AmarbarHub");
    endpoints.MapRazorPages();
    endpoints.MapControllers();
    endpoints.MapBlazorHub();
});

还有这个

services.AddServerSideBlazor(o => o.DetailedErrors = true);

services.AddControllersWithViews()
.AddRazorRuntimeCompilation();

services.AddRazorPages()
.AddRazorRuntimeCompilation()
.AddRazorPagesOptions(options =>
{
    options.Conventions.AuthorizeAreaFolder("Admin", "/");
});

services.AddSignalR();

我还在结束之前添加了这一行

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

我已经搜索并尝试了很多但没有成功

asp.net asp.net-core routes blazor webassembly
1个回答
0
投票

我进行了测试，但我没有重现您的问题，因为计数器组件可以在index.cshtml和manageusers.cshtml中加载并运行良好。恐怕你可以按照官方文档来检查你是否遗漏了一些东西。

首先，虽然您为您的问题添加了 webassemble 标签，但我注意到您添加了 

<script src="~/_framework/blazor.server.js"></script>
，所以我担心您不会尝试添加 wsam 组件。

所以我的测试步骤是：

1.在共享文件夹中创建Counter.razor

2.通过标签助手

<component type="typeof(Counter)" render-mode="ServerPrerendered" />
以及
@using projectname.Pages.Shared
子句将组件放入index.html。

    Program.cs中

  1. 添加

    builder.Services.AddServerSideBlazor();
    ，并在
    app.MapBlazorHub();
    后面添加
    app.MapRazorPages();
    。我还用你的 
    app.UseEndpoints
    进行了测试，效果也很好。

  2. 在

    Pages/Shared/_Layout.cshtml
    中，在
    <base href="~/" />
    标签中添加
    <head>
    ，并在
    <script src="_framework/blazor.server.js"></script>
    之前添加
    @await RenderSectionAsync(...)
    。

通过上面的步骤，我可以看到页面中加载了计数器组件，但是当单击按钮时，它不起作用。看起来该组件变得非交互式。我发现这是由于在项目的根文件夹中缺少添加 

_Import.razor
造成的。所以我们需要第 5 步。

  1. 将

    _Import.razor
    添加到项目的根文件夹中。

    @使用System.Net.Http @使用Microsoft.AspNetCore.Authorization @使用Microsoft.AspNetCore.Components.Authorization @使用Microsoft.AspNetCore.Components.Forms @使用Microsoft.AspNetCore.Components.Routing @使用Microsoft.AspNetCore.Components.Web @使用Microsoft.AspNetCore.Components.Web.Virtualization @使用Microsoft.JSInterop @使用{应用程序命名空间}

然后我发现我们没有来自脚手架的默认

ManageUsers.cshtml
，所以我手动创建这个页面，并在身份区域的另一个页面中测试它。

@page
@using WebAppDefIdentity.Pages.Shared

<div>this is manage user page</div>

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.