Setting up Blazor in an Area?

Posted 4 years ago by selliott
Edited 3 years ago
0

Has anyone had any luck getting Blazor to work in an "Area", with a base href that isn't "~/" ?

I want to keep Blazor running in the root, but also run it in another directory of its own. In that Area, I have an _AdminHost.cshtml file (and its own AdminApp.razor file that uses the custom layout for the Admin Area). If I set the base href like this

<base href="~/admin/" />

and add the following blazor.server.js reference

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

it throws a 400 error after attempting to POST to "/admin/_blazor/negotiate?negotiateVersion=1", then says it "Failed to complete negotiation with the sever" and "Failed to start connection". 

If I change the blazor.server.js reference to the following, I can create a connection, but the routing to the components gets messed up (keeps looking in root instead of Area)

<script src="/_framework/blazor.server.js" autostart="false"></script>
<script>
    Blazor.start({
        configureSignalR: function (builder) {
            builder.withUrl("/_blazor")
            .build();
        }
    });
</script>

Here are the endpoints in the Startup.cs file

app.UseEndpoints(endpoints =>
{
	endpoints.MapControllers();
	endpoints.MapBlazorHub();
	endpoints.MapFallbackToAreaPage("~/admin/{*clientroutes:nonfile}", "/_AdminHost", "Admin");
	endpoints.MapFallbackToPage("/_Host");
});

I've also tried changing the JavaScript to use builder.withUrl("/admin/blazor") in the Area's _AdminHost.cshtml file and added a second MapBlazorHub endpoint of endpoints.MapBlazorHub("~/admin/_blazor"); into the Startup.cs file, but the result was the same.

  • 0

    Just to be clear, everything works within the Area fine if the base href is "~/", but if I click a link to return to the front-end (clicking the logo for example, to go home), the theme doesn't flip from the Admin theme to the front-end theme like it should. Changing the base href to "~/admin/" does fix the theme issue and it flips back and forth like it should, but it creates the issues I mentioned in the initial topic post with the Hub connection and components routing.

    Posted 3 years ago by selliott Edited 3 years ago
  • 0

    This turned out mostly having to do with needing to change the "@page" directives to match the change. Since the base href was changed from "~/" to "~/admin/", then page directives also needed changed from something like "~/admin/foo" to "~/foo". When I left the page directives set to "/admin/foo" it was actually setting the URL to "/admin/admin/foo".

    I also changed my blazor.server.js reference by removing the autostart attribute and removed the extra JavaScript for creating the hub connection. So this is all I needed in _AdminHost.cshtml to create the hub connection.

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

    I also added a new enpoint in the Startup.cs file to create the connection within the Admin Area. Notice MapBlazorHub is used twice:

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
        endpoints.MapBlazorHub();
        endpoints.MapBlazorHub("~/admin/_blazor");
        endpoints.MapFallbackToAreaPage("~/admin/{*clientroutes:nonfile}", "/_AdminHost", "Admin");
        endpoints.MapFallbackToPage("/_Host");
    });

    I am still seeing some routing issues, like conflicts if "/foo" exists in the Area and exists in the main root, but I'm currently getting around it by adding an extra section to the path in the admin area (ie. "/manage/foo" instead of "/foo"). Also, if I navigate to something like "/admin/bar" and "/bar" exists in the main root (but not the Admin Area...because it would collide), it loads the Admin theme, but the root "/bar" component.

    Posted 3 years ago by selliott Edited 3 years ago
  • 0

    Thanks for the explanation on Area, when I attempt to use the below code in side  a page in my area, the page is never render but as soon as I take this off, the page  is render. This same code was tested in the root page folder and everything worked perfectly 

     protected override async Task OnInitializedAsync()

           {

               try

               {

                   await LocalStorageService.SetAsync("Name", "bolajwor@gmail.com");

                   var CurrentCount = await LocalStorageService.GetAsync<string>("Name");                }

               catch (System.Exception ex)

               {

     

                   string g = ex.Message;

               }

     

           }

    Posted 3 years ago by jameson
  • 0

    What is your reasoning behind separating things into an area? You section your admin pages into their own folder and then route them appropriately.

    Posted 3 years ago by cory2
  • 0

    jameson, it's hard to say what your issue is without seeing any of your error messages. You may need to enable detailed errors. One simple way to do that is to go to your Program.cs file and add UseSetting(WebHostDefaults.DetailedErrorsKey, "true") like this:

    public static IHostBuilder CreateHostBuilder(string[] args) =>
        Host.CreateDefaultBuilder(args)
            .ConfigureWebHostDefaults(webBuilder =>
            {
                webBuilder.UseStartup<Startup>()
                .UseSetting(WebHostDefaults.DetailedErrorsKey, "true");
            });

    Once you do that, it should become easier to find your issue.

    Posted 3 years ago by selliott
  • 0

    cory2, I just found it much cleaner and more organized, especially since I had a separate theme for the admin area. It was also because that's how I've built MVC sites, so it felt more right...and I didn't find any examples anywhere about how to make it work and wanted to figure it out.

    Posted 3 years ago by selliott Edited 3 years ago
  • 0

    Yeah, I'm no web expert, but I think there are some MVC principals that aren't going to translate over to Blazor well. What I've done in the past using Blazor, is having a different layout for vastly different templates / themes. Then, specify the AdminLayout for the admin pages, etc.

    Posted 3 years ago by cory2
Someone is typing...

Post a Reply

You must be logged in to add a new post.
Number of online users: 2
An error has occurred. This application may no longer respond until reloaded. Reload 🗙