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.

sanepete · Accepted Answer · 2021-11-09 12:43:28Z

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.

edited Nov 9, 2021 at 12:43

answered Nov 9, 2021 at 12:34

sanepete

1,20212 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Martin Andersen Over a year ago

Thanks this absolutely works. I would prefer some cleaner code with less methods and binding. But again it's get the job done

sanepete Over a year ago

@MartinAndersen , as I said, it's not the most elegant solution. Maybe you could come back later and refactor it. It was more to show, changing the HTML and CSS is really just changing a lot of strings.

Bigabdoul · Accepted Answer · 2023-08-08 19:05:27Z

Here's a more concise approach to address the issue:

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

@code
{
    private int currentIndex;
    private string LinkCssClass(int index) => "nav-link" + (currentIndex == index ? " active" : string.Empty);
}

Collectives™ on Stack Overflow

Blazor WASM working with dom elements without using JavaScript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related