CODEWITHSUNDEEP
blazor
ericschambach
ericschambach

Reputation: 83

Blazor InputSelect Boolean issue

I have been having a weird problem with a InputSelect for boolean that I have made, using as a template the InputSelectNumber class that I am sure you have seen being shared around (see below):

public class InputSelectNumber<T> : InputSelect<T>
{
    protected override bool TryParseValueFromString(string value, out T result,
        out string validationErrorMessage)
    {
        if (typeof(T) == typeof(int))
        {
            if (int.TryParse(value, out var resultInt))
            {
                result = (T)(object)resultInt;
                validationErrorMessage = null;
                return true;
            }
            else
            {
                result = default;
                validationErrorMessage = "The chosen value is not a valid number.";
                return false;
            }
        }
        else
        {
            return base.TryParseValueFromString(value, out result, out validationErrorMessage);
        }
    }
}

And below, with a couple of tweaks, made it work with booleans (it does work without issues):

public class InputSelectBoolean<T> : InputSelect<T>
{
    protected override bool TryParseValueFromString(string value, out T result,
        out string validationErrorMessage)
    {
        if (typeof(T) == typeof(bool))
        {
            if(bool.TryParse(value, out var resultBool))
            {
                result = (T)(object)resultBool;
                validationErrorMessage = null;
                return true;
            }
            else
            {
                result = default;
                validationErrorMessage = "The chosen value is not a valid boolean.";
                return false;
            }
        }
        else
        {
            return base.TryParseValueFromString(value, out result, out validationErrorMessage);
        }
    }
}

Then on the razor page, the implementation is:

<EditForm Model="@isMyConverted">
    <InputSelectBoolean @bind-Value="@isMyConverted">
        <option value="true" selected>USD</option>
        <option value="false">XOM</option>
    </InputSelectBoolean>
</EditForm>
 
@code {
    public bool @isMyConverted = false;
}

It actually works perfectly, and it makes the changes it is supposed to. However, on the selector pane, it is always empty by default, so not showing either USD or XOM. I have to select a value twice for it to stay showing on the pane. Otherwise, it stays empty (even if the changes to the actual variable occurs perfectly).

If I change the whole thing to an Int input, like this:

<EditForm Model="@isMyConverted">
    <InputSelectNumber @bind-Value="@isMyConverted">
        <option value="1" selected>USD</option>
        <option value="2">XOM</option>
    </InputSelectNumber>
</EditForm>

@code {
public int isMyConverted = 1;
}

Everything works great and the selected value is there in the selector pane as expected. Any help would be appreciated.

Upvotes: 2

Views: 3251

Answers (2)

Christian Maa&#223;
Christian Maa&#223;

Reputation: 31

If you just want to use your InputSelectBoolean to Parse boolean Parameter (like the name mentioned), I have optimized your code a little bit:

public class InputSelectBoolean : InputSelect<bool>
{
    protected override bool TryParseValueFromString(string? value, out bool result,
        out string validationErrorMessage)
    {
        if (bool.TryParse(value, out var resultBool))
        {
            result = resultBool;
            validationErrorMessage = string.Empty;
            return true;
        }

        result = default!;
        validationErrorMessage = "The chosen value is not a valid boolean.";
        return false;
    }
}

Upvotes: 1

troYman
troYman

Reputation: 1818

There is a string mismatch between true and True.

There are two ways to solve the problem:

1. Change the option values (starting with capital letters)

  <InputSelectBoolean @bind-Value="isMyConverted">

    <option value="True">true</option>

    <option value="False">false</option>

</InputSelectBoolean>

2. Override and adjust the FormatValueAsString method of the InputSelect component.

   protected override string FormatValueAsString(bool value)

    {

        return value.ToString().ToLower();

    }

Upvotes: 1

Related Questions