时间戳

首页 > 解决方案 > Blazor Web 程序集中的 html 表中的动态行添加和删除

javascript - Blazor Web 程序集中的 html 表中的动态行添加和删除

问题描述

我正在开发一个 blazor webassembly 应用程序，我有这个功能来添加或删除 html 行。我们可以在 Blazor 中轻松完成吗？或者我们必须使用javascript？提前致谢

我正在寻找这样的输出或与我的要求类似的任何输出。任何指向此类解决方案的链接也应该有所帮助。只是示例图像：示例图片

标签： javascripthtmlblazorblazor-webassembly

解决方案

像这样的东西？ 在此处输入图像描述

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Value</th>
    <th>Command</th>
  </tr>
  @foreach(var model in models)
  {
  <tr>
    <td>@model.Name</td>
    <td>@model.Value</td>
     <td>
         <button @onclick="() => models.Remove(model)">
             X
         </button>
     </td>
  </tr>
  }

</table>
<button @onclick="@(() => models.Add(new Model(){Name = nameTextField, Value = Int32.Parse(valueTextField)}))">
    New value
</button>
<div>
Name: <input @bind="@nameTextField" @oninput="(e)=> { nameTextField = e.Value ==null? string.Empty:(string)e.Value; }" />
</div>
<div>
Value: <input type="number" @bind="@valueTextField" @oninput="(e)=> { valueTextField = e.Value ==null? string.Empty:(string)e.Value; }" />

</div>
@code {
string nameTextField = "";
string valueTextField = "";
List<Model> models = new()
    {
        new Model(){Name="Row1",Value = 1},
        new Model(){Name="Row2",Value = 2}
    };
}

模型.cs：

public class Model
    {
        public string Name {get;set;}
        public int Value {get;set;}
    }

工作演示。

推荐阅读