0

I have a top-row div a follows:

   <div class="top-row px-3">
      <b>App:<i>Title</i></b>

      <!-- wait for it ... -->
      <div class="menu">
         Menu Bar Here
      </div>

   </div>

I am going to have several MenuBar components that will swap out in the div class menu with a button click. How do I target that div with a Blazor component?

Update
I think I found a solution by Chris Sainty.

Edit
To clarify what I intend to accomplish:

I have 2 components:

  • <MenuBar1 />
  • <MenuBar2 />

Both contain different html to construct a simple menu bar. I have navigational links that, when clicked, will raise the onClick event.

How, when the link is clicked, can I swap out the MenuBar components?

IAbstract
  • 18,848
  • 14
  • 81
  • 137

1 Answers1

3

Blazor doesn't use Javascript strategy. To do that you have to mix HTML with code.

<div class="top-row px-3">
    <b>App:<i>Title</i></b>
    <!-- wait for it ... -->
    <div class="menu">
        @if (Version == "v1")
        {
            <p>version 1</p>
        }
        else if (Version == "v2")
        {
            <p>version 2</p>
        }
    </div>
</div>

For dynamic menu add a file in shared folder. The file name = the class name For example MenuButton.razor

@inject NavigationManager navManager
<button @onclick="(e)=>navManager.NavigateTo(route)">@(label)</button>

@code {
    [Parameter]
    public string label { get; set; }
    [Parameter]
    public string route { get; set; }
}

To consume this componant

<div class="top-row px-3">
    <b>App:<i>Title</i></b>
    <!-- wait for it ... -->
    <div class="menu">
        <MenuButton label="Choice 1" route="/route1" />
        <MenuButton label="Choice 2" route="/route2" />
    </div>
</div>
Remi THOMAS
  • 381
  • 1
  • 8
  • I edited the cause of the change. This is a useful answer for a static solution ... don't erase it. Can you add how to do this with a button click? – IAbstract Aug 28 '20 at 10:15
  • I'm interested in seeing what solution you come up with possibly with the link I reference in my question. – IAbstract Aug 28 '20 at 11:32
  • I used a combination of your answer and what Chris Sainty does on his. I will show my work shortly. In all fairness, I was still not clear on what my intentions were. I will again edit the question to fully clarify what I intended to accomplish. – IAbstract Aug 29 '20 at 10:16