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.
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.
Hi Vincenzo,
You may be missing a base tag in the _HostPrenotazioni file. Try adding to the file.
Hope this helps.
Hi Aryeh,
thank you very much, I added in the _HostPrenotazioni file and everything work fine.
Hi Aryeh,
thank you so much, I add <base href=”~/Prenotazioni” /> in the _HostPrenotazioni file and everything work fine.
Quick tip, with VS2022, it seems that the order of parameters for app.MapFallbackToPage has been reversed. You now have to do…
app.MapFallbackToPage(“General”, “/_Host”);
…otherwise you will get an error…
System.ArgumentException: ”General’ is not a valid page name. A page name is path relative to the Razor Pages root directory that starts with a leading forward slash (‘/’) and does not contain the file extension e.g “/Users/Edit”. Arg_ParamName_Name’
Hi Yossu,
The order for app.MapFallbackToPage was always pattern first then page name. This hasn’t changed in VS22.
You may be getting mixed up with the app.MapFallbackToAreaPage which is what I used above. This takes the page first and then then area name.
app.MapFallbackToPage(string pattern, string page)
or
app.MapFallbackToAreaPage(string page, string area)
I hope this clarifies it.
OH..My God……..
I found THIS!!!!!!!!!!!!!!!!!!!!!!!!!!! 1 month… try…try…all fail…
you..know.. I want just Error middleware error(error.cshtml) page change folder
many try..all failed…
You..are the GOD !!!!!!!!!!!!!
Thank you.