Blazor WASM working with dom elements without using JavaScript

Question

I am in the process of porting an old web form app to Blazor WASM. The app is using a lot of JavaScript and I wonder how to best work with the DOM in Blazor.

Let's take this example:

 <ul id="cii-tabmenu" class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" data-tabIndex="0" href="#">Mål og investeringspolitik</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-tabIndex="1" href="#">Risk-reward-profil</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-tabIndex="2" href="#">Gebyrer</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-tabIndex="3" href="#">Tidligere resultater</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-tabIndex="4" href="#">Praktiske oplysninger</a>
    </li>
</ul>

We need the following to have a functional tab strip

• A click handler that gets the tab clicked
• Code that sets the Active class on the clicked tab and removed it on the previous tab.

I can easily add an onclick handler like @onClick="TabClicked(index)" but how can I set the active class and remove the one previously selected?

I know how to do it in JavaScript but now I work in Blazor and would like to use as little js as possible.

Answer 1

This is not the most elegant solution by a long shot but it should help you understand the blazor paradigm better:

<ul id="cii-tabmenu" class="nav nav-tabs">
 <li class="nav-item">
  <a class="@(myawesometab[0])" data-tabIndex="0" href="#" @onclick="@(e => myawesometabclick(e, 0))">Mål og investeringspolitik</a>
 </li>
 <li class="nav-item">
  <a class="@(myawesometab[1])" data-tabIndex="1" href="#" @onclick="@(e => myawesometabclick(e, 1))">Risk-reward-profil</a>
 </li>
 <li class="nav-item">
  <a class="@(myawesometab[2])" data-tabIndex="2" href="#" @onclick="@(e => myawesometabclick(e, 2))">Gebyrer</a>
 </li>
 <li class="nav-item">
  <a class="@(myawesometab[3])" data-tabIndex="3" href="#" @onclick="@(e => myawesometabclick(e, 3))">Tidligere resultater</a>
 </li>
 <li class="nav-item">
  <a class="@(myawesometab[4])" data-tabIndex="4" href="#" @onclick="@(e => myawesometabclick(e, 4))">Praktiske oplysninger</a>
 </li>
</ul>

@code
{
 private string[] myawesometab = new string[5] { "nav-link active", "nav-link", "nav-link", "nav-link", "nav-link" };

 private void myawesometabclick(MouseEventArgs e, int myawesometabnumber)
 {
  for (int i = 0; i < 5; i++)
  {
   myawesometab[i] = "nav-link";
  }
  myawesometab[myawesometabnumber] = "nav-link active";
 }
}

Also, as razor pages use a similar file structure to winforms, you might try to update the entire project to razor pages, although I obviously don't understand all the complexities of the project.