Aspnetcore: [Blazor] Nested Components with inner partial classes (not child components)

Created on 12 Apr 2020  路  3Comments  路  Source: dotnet/aspnetcore

The Idea

In C# we can use inner or nested classes for example:

partial class ClassWithNestedClass
{
    partial class NestedClass { }
}

partial class ClassWithNestedClass
{
    partial class NestedClass { }
}

More information about nested classes can be found here.

However it would be nice to see the same approach in Blazor for components, which can make the usage much cleaner and clearer, an example component (mind the . between Menu and Item or Menu and SubMenu)

<Menu>
   <Menu.Item Label="Text" Icon="myicon"/>
   <Menu.SubMenu>
      <Menu.Item Label="Text" Icon="myicon"/>
      <Menu.Item Label="Text" Icon="myicon"/>
   </Menu.Submenu>
</Menu>

The current workaround is to have the components fully named and there is no way (or at least that I'm aware of) to nest components like this(like nested classes), Which makes the code a bit less clear especially if you have multiple components with the SubMenu or Item name.

<Menu>
   <MenuItem Label="Text" Icon="myicon"/>
   <MenuSubMenu>
      <MenuItem Label="Text" Icon="myicon"/>
      <MenuItem Label="Text" Icon="myicon"/>
   </MenuSubmenu>
</Menu>

Describe the solution you'd like

Make it possible to create inner (nested) components just like we can do with normal nested classes.

affected-medium area-blazor enhancement severity-minor

Most helpful comment

That not only improve clearer markup, that allow too to access a private member of Menu class from Menu.Item class because a nested class can access to private members of the class that holds it.

When creating a component file named "Menu.Item.razor", the generated class is named Menu_Item. Creating nested classes with this file name will be a good enhacement.

All 3 comments

We've moved this issue to the Backlog milestone. This means that it is not going to happen for the coming release. We will reassess the backlog following the current release and consider this item at that time. However, keep in mind that there are many other high priority features with which it will be competing for resources.

This would be a nice feature to support encapsulation. Would reduce name conflicts and make code overall cleaner.

That not only improve clearer markup, that allow too to access a private member of Menu class from Menu.Item class because a nested class can access to private members of the class that holds it.

When creating a component file named "Menu.Item.razor", the generated class is named Menu_Item. Creating nested classes with this file name will be a good enhacement.

Was this page helpful?
0 / 5 - 0 ratings