Website

The default Blazor template sets a folder at its root called Pages which contains all the basic pages that come with the default app _Host.cshtml included. Another folder set at the root is the Shared folder, which holds the MainLayout, NavMenu and SurveyPrompt files.

When building an app that is bigger than a few pages, it is generally worth splitting it down into areas [especially when using Identity (via the scaffolder) which by default is put in it’s own area].
Let us therefore attempt what shouldn’t be too difficult a job to relocate the root Pages and Shared folders into an area called General.

First create the folder structure Areas > General. Then just drag and drop the Pages folder into it.
When running the app now it will complain:
InvalidOperationException: Cannot find the fallback endpoint specified by route values: { page: /_Host, area: }.
To solve this issue, open Startup.cs where under the Configure method you’ll find this:

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

Which should be replaced with this:

app.UseEndpoints(endpoints => {
    endpoints.MapBlazorHub();
    endpoints.MapFallbackToAreaPage("/_Host", "General");
});

_Host.cshtml though does contain a namespace. This has now been removed from the root Pages folder so should therefore reflect that change with the namespace too.
So it now needs to show: @namespace BlazorAreasTest.Areas.General.Pages.

So far so good lets proceed. Lets move the Shared folder (drag and drop) into the General areas folder. We now need to change the using statement in _Imports.razor [found at the root of the project].

from:
@using BlazorAreasTest.Shared
to:
@using BlazorAreasTest.Areas.General.Shared.

This will resolve the <NavMenu /> (in the MainLayout file) compiler error.

The problem now is that the App.razor file throws an error on DefaultLayout="@typeof(MainLayout)" with a missing directive or assembly reference. It still thinks the MainLayout file is in BlazorAreasTest.Shared not in BlazorAreasTest.Areas.General.Shared where it actually is.

Whilst this doesn’t throw any errors either when compiling or when running, it is strange. If you type Areas.General.Shared. instead of MainLayout and hit Ctrl + space IntelliSense will bring up NavMenu and SurveyPrompt as options but not MainLayout. If you try and manually put in MainLayout it will complain that it doesn’t know that one, but if you put in BlazorAreasTest.Shared. and hit Ctrl + space IntelliSense will bring up MainLayout. What is setting it’s namespace to the root Shared folder which no longer exists? Whilst the NavMenu and SurveyPrompt files don’t have this issue.

The one and only solution that I got to work is the oldest in the book: restarting Visual Studio.

With that I conclude that whilst not being terrible and only needing to be done once for any app, it isn’t quite as simple as it could be.

4 Comments

  • Vincenzo

    Hi, good job. I try to build an app with many areas but I have problems with routing. For example, in my app there are two areas “General” and “Prenotazioni” and I had entered two endpoints:
    endpoints.MapFallbackToAreaPage(“/_Host”, “General”);
    endpoints.MapFallbackToAreaPage(“/Prenotazioni/{*clientroutes:nonfile}”, “/_HostPrenotazioni”, “Prenotazioni”);
    The pages in “General” folder are visible instead those in the “Prenotazioni” folder are not.
    The pages in the “Prenotazioni” folder are located in the “Pages” folder and they start with @page “/Prenotazioni/pagename”. Can you please help me with an example? Thanks so much.

    • Aryeh Silver

      Hi Vincenzo,
      You may be missing a base tag in the _HostPrenotazioni file. Try adding to the file.
      Hope this helps.

      • Vincenzo

        Hi Aryeh,
        thank you so much, I add <base href=”~/Prenotazioni” /> in the _HostPrenotazioni file and everything work fine.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.