Not mapping correctly <InputNumber TValue="decimal"

50 Views Asked by At

I have <EditForm...> and a decimal input field. Problem is that I have 10,00 value in variable, but Blazor converts it to 10.0000 (trailing zeroes are not a problem). When I post the form over API it is saved as 100000.

I know the issue is somewhere in localization and I have implemented every suggestion by BingChat, Github Copilot, and lastly from learn.Microsoft.com

<InputNumber TValue="decimal" @bind-Value="@item.Quantity" class="form-control form-control-lg" />

I also know that my browser is set to English(UK), and that is not technically correct, as my application uses hr-HR, but I need the app working no matter the browser settings.

I am on .net 8 and using (mostly) WebAssembly.

EDIT - Info update

Problematic <InputNumber...> inside a Bootstrap modal:

<div class="col-sm-5 col-md-5 rounded-3 border-danger border fs-3 text-center" role="button" data-bs-toggle="modal" data-bs-target="#[email protected]">
    @item.Quantity.RoundToString()
</div>
<div class="clearix"></div>

//////////////////////////////
///  #ProducedQuantity-@orderItemId
//////////////////////////////
<div class="modal fade" id="[email protected]" tabindex="-1" aria-labelledby="[email protected]" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="[email protected]">
                    @Frontend.ProducedQuantity
                </h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-20 col-md-20  align-content-center text-center">
                        @item.ProductName
                        @if (!string.IsNullOrWhiteSpace(item.ConnectedName))
                        {
                            <span class="text-warning"><i class="bi bi-flower3"></i></span>
                            <span>@item.ConnectedName</span>
                        }
                    </div>
                    <div class="col-sm-20 col-md-20">
                        <br />
                    </div>
                    <div class=" col-sm-10 col-md-10">
                        <div class="input-group input-group-lg">
                            <button class="btn btn-lg btn-outline-primary" type="button" @onclick="(() => FactoryOrderItemQuantityMinus(item))"><i class="bi bi-dash-lg"></i></button>

                            <InputNumber TValue="decimal" @bind-Value="@item.Quantity" class="form-control form-control-lg" />
                            
                            <button class="btn btn-lg btn-outline-primary" type="button" @onclick="(() => FactoryOrderItemQuantityPlus(item))"><i class="bi bi-plus-lg"></i></button>

                        </div>
                    </div>
                    <div class="col-md-9 col-sm-9 align-content-center text-center">
                        <button type="button" @onclick="(() => UpdateProducedQuantity(item))" class="btn btn-outline-primary btn-lg" data-bs-dismiss="modal">
                            @Frontend.Save
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="clearfix"></div>

Function called when Saving (inside razor page):

private async Task UpdateProducedQuantity(FactoryOrderItemListVM item)
{
    await _factory.UpdateProducedQuantity(item.FactoryOrderItemId, item.Quantity);
    StateHasChanged();
}

Service implementation that makes request from webassembly to server api:

public async Task UpdateProducedQuantity(int FactoryOrderItemId, decimal Quantity)
{
    if(FactoryOrderItemId > 0)
    {
        var response = await _httpClient.PutAsync($"api/Factory/UpdateProducedQuantity/{FactoryOrderItemId}/{Quantity}", null);
        if (response.IsSuccessStatusCode)
        {
            _sys.ToastSuccess();
            return;
        }
        else
        {
            await _sys.ToastErrorAsync(response);
            return;
        }
    }
    _sys.ToastError(Errors.ParameterNotValid);
    return;
} 

The request sent to api:

https://localhost:7226/api/Factory/UpdateProducedQuantity/50/10,0000

And api controller that handles request. Here the value ends up as 100000, and should be 10,0000:

[HttpPut("UpdateProducedQuantity/{FactoryOrderItemId}/{Quantity}")]
public async Task<ActionResult> UpdateProducedQuantity(int FactoryOrderItemId, decimal Quantity)
{
    try
    {
        if (FactoryOrderItemId > 0)
        {
            await _factory.UpdateProducedQuantityAsync(FactoryOrderItemId, Quantity);
            _logger.LogDebug("UpdateProducedQuantity: {@FactoryOrderItemId} {@Quantity}", FactoryOrderItemId, Quantity);
            return Ok();
        }
        return BadRequest(Errors.ParameterNotValid);
    }
    catch (Exception ex)
    {
        _logger.LogDebug("Exception: {@ex}", ex);
        return StatusCode(500, Errors.FactoryUpdateProducedQuantity);
    }
}

How thin looks

Note that values below the modal have decimal coma (,) and in it is decimal point (.)

And this I use to display decimal values:

public static string RoundToString(this decimal Val)
{
    decimal roundedValue = Math.Round(Val, 2, MidpointRounding.AwayFromZero);

    return roundedValue.ToString("0.00");
}
0

There are 0 best solutions below