CODEWITHSUNDEEP
javascriptblazor-webassembly
Martin Andersen
Martin Andersen

Reputation: 2730

Blazor WASM working with dom elements without using JavaScript

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

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.

Upvotes: 1

Views: 1755

Answers (2)

Bigabdoul
Bigabdoul

Reputation: 991

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);
}

Upvotes: 0

sanepete
sanepete

Reputation: 1120

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.

Upvotes: 1

Related Questions