Estoy en el proceso de migrar una aplicación de formulario web antigua a Blazor WASM. La aplicación usa mucho JavaScript y me pregunto cuál es la mejor manera de trabajar con el DOM en Blazor.
Tomemos este ejemplo:
<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>Necesitamos lo siguiente para tener una tira de pestañas funcional
Puedo agregar fácilmente un controlador onclick como @onClick="TabClicked(index)", pero ¿cómo puedo configurar la clase activa y eliminar la seleccionada previamente?
Sé cómo hacerlo en JavaScript, pero ahora trabajo en Blazor y me gustaría usar la menor cantidad de js posible.
Esta no es la solución más elegante ni mucho menos, pero debería ayudarlo a comprender mejor el paradigma blazor:
<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"; } }Además, como las páginas de afeitar usan una estructura de archivos similar a las de los formularios winforms, puede intentar actualizar todo el proyecto a las páginas de afeitar, aunque obviamente no entiendo todas las complejidades del proyecto.