Pourquoi value="string-value" fonctionne-t-il avec input type="time", mais pas bind-value="string-value" ?

Question

Je travaille sur un site web simple pour essayer Blazor (je suis un débutant). J'ai créé un binding avec une chaîne de valeur "08:00" et je l'ai lié à un champ de saisie comme indiqué :

<input @bind-value="@StartValue" @bind-value:event="onchange" class="col-sm-1" type="time"/>
@code {
public string StartValue { get; set; } = "08:00";
}

Cela génère l'erreur "cannot convert from 'string' to 'System.DateTime'". Cependant, lorsque je supprime ma liaison et que je crée mon entrée comme suit : cela fonctionne bien.

<input value="08:00" class="col-sm-1" type="time"/>

Une idée de la raison pour laquelle il y a une différence ? Cela n'a aucun sens pour moi d'utiliser un DateTime, je serais d'accord si je pouvais utiliser un TimeSpan mais cela ne fonctionne pas non plus.

Answer 1

Avec @bind-value vous êtes lié à un type de chaîne, ce qui ne fonctionnera pas avec type="time".

Avec value vous avez saisi un type correct "time", et non une chaîne de caractères. Si vous saisissez une chaîne de caractères comme 'foo', cela ne fonctionnera pas.

Answer 2

J'ai essayé de saisir le type de temps avec TimeSpan et j'ai obtenu l'erreur de compilation suivante : Error CS1503 Argument 1: cannot convert from 'System.TimeSpan' to 'System.DateTime'

Blazor met en correspondance certains types de <input /> à certains types de CLR. La raison de ceci pourrait être de réduire les erreurs de type et de conversion non désirées, les comportements manqués ( ?).

Dans les documents officiels de Blazor, cela est mentionné dans des "morceaux" comme :

Lorsque le composant est rendu, la valeur de l'élément d'entrée provient de la propriété CurrentValue. Lorsque l'utilisateur tape dans la zone de texte et change le focus de l'élément, l'événement onchange est déclenché et la propriété CurrentValue est définie sur la valeur modifiée. En réalité, la génération de code est plus complexe car @bind gère les cas où des conversions de type sont effectuées. En principe, @bind associe la valeur actuelle d'une expression à un attribut de valeur et traite les changements à l'aide du gestionnaire enregistré.

Lien vers le document

Vous pourriez utiliser DateTime et fournir un formateur comme :

<input @bind="StartDate" @bind:format="yyyy-MM-dd" />

@code {
    [Parameter]
    public DateTime StartDate { get; set; } = new DateTime(2020, 1, 1);
}