Blazor InputCheckbox binding to string backing field

Question

I am trying to make a dynamic form system and I want to be able to bind an InputCheckbox to a database field that's a string rather than a bool...

   <EditForm Model="@theEntryResults" OnValidSubmit="@SaveEntries">
        <div class="row">
            <div class="col-6">
                @foreach (var entry in theEntryResults)
                {
                    <div class="form-group m-2">
                        <label>
                            @entry.Field.FieldName:
                            @switch (entry.Field.FieldTypeID)
                            {
                                case 0:
                                    <InputText @bind-Value="@entry.Value" class="form-control"></InputText>
                                    break;
                                case 1:
                                    <InputSelect @bind-Value="@entry.Value" class="form-select">
                                        <option value=""></option>
                                        @foreach (var option in entry.Field.Choices)
                                        {
                                            <option value="@option.Value">@option.Name</option>
                                        }
                                    </InputSelect>
                                    break;
                                case 2:
                                    <InputCheckbox @bind-Value="@MyValue" class="form-check-inline" style="width: 50px; height: 50px;"></InputCheckbox>
                                    break;
                            }

                        </label>
                    </div>
                }
            </div>
        </div>
        <button class="btn btn-success" type="submit">Save</button>
    </EditForm>

is what I am trying but entry.Value is a string and so this is giving me "Cannot convert string to bool"

Any ideas?

Thanks!

Neil W · Accepted Answer · 2022-10-12 17:16:49Z

1

Bind it to a bool in your code section of the component and then translate in the getters and setters of that.

<InputCheckbox @bind-Value=@MyValue />
    
@code {

    bool MyValue
    {
        get => Convert.ToBoolean(entry.Value);
        set => entry.Value = value.ToString();
    }
}

As you are using a for each loop, my recommendation would be to use a child-component for each entry (e.g. EntryViewComponent), so that each child-component is focused on working with an individual entry. In this way, the above suggestion would still apply.

@foreach (var entry in theEntryResults)
{
    <EntryViewComponent Entry=@entry />
}

EntryViewComponent

<markup that was previously in the for-each loop>

@code {
    [Parameter] public EntryClass Entry { get; set; }

    // similar code to first suggestion above
}

If you wish to continue using mark-up inside the for each loop instead of a component, the following may work:

<InputCheckbox Value=@(Convert.ToBoolean(entry.Value))
               ValueChanged=@((v) => entry.Value = v.ToString()) />

In this code, instead of auto-binding, you are using different code for the setting of the value of the checkbox and the handling of a value change from the checkbox.

edited Oct 12, 2022 at 17:16

answered Oct 12, 2022 at 15:53

Neil W

9,4555 gold badges37 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

GeeksGoneBad Over a year ago

Thanks - unfortunately my code can't see Entry.Value since it's in a foreach loop - let me update the question with the full code section...

Neil W Over a year ago

Have added an alternative option.

GeeksGoneBad Over a year ago

Thanks - the child component is the way to go

Ibrahim Timimi · Accepted Answer · 2022-10-12 17:46:36Z

An example to bind string to an InputCheckbox would be by using a component where the string can be converted to boolean and bind to InputCheckBox and vice versa.

Component:

@* MyInputCheckBox.razor *@
<InputCheckbox @bind-Value="isCheck"
               class="form-check-inline"
               style="width: 50px; height: 50px;"/>

@code {
    [Parameter]
    public string CheckValueStr { get; set; }
    
    [Parameter]
    public EventCallback<string> CheckValueStrChanged { get; set; }
    
    private bool _isCheck;
    public bool isCheck
    {
        get { return _isCheck; }
        set { 
            _isCheck = value;
            CheckValueStrChanged.InvokeAsync(value.ToString());}
    }
    
    protected override void OnInitialized()
    {
        isCheck = bool.Parse(CheckValueStr);
    }
}

Page:

@page "/"
@using BlazorApp2.Components

<EditForm Model="sample">
    <MyInputCheckBox @bind-CheckValueStr="@sample.CheckValue" />
</EditForm>

<br/>
@sample.CheckValue

@code {
    private Sample sample = new Sample();

    public class Sample
    {
        public string CheckValue = "false";
    }
}

Output:

Collectives™ on Stack Overflow

Blazor InputCheckbox binding to string backing field

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related