Blazor WASM 在不使用 JavaScript 的情况下处理 dom 元素

Question

我正在将旧的 Web 表单应用程序移植到 Blazor WASM。 该应用程序使用了大量 JavaScript，我想知道如何最好地使用 Blazor 中的 DOM。

我们来看这个例子：

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

我们需要以下内容才能拥有功能性标签条

• 让标签被点击的点击处理程序
• 在单击的选项卡上设置 Active 类并在前一个选项卡上将其删除的代码。

我可以轻松添加类似@onClick="TabClicked(index)" 的onclick 处理程序，但是如何设置活动类并删除之前选择的类？

我知道如何在 JavaScript 中做到这一点，但现在我在 Blazor 工作，并希望尽可能少地使用 js。

Answer 1

从长远来看，这不是最优雅的解决方案，但它应该可以帮助您更好地理解 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";
 }
}

此外，由于 razor pages 使用与 winforms 类似的文件结构，您可能会尝试将整个项目更新为 razor pages，尽管我显然不了解项目的所有复杂性。