Si comme moi vous vous posez la question pour donner le focus à un élément du DOM de votre interface, ne cherchez plus, voici la solution 😉 qui est très simple ! Simple lorsque l’on a déjà fait un peu de web / javascript
Mon objectif était de redonner le focus à un élément Input lorsque l’utilisateur a omis de renseigner un champ. Voici ce que cela donne :
Interopérabilité javascript
J’adore ce terme qui fait paraitre intelligent lorsqu’on le prononce ^^. Bref, il suffit d’ajouter dans votre projet un petit bout de code Javascript et donne tout simplement le focus à un élément identifié grâce à un … id , forcément.
Enregistrer ce code dans un ficher .JS portant le nom de votre choix. Puis déclarez entre les balises Header de votre page index. Pour les applications Blazor Webassembly c’est dans le dossier wwwroot/index.html . Pour les applications Blazor Server c’est depuis le fichier _Host.cshtml.
Je pense rien vous apprendre en vous disant que c’est comme cela :
Et du côté du code Blazor ?
Il suffit d’ajouter l’interface IJSRuntime à votre page .razor. Comme notre code javascrpit de retourne rien, il suffira alors de l’appeler via InvokeVoidAsync :
<input Id="idPassWord" Type="password" @bind="_pass" />
<button @onclick="clickOK">Valider</button>
@code {
private string _pass;
private async void clickOK()
{
if (String.IsNullOrEmpty(_pass))
await Focus("idPassWord");
else
{
// your code
}
}
public async Task Focus(string elementId)
{
await js.InvokeVoidAsync("jsfunction.focusElement", elementId);
}
}
Une fois de plus, vous l’aurez compris, c’est super simple !
