Route Attribute not working as expected on ComponentBase / Blazor

[sipi41]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

I'm creating a simple component that inherits from a ComponentBase class, and my understanding is that I can use the Route attribute in the base class instead of the @page directive, unfortunately when I do that, I don't get an error but the page is just blank

BLAZOR COMPONENT:

@inherits EmployeeListBase
<h3>Employee List</h3>

COMPONENT CLASS

using EmployeeManagement.Models;
using Microsoft.AspNetCore.Components;

namespace EmployeeManagement.Web.Pages
{
    [Route("/")]
    public class EmployeeListBase : ComponentBase
    {
        public IEnumerable<Employee> Employees { get; set; } = new List<Employee>();

    }
}

So basically, this should act as the root page of the razor web, instead, it just displays a blank page, no h3 text, nothing, just blank as follow

Expected Behavior

If I don't use the Route attribute on the base class and use the @page directive in the component, then it work as expected:

According to the docs at https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-6.0 in the Routing section it states the following:

When a Razor file with an @page directive is compiled, the generated class is given a RouteAttribute specifying the route template.

Thank you so much for all your help! If I'm doing something wrong, PLEASE let me know, thank you.:-)

Steps To Reproduce

No response

Exceptions (if any)

No exceptions, just a blank page is returned.

.NET Version

6

Anything else?

No response

[TanayParikh]

Hi @sipi41, thanks for contacting us. I believe you may be trying to create a class & associated code behind file. In that case the @inherits EmployeeListBase shouldn't be necessary.

If you rework your files like:

EmployeeListBase.razor

<h3>Employee List</h3>

and

EmployeeListBase.razor.cs

using EmployeeManagement.Models;
using Microsoft.AspNetCore.Components;

namespace EmployeeManagement.Web.Pages
{
    [Route("/")]
    public partial class EmployeeListBase : ComponentBase
    {
        public IEnumerable<Employee> Employees { get; set; } = new List<Employee>();

    }
}

Is it now working as expected? Also given Route("/") please ensure there isn't already another page (ex. Index.razor) which has the same route.

Hi @sipi41. We have added the "Needs: Author Feedback" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[sipi41]

Thank you @TanayParikh but that's not what I want, I'm not trying to do a PARTIAL class..., according to my understanding there are two ways of doing this:

1. The way you showed when adding a Partial Class
2. The other way or second way: Create another class that inherits from ComponentBase then inherit this class from the razor component using @inherits EmployeeListBase

The curious thing here is that it is supposed to work this way, and does not show an error nor the content... what's going on?

[TanayParikh]

Create another class that inherits from ComponentBase then inherit this class from the razor component using @inherits EmployeeListBase

That should be possible on its own, however I'm not sure whether the routing would work transitively in that case. I'd imagine not as that could lead to some ambiguity when multiple components use @inherits with the same base class and the same route.

From the documentation (emphasis added):

Routing in Blazor is achieved by providing a route template to each accessible component in the app with an @page directive.

In this case, I believe you're trying to have an inaccessible EmployeeListBase base class, and hence this wouldn't be an accessible component for routing purposes.

[sipi41]

Ok ok @TanayParikh I'm confused now... ok... basically the .razor pages are translated into classes, what the documentation says is that I can use @page directive on the .razor pages which is translated into RouteAttribute... please check my first post. Now, if this is a an error, where's the error? if is not an error, then something is not right...

Take for example this small article which explains this clearly: https://blazor-university.com/components/

I'm learning to do it this way from an online training course, (in another place, not the link above)... are all of them wrong?

[MariovanZeist]

Hi @sipi41.
The [Route] attribute is defined as not inheritable so if you inherit from a base class that has a route attribute set, it won't be honored on the descending class. This is because as @TanayParikh explained this would lead to ambiguity, as you can end up with multiple classes having the same route.

It's perfectly fine to inherit from a base class, but you should add the @Page (in razor) or [Route] in .cs attribute only to the top-level component. (which you could call a Page, a Blazor component to which you can route to, like the /counter example on the https://blazor-university.com/components/ website

The Blazor routing code will ignore the [Route] attribute when set on a descending class, and that is what you are experiencing. Code here