Blazor WASM - 仅使选定的行可编辑

Question

我正在尝试遍历字典中的一些数据并将它们显示在 Blazor WASM 的表格中。我在每个数据行上放置了一个编辑按钮，如果我愿意，可以使所选行可编辑，但是当我单击该按钮时，由于循环，它使整个表中的每一行都可编辑。 我应该在我的代码中更改什么，以仅使选定的行可编辑？感谢您提供可能的答案；）

@if (Metadata != null)
{
   @foreach (var c in Metadata)
   {
       <tr>
           <td><button type="submit" @onclick="toggleEdit">Edit</button></td>
           @if (IsEditable)
           {
               <td><input type="text" class="form-control" placeholder="Key"></td>
               <td><input type="text" class="form-control" placeholder="Value"></td>
           }
           else
           {
               <td>@c.Key</td>
               <td>@c.Value</td>
           }                                            
      </tr>
    }
}

@code
{
   public Dictionary<string, string> Metadata { get; set; }
   public bool IsEditable = false;

   private void toggleEdit()
   {
       IsEditable = true;
   }
}

Answer 1

使 toggleEdit 方法接受一个参数：

<td><button type="submit" @onclick="@(()=> toggleEdit(c))">Edit</button></td>

和你的方法（我们不知道你的问题中的 c 是什么）：

private void toggleEdit(YourType c)
{
   c.IsEditable = true;
}

您需要将布尔值绑定到您的对象，否则代码无法知道哪一行是可编辑的。 IE。您的：

public bool IsEditable = false;

必须是你的对象的财产。

另一种方法是直接访问对象的属性：

<td><button type="submit" @onclick="@(c.IsEditable = !c.IsEditable)">Edit</button></td>

Answer 2

在您的代码中，任何按钮都将应用于所有行，您需要让项目知道您想要更改哪一行。

请按照这个演示：

@{ 
    int i = 0;
}


@if (MyProperty != null)
{
    @foreach (var c in MyProperty)
    {
        var index = i;
        <tr id="@i">
            <td id="@i"><button type="submit"  @onclick="()=>toggleEdit(index)">Edit</button></td>
            @if (IsEditable[i])
            {
                <td><input type="text" class="form-control" placeholder="Key"></td>
                <td><input type="text" class="form-control" placeholder="Value"></td>
            }
            else
            {
                <td>@c.Key</td>
                <td>@c.Value</td>
            }
        </tr>
        i++;
    }

    
}



@code{

//For testing, I just hard code here

    Dictionary<string, string> MyProperty = new Dictionary<string, string>()
    {
         {"A","AAAAA" },
         {"B","BBBBB" },
         {"C","CCCCC" },
         {"D","DDDDD" },

     };

    public bool[] IsEditable;

    protected override async Task OnInitializedAsync()
    {
        var count = MyProperty.Keys.Count;

        IsEditable = new bool[count];
    }


    private void toggleEdit (int index)
    {
        IsEditable[index] = true;
    }

}

Answer 3

您可以使用长度与Metadatadictionary相同的booleanarray来允许单独编辑每一行。该数组将跟踪每个字典值的编辑状态，允许您在每行的可编辑和不可编辑状态之间切换。

重要的是要注意，对于字典，您只能更改值，而不能更改键。 Keys 没有 setters，因此您可以删除密钥或添加新密钥。

演示：https://blazorfiddle.com/s/wys4fe48

执行：

@page "/"
<style>
    th, td {
        vertical-align: middle;
    }
</style>
<h3>@metadatas["Title"]</h3>
<br/>

@if (metadatas != null)
{
    <table class="table table-bordered" style="background-color: @metadatas["Background-color"];">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col" style="width: 150px;">Action</th>
            <th scope="col" style="width: 150px;">Key</th>
            <th scope="col">Value</th>
        </tr>
        </thead>
        <tbody>
        @foreach (var metadata in metadatas)
        {
            var keys = metadatas.Keys.ToList();
            var index = keys.IndexOf(metadata.Key);
            <tr>
                <th scope="row">@(index + 1)</th>
                <td style="text-align: center;">
                    <button type="button" 
                            class="btn @(Edits[index] ? "btn-secondary" : "btn-primary")"
                            @onclick="@(() => { Edits[index] = !Edits[index]; })">
                        @(Edits[index] ? "Disable Edit" : "Enable Value")
                    </button>
                </td>
                <td>@metadata.Key</td>
                @if (Edits[index])
                {
                    <td><input @bind-value="metadatas[metadata.Key]" 
                               type="text" 
                               class="form-control" 
                               style="background-color: antiquewhite;"/></td>
                }
                else
                {
                    <td>@metadata.Value</td>
                }
            </tr>
        }
        </tbody>
    </table>
}

@code
{
    private Dictionary<string, string> metadatas { get; set; }
    private bool[] Edits;
    
    protected override void OnInitialized()
    {
        metadatas = new Dictionary<string, string>();
        metadatas.Add("Title", "Make only the selected row editable");
        metadatas.Add("Background-color", "white");
        
        // for storing edit status of each dictionary value
        // this array has to be same length as the dictionary
        Edits = new bool[metadatas.Count()];
        base.OnInitialized();
    }
}

输出：