Blazor multiple _Host.cshtml

Viewed 3309

enter image description here

enter image description here

I wish to have around two_Host.cshtml. The idea is, i have a login page that have very different required css and js, and a main/dashboard page that has different required css and js as well, I do not want to load all this css and js in the single _Host.cshtml, one for the login page with its staffs and the other for main dashboard area. I already know the concept of multiple layouts but this does not solve the problem. Please help.

Of course i can play with the layout, my challenge is to use _Host.cshtml in Users folder for a select components like UserLoginView.razor and DasboardView.razor to use _Host.cshtml in Pages folder.

3 Answers

Since the _Host.cshtml is a razor page you can write logic in the page to load different CSS files, or you can load different partials or components.

Example

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My page</title>
    <base href="~/" />
    @if (Request.Path.Value == "/login")
    {
        <link href="css/login.css" rel="stylesheet" />
    }
    else
    {
        <link href="css/site.css" rel="stylesheet" />
    }
</head>

But if you really need to use multiple _Host files it's possible as stated in this discussion. This would need for the _Host files to be completely different applications though.

But you could add something like this:

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
    endpoints.MapBlazorHub();
    endpoints.MapFallbackToPage("/_Host");
    endpoints.MapFallbackToPage("~/user/{*clientroutes:nonfile}", "/_HostUsers");
});

in reply to @ZarkX, i completed his code for second suggestion i changed to

@page "/user" 

in _HostUsers.cshtml and changed base tag in head for:

<base href="/user">

i changed style , js path to

<link href="../css/bootstrap/bootstrap.min.css" rel="stylesheet"> 

in _HostUsers.cshtml and work for me.

Related