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.
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.