40

The startup page in my Blazor application is Index.cshtml. I'd like to change the startup page to the homepage, namely my Home.cshtml.
I'm using vs2019, ASPNET CORE Blazor (0.9.0-preview3-19154-020).

Blazor Serverside has routing in the Startup.cs, which i think is for the services, and not for the pages...and is left as generated by creating a new Blazor project.

app.UseMvc(routes =>
{
   routes.MapRoute(name: "default", template: "{controller}/{action}/{id?}");
});

The client's startup has (as generated by a new Blazor project):

public void ConfigureServices(IServiceCollection services)
{
}

 public void Configure(IComponentsApplicationBuilder app)
{
     app.AddComponent<App>("app");
}

Do I need to register the routing in the client side startup.cs somehow?

the index.cshtml only has one line of code in it:

@page "/"

How do I change my 'startup' page from Index.cshtml to Home.cshtml?

I've looked in a lot of places and understand Blazor is 'experimental'. Feels like i'm working way to hard to change something this simple.

4 Answers 4

50

Just put @page "/" on top of your page you want to be default. Remove @page "/" from Index.razor

@page "/"
@page "/fetchdata"
1
  • 2
    This was a "oh-duh!" moment for me.
    – srHunter
    Commented Apr 14, 2023 at 3:15
16

Copy the @page directive including the route template:

@page "/"

from the Index.cshtml file to the Home.cshtml file, and then remove the Index.cshtml file, or provide a different route template to its @page directive e.g.

@page "/index"
0
11

You do not need to configure routing on your startup. Routing just works per razor page. What ever you put on @page is the routing path for that razor page e.g. Index.razor route to root path "/".

@page "/"

<h1>Index Page</h1>

@code {
    //Code here..
}

Its not a good idea having the same route for different razor pages so, if you want to use the root path on the Home.razor page, make sure you change the Index.razor to a different route.

If what you want is a redirect, let say, instead of having your site load at www.yourdomain.com, you want it to load at www.yourdomain.com/home then you can do the following on your Index.razor

@page "/"
@inject NavigationManager NavManager

<h1>Index Page</h1>

@code {
    protected override void OnInitialized()
    {
        NavManager.NavigateTo("/home");
    }
}

This assumes that you also have the following route on your Home.razor

@page "/home"

<h1>Index Page</h1>

@code {
    //Code here..
}
1
  • 1
    If you want a redirect, I suggest putting it in the Router. There is no reason to keep an index page just to reroute. You can override the OnNavigate or OnNavigateAsync and read the path from the injected NavigationContext.Path. If the path is empty you know it is the root page and can redirect to /home or wherever. Commented Aug 9, 2022 at 5:13
0

Here's what we ended up doing (for better or worse)... We found through numerous tests that the following line of code in the cshtml file was causing one of the errors:

@inject Microsoft.AspNetCore.Blazor.Services.WebAssemblyUriHelper UriHelper

After deleting this line we fixed the other error by changing: This =

// Create list of clients
List<Clients> clientList = new List<Clients>();

to This =

// Create list of clients
List<CWBlah.Shared.Models.Clients> clientList = new `List<CWBlah.Shared.Models.Clients>();`

So, it appears it's a scoping issue, though i can't clearly understand why. When i add the @using directive to the top of the page the code doesn't seem to 'listen' to that directive. I would expect that the @using CWBlah.Shared.Models would allow me to just use Clients instead of scoping the entire variable. we ended up not doing the redirect, but ended up putting all of our 'Dashboard' logic into the 'Index.cshtml'.

1
  • Do you have more than one object called 'Clients' in your application?
    – niico
    Commented Jul 13, 2023 at 12:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.