Blazor server-side InputSelect for byte data-type, onChange event error

Question

I am using ASP.NET Core 3.1, Blazor server-side. I follow document at https://learn.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-3.1

@page "/add_fileset"
@inject Foo.Data.ApplicationDbContext Db

<div>
    <a href="/fileset">Danh sách</a>
</div>

<div>
    <EditForm Model="@model" OnValidSubmit="@HandleValidSubmit">
        <DataAnnotationsValidator />
        <ValidationSummary />
        <div class="form-group row">
            <label for="FileName" class="col-sm-2 col-form-label">Tên File: </label>
            <div class="col-sm-10">
                <input type="text" id="FileName" @bind-value="model.FileName" class="form-control" />
            </div>
        </div>
        <div class="form-group row">
            <label for="PriorityLevel" class="col-sm-2 col-form-label">Mức ưu tiên: </label>
            <div class="col-sm-10">
                @*<input type="number" id="PriorityLevel" @bind-value="model.PriorityLevel" class="form-control" />*@
                <InputSelect id="PriorityLevel" @bind-Value="model.PriorityLevel" class="form-control">
                    <option>Chọn...</option>
                    <option value=1>Rất quan trọng</option>
                    <option value=2>Quan trọng</option>
                    <option value=3>Bình thường</option>
                    <option value=4>Ít quan trọng</option>
                </InputSelect>
            </div>
        </div>

        <div class="form-group row">
            <label for="StatusCode" class="col-sm-2 col-form-label">Mã trạng thái: </label>
            <div class="col-sm-10">
                <input type="number" id="StatusCode" @bind-value="model.StatusCode" class="form-control" />
            </div>
        </div>

        @*<div class="form-group row">
            <label for="StatusCode2" class="col-sm-2 col-form-label">Loại hồ sơ: </label>
            <div class="col-sm-10">
                <input type="number" id="StatusCode2" class="form-control" />
            </div>
        </div>*@

        <button type="submit" class="btn btn-primary">Lưu</button>
    </EditForm>
</div>


@code {
    public class AddFiletSetPageModel
    {
        public string FileName { get; set; }
        public decimal? CreatorId { get; set; }
        public DateTime? Created { get; set; }
        public decimal? ModifierId { get; set; }
        public DateTime? Modified { get; set; }
        public byte? PriorityLevel { get; set; }
        public byte? StatusCode { get; set; }
    }

    private AddFiletSetPageModel model = new AddFiletSetPageModel();

    private void HandleValidSubmit()
    {
        FileSet fileItem = new FileSet
        {
            FileName = model.FileName,
            CreatorId = model.CreatorId,
            Created = DateTime.Now,
            PriorityLevel = model.PriorityLevel,
            StatusCode = model.StatusCode
        };
        Db.FileSet.Add(fileItem);
        Db.SaveChanges();
    }
}

Focus at these lines of code

<InputSelect id="PriorityLevel" @bind-Value="model.PriorityLevel" class="form-control">
    <option>Chọn...</option>
    <option value=1>Rất quan trọng</option>
    <option value=2>Quan trọng</option>
    <option value=3>Bình thường</option>
    <option value=4>Ít quan trọng</option>
</InputSelect>

When click drop-down list, Error at console

[2019-12-27T08:58:22.819Z] Error: System.InvalidOperationException: Microsoft.AspNetCore.Components.Forms.InputSelect`1[System.Nullable`1[System.Byte]] does not support the type 'System.Nullable`1[System.Byte]'.

   at Microsoft.AspNetCore.Components.Forms.InputSelect`1.TryParseValueFromString(String value, TValue& result, String& validationErrorMessage)

   at Microsoft.AspNetCore.Components.Forms.InputBase`1.set_CurrentValueAsString(String value)

   at Microsoft.AspNetCore.Components.Forms.InputSelect`1.<BuildRenderTree>b__4_0(String __value)

   at Microsoft.AspNetCore.Components.EventCallbackFactoryBinderExtensions.<>c__DisplayClass22_0`1.<CreateBinderCore>b__0(ChangeEventArgs e)

