InputSelect does not support the type 'System.Int32' or 'System.Decimal' or 'System.Boolean' in Blazor

In this article we will cover how to resolve Error "InputSelect does not support the type 'System.Int32' or 'System.Decimal' or 'System.Boolean'" with two way data binding in Blazor webassembly Application.

We will create Custom Select Input by overriding actual InputSelect implementaion

CustomSelect.cs

Create a class named "CustomSelect.cs" inside Models Folder and add below mentioned code.

using Microsoft.AspNetCore.Components.Forms;
 
namespace HpBlogs.Models
{
    public class CustomSelect<TValue> : InputSelect<TValue>
    {
        protected override bool TryParseValueFromString(string value, out TValue result,
            out string validationErrorMessage)
        {
            if (typeof(TValue) == typeof(int))
            {
                if (int.TryParse(value, out var resultInt))
                {
                    result = (TValue)(object)resultInt;
                    validationErrorMessage = null;
                    return true;
                }
                else
                {
                    result = default;
                    validationErrorMessage =
                         $"Please Select";
                    return false;
                }
            }
            else if (typeof(TValue) == typeof(bool))
            {
                if (bool.TryParse(value, out var resultInt))
                {
                    result = (TValue)(object)resultInt;
                    validationErrorMessage = null;
                    return true;
                }
                else
                {
                    result = default;
                    validationErrorMessage =
                        $"Please Select";
                    return false;
                }
            }
            else if (typeof(TValue) == typeof(decimal))
            {
                if (decimal.TryParse(value, out var resultInt))
                {
                    result = (TValue)(object)resultInt;
                    validationErrorMessage = null;
                    return true;
                }
                else
                {
                    result = default;
                    validationErrorMessage =
                        $"Please Select";
                    return false;
                }
            }
            //else if() // ADD ANY OTHER DATATYPE
            else
            {
                return base.TryParseValueFromString(value, out result,
                    out validationErrorMessage);
            }
        }
    }
}

Demo.razor.cs

Create a class named "Demo.razor.cs" and add below mentioned code.

using Microsoft.AspNetCore.Components;
using System;
using System.Threading.Tasks;
 
namespace HpBlogs.Pages
{
    public partial class Demo : ComponentBase
    {
        public DemoModel model { get; set; } = new DemoModel();
 
        protected async override Task OnInitializedAsync()
        {
            //CODE
        }
    }
    public class DemoModel
    {
        public int Age { get; set; }
        public bool HasEmail { get; set; }
        public Decimal Amount { get; set; }
    }
}

Demo.razor

Create a page named "Demo.razor" and add below mentioned html

@page "/demo"
@using HpBlogs.Models
 
<section class="dashboard-area">
    <div class="dashboard-content-wrap">
        <div class="container-fluid">
            <div class="row">
                <EditForm Model="model">
 
                    <label>Age (Int)</label>
                    <CustomSelect @bind-Value="model.Age">
                        <option value="0">Select Age</option>
                        @for (int i = 18; i <= 60; i++)
                        {
                            <option value="@i">@i</option>
                        }
                    </CustomSelect>
                    <br />
 
                    <label>Amount (Decimal)</label>
                    <CustomSelect @bind-Value="model.Amount">
                        <option value="0">Select Amount</option>
                        <option value="5000.50">5000.50</option>
                        <option value="10000.20">10000.20</option>
                        <option value="15000.00">15000.00</option>
                        <option value="20000.20">20000.20</option>
                    </CustomSelect>
                    <br />
 
                    <label>Do you have an Email (Boolean)</label>
                    <CustomSelect @bind-Value="model.HasEmail">
                        <option value="True">Yes</option>
                        <option value="False">No</option>
                    </CustomSelect>
 
                </EditForm>
            </div>
        </div>
    </div>
</section>