Search code examples
c#asp.net-coreblazorrazor-pagesasp.net-core-5.0

Page can’t be found - .razor in razor pages project, Net 5.0

I have a razor pages project on Net 5.0. In this project, I would like to use both .cshtml and .razor pages. (maybe with time migrate to .razor). I can successfully use the razor component on .cshtml page, but I can not make the .razor page working, always get "This page can’t be found" error. I followed Combining Razor and Blazor Pages in a Single ASP.NET Core 3 Application and some others, but still does not work.

Startup.cs has

services.AddServerSideBlazor();
and
endpoints.MapBlazorHub();
endpoints.MapFallbackToFile("/_Host.cshtml")

_Imports.razor in root:

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components
@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

Pages/App.razor

@using Microsoft.AspNetCore.Components.Routing 
 <Router AppAssembly="@typeof(Program).Assembly"}">
    <Found Context="routeData">
        <RouteView RouteData="@routeData"/>
    </Found>
    <NotFound>
        <h1>Page not found123</h1>
        <p>Sorry, but there's nothing here!</p>
    </NotFound>
</Router>

Page/_Host.cshtml

@page "/blazor"
 
@{
    Layout = "_Layout";
}
 
<div id="app">
    @(await Html.RenderComponentAsync<App>(RenderMode.Server))
</div>

Page/Shared/_Layout.cshtml

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

 @RenderSection("Scripts", required: false)

And the page itself: Pages/Test.razor

@page "/test"
@implements IDisposable
<div>test</div>

What am I missing?

Solution

  • Here is my razor page project structure:

    enter image description here

    I add Shared folder to the project,and add App.razor,_Imports.razor to the project.Add Counter.razor,_Host.cshtml to Pages Folder.Add Configuration in Startup.cs.

    Startup.cs:

    public void ConfigureServices(IServiceCollection services)
        {
            services.AddServerSideBlazor();
            services.AddRazorPages();
        }
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

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

            app.UseRouting();

            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapBlazorHub();
                endpoints.MapFallbackToPage("/_Host");
                endpoints.MapRazorPages();
            });
        }

    _Imports.razor(the last two line RazorPageDemo5._0 is my project name,yours can be @using projectname @using projectname.Shared):

    @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 RazorPageDemo5._0
@using RazorPageDemo5._0.Shared

    Page/Shared/_Layout.cshtml:

    <script src="_framework/blazor.server.js"></script>
    @await RenderSectionAsync("Scripts", required: false)

    Page/_Host.cshtml(change namespace to your project's):

    @page "/"
@namespace RazorPageDemo5._0.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <component type="typeof(App)" render-mode="ServerPrerendered" />

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

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

    And then add MainLayout.razor,NavMenu.Razor,SurveyPrompt.razor to Shared folder.Add App.razor to project.

    Result: enter image description here