--- End of stack trace from previous location where exception was thrown ---

   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)

   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle) blazor.server.js:15:27309
    log https://localhost:44348/_framework/blazor.server.js:15
    C https://localhost:44348/_framework/blazor.server.js:8
    S https://localhost:44348/_framework/blazor.server.js:8
    invokeClientMethod https://localhost:44348/_framework/blazor.server.js:1
    invokeClientMethod https://localhost:44348/_framework/blazor.server.js:1
    processIncomingData https://localhost:44348/_framework/blazor.server.js:1
    onreceive https://localhost:44348/_framework/blazor.server.js:1
    onmessage https://localhost:44348/_framework/blazor.server.js:1
    (Async: EventHandlerNonNull)
    connect https://localhost:44348/_framework/blazor.server.js:1
    connect https://localhost:44348/_framework/blazor.server.js:1
    s https://localhost:44348/_framework/blazor.server.js:1
    s https://localhost:44348/_framework/blazor.server.js:1
    L https://localhost:44348/_framework/blazor.server.js:1
    L https://localhost:44348/_framework/blazor.server.js:1
    connect https://localhost:44348/_framework/blazor.server.js:1
    startTransport https://localhost:44348/_framework/blazor.server.js:1
    createTransport https://localhost:44348/_framework/blazor.server.js:1
    s https://localhost:44348/_framework/blazor.server.js:1
    s https://localhost:44348/_framework/blazor.server.js:1
    B https://localhost:44348/_framework/blazor.server.js:1
    B https://localhost:44348/_framework/blazor.server.js:1
    createTransport https://localhost:44348/_framework/blazor.server.js:1
    startInternal https://localhost:44348/_framework/blazor.server.js:1
    s https://localhost:44348/_framework/blazor.server.js:1
    s https://localhost:44348/_framework/blazor.server.js:1
    a https://localhost:44348/_framework/blazor.server.js:1
    (Async: promise callback)
    c https://localhost:44348/_framework/blazor.server.js:1
    B https://localhost:44348/_framework/blazor.server.js:1
    B https://localhost:44348/_framework/blazor.server.js:1
    startInternal https://localhost:44348/_framework/blazor.server.js:1
    start https://localhost:44348/_framework/blazor.server.js:1
    s https://localhost:44348/_framework/blazor.server.js:1
    s https://localhost:44348/_framework/blazor.server.js:1
    B https://localhost:44348/_framework/blazor.server.js:1
    B https://localhost:44348/_framework/blazor.server.js:1
    start https://localhost:44348/_framework/blazor.server.js:1
    startInternal https://localhost:44348/_framework/blazor.server.js:1
    s https://localhost:44348/_framework/blazor.server.js:1
    s https://localhost:44348/_framework/blazor.server.js:1
    v https://localhost:44348/_framework/blazor.server.js:1
    v https://localhost:44348/_framework/blazor.server.js:1
    startInternal https://localhost:44348/_framework/blazor.server.js:1
    startWithStateTransitions https://localhost:44348/_framework/blazor.server.js:1
    s https://localhost:44348/_framework/blazor.server.js:1
    s https://localhost:44348/_framework/blazor.server.js:1
    v https://localhost:44348/_framework/blazor.server.js:1
    v https://localhost:44348/_framework/blazor.server.js:1
    startWithStateTransitions https://localhost:44348/_framework/blazor.server.js:1
    start https://localhost:44348/_framework/blazor.server.js:1
    S https://localhost:44348/_framework/blazor.server.js:8
    s https://localhost:44348/_framework/blazor.server.js:8
    s https://localhost:44348/_framework/blazor.server.js:8
    r https://localhost:44348/_framework/blazor.server.js:8
    r https://localhost:44348/_framework/blazor.server.js:8
    S https://localhost:44348/_framework/blazor.server.js:8
    E https://localhost:44348/_framework/blazor.server.js:8
    s https://localhost:44348/_framework/blazor.server.js:8
    s https://localhost:44348/_framework/blazor.server.js:8
    r https://localhost:44348/_framework/blazor.server.js:8
    r https://localhost:44348/_framework/blazor.server.js:8
    E https://localhost:44348/_framework/blazor.server.js:8
    <anonymous> https://localhost:44348/_framework/blazor.server.js:8
    n https://localhost:44348/_framework/blazor.server.js:1
    <anonymous> https://localhost:44348/_framework/blazor.server.js:1
    <anonymous> https://localhost:44348/_framework/blazor.server.js:1

How to fix it?

Answer 1

When user selects an option like "<option ...value=1 ...>", the value of InputSelect is a string "1" instead of int 1. That's why it throws.

A quick fix is to change the type of PriorityLevel to string