使用 Blazor 設置 chekbox 值而不綁定

Question

這可能很容易，但我有點卡住了。 我正在從數據庫讀取數據，需要一個 chekbox 來反映 bool 的當前狀態，我可以在代碼中獲取狀態，但無法弄清楚如何添加或刪除復選框輸入的“已檢查”屬性。 我正在使用@onchange調用函數，但不能使用@Bind 。 我假設我可以創建一個返回值的函數： ""或"checked"並在標簽內調用它，但這不起作用。

這是我的輸入：

<input type="checkbox" class="form-control" value="test" @BoolChecker() @onchange="@function1()" />

這是函數 BoolChecker()：

public string BoolChecker()
        {
            if (mybool != null) {
                return (mybool == true) ? "checked" : "");
            }
            else
            {
                return "";
            }
        }

我可以在哪里放置 BoolChecker 函數來完成這項工作？ 如果不清楚，如果 BoolChecker 函數返回“已選中”（並且 mybool 為真），則假設使復選框顯示為選中狀態

Answer 1

這是另一個答案：

@* 注意：此代碼片段使用復選框來創建雙向數據綁定：從下面的@code 塊中定義的名為 ticked 的變量到輸入復選框。 最初我們將它的值設置為 false，這就是為什么當您運行代碼時，您會注意到復選框未被選中。 這是一種單向綁定。

要創建從控件到變量的綁定，您應該添加帶有事件處理程序的 @onchange 指令，該事件處理程序從系統獲取新值並更新 ticked 變量。

您可能已經注意到，與綁定到 value 屬性的大多數輸入元素不同，輸入復選框綁定到 *checked** 屬性

value 屬性存儲應該發布到數據庫的值@

<input type="checkbox" value="test" checked="@ticked" @onchange="@((args) => { ticked = (bool)
        args.Value; Console.WriteLine(ticked.ToString());} )" />

@code {
    bool ticked = false;
}

當然，您可以使用 @bind 指令來創建這樣的雙向數據綁定：

<input type="checkbox" value="test" @bind="@ticked" />

請注意，您不能將@onchange 指令與@bind 指令一起使用，因為@bind 指令是一個編譯器指令，它告訴編譯器像我在第一個輸入中手動所做的那樣創建綁定，當然您不允許有兩個@ onchange 屬性。

注意：你不能這樣做： @onchange="@function1()"分配給 @onchange 指令的值應該是一個 lambda 表達式，例如：

@onchange="@(() => function1)"

僅當您要將值傳遞給 function1 時才應使用括號，如下所示： @onchange="@(() => function1 (true))"

此外， @BoolChecker()必須是分配給屬性的值。 你不能這樣使用它......你可以這樣做：

@onchange="@(() => BoolChecker)"

Answer 2

以下代碼片段創建了一個帶有十個輸入復選框的表格元素。 將代碼復制到您的 Index 組件中並運行以進行測試。 然后檢查代碼並嘗試了解它應該如何在 Blazor 中完成

<table class="table table-hover">
   <thead>
    <tr>
        <th>Select</th>
        <th>Number</th>
        <th>Text</th>
    </tr>
</thead>
<tbody>
    @foreach (var row in rows)
    {

    <tr @onclick="@(() => { row.Selected = !row.Selected; 
        Console.WriteLine(row.Selected.ToString()); })">
         <td><input type="checkbox" checked="@row.Selected" 
    @onchange="@((args) => { row.Selected = (bool)
    args.Value; Console.WriteLine(row.Selected.ToString());} )" /></td>
        <td>@row.Number</td>
        <td>@row.Text</td>
    </tr>
    }
 </tbody>
 </table>

 @code
 {
    List<Row> rows = Enumerable.Range(1, 10).Select(i => new Row
     {
    Selected =
         false,
    Number = i,
    Text = $"Item {i}"
    }).ToList();

   private class Row
 {
    public bool Selected { get; set; }
    public int Number { get; set; }
    public string Text { get; set; }

}
}

Answer 3

綁定有什么問題？ 如果你需要，你可以掛鈎到二傳手