web-dev-qa-db-ja.com

.NET Core Blazor：チェックされている場合、チェックボックスの値を取得するにはどうすればよいですか？

Blazorフレームワークを使用してチェックされている場合、チェックボックスの値を取得しようとしていますが、これまでのところ、そのためのメソッドを見つけることができませんでした。チェックボックスにバインディングを配置すると、常にチェックされます。チェックされた値を取得する方法を理解できませんでした。

これは私のコードです：

<input type="checkbox" id="addition" name="math" value="add" bind="@name" />
<label for="addition">Addition</label>
c#html.net-coreblazor
10
jorjj
@page "/registration"

    @foreach (var club in ClubList())
    {
        <input type="checkbox" @onchange="eventArgs => { CheckboxClicked(club, eventArgs.Value); }" />@club<br />
    }

@functions {

    public List<string> ClubMember { get; set; } = new List<string>();
    void CheckboxClicked(string clubID, object checkedValue)
    {
        if ((bool)checkedValue)
        {
            if (!ClubMember.Contains(clubID))
            {
                ClubMember.Add(clubID);
            }
        }
        else
        {
            if (ClubMember.Contains(clubID))
            {
                ClubMember.Remove(clubID);
            }
        }
    }

    public List<String> ClubList()
    {
        // fetch from API or...
        List<String> c = new List<String>();
        c.Add("Clube01");
        c.Add("Clube02");
        return c;
    }

}
13
Manuel Alves

value="add"の部分を削除する必要があります。

nameがブール値であることを確認してください。

編集：完全な例

@page "/test2"

<input type="checkbox" bind="@boolvalue" /><br/>
Boolvalue: @boolvalue<br/>
<button onclick="@toggle">toggle</button>

@functions
{

   public bool boolvalue { get; set; }

   void toggle()
   {
       boolvalue = !boolvalue;
   }
}
4
Flores

チェックボックスの値をブール値にバインドします。

@コードでは、bool checkedValue = false; //または、ユースケースに適している場合はtrue

あなたのHTMLで：

<input type="checkbox" checked @bind="checkedValue">

CheckedValueの値は、チェックボックスと同じ値になります。

3
Data Juggler

Value属性を削除します。

<input type="checkbox" id="addition" name="math" bind="@name" />

このプロパティを@functionブロックまたはBlazorCoponentから派生したクラスに追加します。

public bool name {get;set;}

これで、チェックボックスの値がnameプロパティにバインドされ、他のプロパティにアクセスするのと同じように、チェックボックスの値を含むこのプロパティにアクセスして、チェックボックスの値を取得できます。

お役に立てれば...

2
enet

他の答えが私が探していたものを実行するとは思わない：

  1. チェックボックスの初期値を、trueまたはfalseの変数に設定します。
  2. チェックボックスのonchangeイベントに応答して、変更をサーバーに送信するか、チェックボックスをオンまたはオフにするときに他の作業を行います。

私のソリューションはこれらの両方を実行しますが、チェックされたバージョンとチェックされていないバージョンに対してタグを繰り返す必要があります。

かみそりファイルは次のようになります：

 @if (Approved)
 {
    <input type="checkbox" checked @onchange="@(async (e) => 
              await ToggleApprovedAsync(false))" />
 }
 else
 {
     <input type="checkbox"  @onchange="@(async (e) => 
              await ToggleApprovedAsync(true))" />
 }


@code {

    bool Approved;

    override async Task OnInitializedAsync()
    {
        Approved = await HttpClient.GetJsonAsync<bool>("../api/IsApproved");
    }

    async Task ToggleApprovedAsync(bool approved)
    {
        Console.WriteLine("Toggle Approved " + approved );
        if (approved)
        {
            await HttpClient.PostJsonAsync<bool>($"../api/Approve", null);
            Approved = true;
        }
        else
        {
            await HttpClient.PostJsonAsync<bool>($"../api/Disapprove", null);
            Approved = false;
        }
    }

}
1
Mike Wodarczyk