GOOGLE ADS

sábado, 30 de abril de 2022

¿Por qué Blazor InputSelect se comporta de manera diferente para los valores de cadena e int?

Digamos que tenemos una clase realmente simple con 2 propiedades, una es un entero y la otra es una cadena. Quiero usar EditForm con 2 elementos InputSelect que se unen a estas propiedades. El código se ve así:

@page "/test"
@using Microsoft.AspNetCore.Components
@using Newtonsoft.Json
<PageTitle>Test</PageTitle>
<h3>Test form</h3>
<EditForm Model="@_dummy" OnValidSubmit="@TestAsync">
<DataAnnotationsValidator/>
<ValidationSummary/>
<div class="mb-3">
<label for="string" class="form-label">String</label>
<InputSelect id="string" @bind-Value="_dummy.StringProp" class="form-select">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</InputSelect>
</div>
<div class="mb-3">
<label for="int" class="form-label">Integer</label>
<InputSelect id="int" @bind-Value="_dummy.IntProp" class="form-select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</InputSelect>
</div>
<button type="submit" class="btn btn-primary">Start</button>
</EditForm>
@code {
readonly Dummy _dummy = new();
private void TestAsync()
{
Console.WriteLine("Object state: " + JsonConvert.SerializeObject(_dummy));
}
class Dummy
{
public string? StringProp { get; set; }
public int IntProp { get; set; }
}
}

Así es como se ve en un navegador web:

ingrese la descripción de la imagen aquí

¿Por qué se selecciona el valor de cadena y no el valor entero?

Cuando envío este formulario sin interactuar con el elemento Seleccionar, obtendré un valor nulo para StringProp. Eso no es intuitivo para los usuarios ya que esta opción se muestra como ya seleccionada. Si interactúo con él, el valor será correcto.

También traté de usar el atributo seleccionado en el elemento de opción de entero y no tiene ningún efecto. No puedo hacer que ningún valor sea preseleccionado.

¿Estoy haciendo algo mal o es un error? estoy usando.NET 6.0


Solución del problema

El valor de cadena predeterminado se establece en null. Entonces Select muestra el primer valor. Tenga en cuenta que solo lo muestra en la interfaz de usuario, no lo establece en el objeto modelo ya que no se ha producido ningún evento de cambio.

El intvalor predeterminado es 0, que es un número real pero no está en la lista de opciones, por lo que no se selecciona nada porque el valor real no está en la lista.

Puedes hacer que el comportamiento sea el mismo con esto:

 class Dummy
{
public string StringProp { get; set; } = string.Empty;
public int IntProp { get; set; } = 0;
}

Este es el comportamiento predeterminado codificado para InputSelect. Puede que no estés de acuerdo con eso, pero no es un error.

Si desea que su objeto modelo tenga valores predeterminados, configúrelos en el objeto. Si desea obligar al usuario a seleccionar valores, realice la validación de datos.

No hay comentarios.:

Publicar un comentario

Flutter: error de rango al acceder a la respuesta JSON

Estoy accediendo a una respuesta JSON con la siguiente estructura. { "fullName": "FirstName LastName", "listings...