Migrating Grid Layout CSS to FluentLayout and HTML id ?

[Pascall60]

Hi,

I am a poor French developer, a T-Rex of programming.
I started working with and for Microsoft, in the heroic era of MFC ;)
At Business Objects I was fixing bugs in MFC. We didn't have internet or GitHub in 1991 ;(
Since then I have evolved, from .Net 1.0 to .net 9.x ...

Today I just spent 3 days trying to modify my Blazor project structured on a Grid Layout with CSS.
To integrate Fluent UI! I didn't want to reinvent the wheel. So I took the MainLayout of the template.
The architecture looks like what I had: A Header, A Footer, a NavBar and a SideBar on the left.
And the client area in the middle is the content.

My first challenge was to put ids on the divs concerned with the tiny id! I need these famous HTML ids.
I tried silly things like adding id='myID' in some components, but they never arrive in the HTML rendering?
I cracked and added my own components by deriving the originals. But this has an impact that I do not yet master!
And modifies, I do not know for what reason, the graphic rendering of some components.

Here is what I want to be able to do in the MainLayout.razor :

<UxHeader id="uxDivHeader" class="uxCustomHeader"> ...</UxHeader>
<UxFooter id="uxDivFooter" class="uxCustomFooter"> ...</UxFooter>
<UxNavMenu id="uxDivNavMenu" class="uxCustomNavMenu"> ...</UxNavMenu>
With the following classes :
public partial class UxHeader : FluentHeader {}
public partial class UxFooter : FluentFooter {}
public partial class UxNavMenu {} : depends on UxNavMenu.razor for testing …

I will dynamically fill / modify the content of each component.
This depends on the navigation and the User context / Business rules.

In my old project.
I retrieved each component via its div id (unique) and modified the content. With C# IJSRuntime and JavaScript.

Am I on the right track or should I review my copy?

Last question: why are HTML ids lost in some components id='myId' ?

Sorry for my 'Franglais' it's 70% translated by Google Translate ;)

Regards,
Pascal

[Pascall60]

Migrating Grid Layout CSS to

Sorry I left the html tags ;)

Here is what I want to be able to do in the MainLayout.razor:

UxHeader id="uxDivHeader" class="uxCustomHeader"
UxFooter id="uxDivFooter" class="uxCustomFooter"
UxNavMenu id="uxDivNavMenu" class="uxCustomNavMenu"

Pascal

[vnbaaij]

Bonjour Pascal,

I'm converting this to a discussion as it is more a general question than an issue with the library or the components.