Comment faire des événements d'interface utilisateur côté client dans Blazor

asp.net-core blazor c#

Question

Je viens de commencer à jouer avec Blazor et je peux déjà voir le potentiel énorme de ce nouveau cadre.

Je me demande cependant comment il va gérer des tâches simples, telles que la focalisation sur un contrôle d'entrée. Par exemple, après avoir géré un événement click, je souhaite définir le focus sur un contrôle de saisie de texte. Dois-je utiliser JQuery pour quelque chose comme ça, ou Blazor aura-t-il des méthodes intégrées pour ce genre de choses?

Merci

Mise à jour: C’est comme ça que je le fais pour l’instant, jusqu’à ce que j'en apprenne plus sur Blazor. (Cela fonctionne, mais je sais qu'il y aura de meilleures façons de gérer de telles choses quand Blazor sera prêt pour le prime time.)

De mon point de vue, j'ai la section de script suivante:

<script>
Blazor.registerFunction('FocusControl', (ctrl) => {
    document.getElementById(ctrl).focus();
    return true;
});
</script>

Ensuite, dans la section Fonctions, j'ai cette fonction:

<script>
Blazor.registerFunction('FocusControl', (ctrl) => {
    document.getElementById(ctrl).focus();
    return true;
});
</script>

Ensuite, je l'appelle depuis une méthode Refresh. (Ceci utilise l'exemple de code fourni par TalkingDotNet à l' adresse http://www.talkingdotnet.com/create-a-crud-app-using-blazor-and-asp-net-core/ )

<script>
Blazor.registerFunction('FocusControl', (ctrl) => {
    document.getElementById(ctrl).focus();
    return true;
});
</script>

Réponse acceptée

Blazor est simplement le remplacement (pour être plus précis "ajout de valeur") au javascript. C'est une solution uniquement côté client (mais peut être avec une liaison facile à ASP.Net dans le futur).

Toujours son complètement basé sur HTML et CSS. C # remplace la partie js à l'aide de l'assemblage Web. Donc, rien n'a changé sur la façon dont vous accédez / modifiez les contrôles HTML.

A partir de maintenant (version 0.1.0), vous devez utiliser la méthode HTML focus() DOM focus() pour faire ce que vous souhaitez faire (oui, vous devez utiliser javascript dès maintenant :().

// Not tested code
// This is JavaScript. 
// Put this inside the index.html. Just below <script type="blazor-boot"></script>
<script>
    Blazor.registerFunction('Focus', (controlId) => {
      return document.getElementById(controlId).focus();
    });
</script>

//and then wrap it for calls from .NET:    
// This is C#

public static object Focus(string controlId)
{
    return RegisteredFunction.Invoke<object>("Focus", controlId);
    //object type is used since Invoke does not have a overload for void methods. Don't know why. 
    //this will return undifined according to js specs
}

pour plus d'informations, vous pouvez vous référer ci-dessous.

Si vous voulez améliorer le pakaging de js proprement . vous pouvez faire quelque chose comme ça. https://stackoverflow.com/a/49521216/476609

// Not tested code
// This is JavaScript. 
// Put this inside the index.html. Just below <script type="blazor-boot"></script>
<script>
    Blazor.registerFunction('Focus', (controlId) => {
      return document.getElementById(controlId).focus();
    });
</script>

//and then wrap it for calls from .NET:    
// This is C#

public static object Focus(string controlId)
{
    return RegisteredFunction.Invoke<object>("Focus", controlId);
    //object type is used since Invoke does not have a overload for void methods. Don't know why. 
    //this will return undifined according to js specs
}

Ajoutez ensuite ce composant à la racine. (App.cshtml)

// Not tested code
// This is JavaScript. 
// Put this inside the index.html. Just below <script type="blazor-boot"></script>
<script>
    Blazor.registerFunction('Focus', (controlId) => {
      return document.getElementById(controlId).focus();
    });
</script>

//and then wrap it for calls from .NET:    
// This is C#

public static object Focus(string controlId)
{
    return RegisteredFunction.Invoke<object>("Focus", controlId);
    //object type is used since Invoke does not have a overload for void methods. Don't know why. 
    //this will return undifined according to js specs
}

Réponse populaire

Vous ne pouvez pas appeler directement la fonction JavaScript. Vous devez d'abord enregistrer vos fonctions comme,

<script>
 Blazor.registerFunction('ShowControl', (item) => {       
     var txtInput = document.getElementById("txtValue");         
     txtInput.style.display = "";
     txtInput.value = item;
     txtInput.focus();          
});
return true;
</script>

Ensuite, vous devez déclarer une méthode en C # qui appelle cette fonction JavaScript. Comme,

<script>
 Blazor.registerFunction('ShowControl', (item) => {       
     var txtInput = document.getElementById("txtValue");         
     txtInput.style.display = "";
     txtInput.value = item;
     txtInput.focus();          
});
return true;
</script>

Vous pouvez appeler cette méthode C # en cliquant sur le bouton. Comme,

<script>
 Blazor.registerFunction('ShowControl', (item) => {       
     var txtInput = document.getElementById("txtValue");         
     txtInput.style.display = "";
     txtInput.value = item;
     txtInput.focus();          
});
return true;
</script>

Cet article Créer une application CRUD à l'aide de Blazor et ASP.NET Core montre une démonstration fonctionnelle de l'appel de JavaScript depuis Blazor.




Sous licence: CC-BY-SA with attribution
Non affilié à Stack Overflow
Est-ce KB légal? Oui, apprenez pourquoi
Sous licence: CC-BY-SA with attribution
Non affilié à Stack Overflow
Est-ce KB légal? Oui, apprenez pourquoi