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);
}
}
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");
}
