Search code examples
asp.netasp.net-coreroutesblazorwebassembly

How to add Blazor Webassembly to the Identity Area of an existing ASP.NET Core web app?

I have an ASP Razor page web app.
I want to add a Blazor component to my project.
It works when I put this line in the index.cshtml

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

But when I add the component to a cshtml file in Identity Area

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

It does not works. enter image description here

This is my 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();
});

And This

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

services.AddControllersWithViews()
.AddRazorRuntimeCompilation();

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

services.AddSignalR();

Also I've added this line before ends

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

I've searched and tried a lote with no sucess

Solution

  • I had a test in my side but I didn't reproduce your issue as the Counter component could loaded and worked well in both index.cshtml and manageusers.cshtml. I'm afraid you could follow official document to check if you missed something eles.

    Firstly, although you add webassembly tag for your question, but I noticed you had added <script src="~/_framework/blazor.server.js"></script> so that I'm afraid you are not trying to add wsam component.

    So my test steps is:

    1.create Counter.razor in Shared folder

    2.put the component into index.html by tag helper <component type="typeof(Counter)" render-mode="ServerPrerendered" /> along with the @using projectname.Pages.Shared clause.

    1. add builder.Services.AddServerSideBlazor(); in Program.cs, and add app.MapBlazorHub(); behind app.MapRazorPages();. I also test with your app.UseEndpoints which worked as well.

    2. in Pages/Shared/_Layout.cshtml, add <base href="~/" /> in <head> tag, and add <script src="_framework/blazor.server.js"></script> immediately before @await RenderSectionAsync(...) .

    With Steps above, I can see the counter component loaded in the page, but when clicking the button, it didn't work. Looks like the component becomes noninteractive. I found that's due to missing adding _Import.razor in the root folder of the project. So we need step 5.

    1. Add _Import.razor to the root folder of the project.

      @using System.Net.Http

      @using Microsoft.AspNetCore.Authorization

      @using Microsoft.AspNetCore.Components.Authorization

      @using Microsoft.AspNetCore.Components.Forms

      @using Microsoft.AspNetCore.Components.Routing

      @using Microsoft.AspNetCore.Components.Web

      @using Microsoft.AspNetCore.Components.Web.Virtualization

      @using Microsoft.JSInterop

      @using WebAppDefIdentity//project name here

    And test result:

    enter image description here

    Then I found that we don't have default ManageUsers.cshtml from scaffold, so I create this page manually and also test it within another page in Identity Area.

    @page
@using WebAppDefIdentity.Pages.Shared

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

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

    enter image description here