Blazor WASM 使用 dom 个元素而不使用 JavaScript

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>

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

点击选项卡的点击处理程序
在单击的选项卡上设置活动 class 并在上一个选项卡上将其删除的代码。

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

我知道如何在 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，尽管我显然不了解该项目的所有复杂性。

Blazor WASM 使用 dom 个元素而不使用 JavaScript

Blazor WASM working with dom elements without using JavaScript

javascript

blazor-webassembly