web-dev-qa-db-fra.com

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

Je viens de commencer à jouer avec Blazor et je vois déjà le grand potentiel de ce nouveau framework.

Je me demande, cependant, comment cela va gérer des choses simples comme mettre le focus sur un contrôle d'entrée? Par exemple, après avoir géré un événement de clic, 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 chose?

Merci

Mise à jour: J'ai publié une réponse ci-dessous avec un exemple de la façon de définir le focus sur un contrôle en appelant une fonction JavaScript à partir du code .Net.

À partir de maintenant (Blazor 0.9.0), vous créez vos fonctions JavaScript dans Index.html (ou les référencez à partir d'Index.html), puis dans votre page ou composant Blazor, vous appelez JsRuntime.InvokeAsync ("functionName", parms);

https://docs.Microsoft.com/en-us/aspnet/core/razor-components/javascript-interop

javascriptc#asp.net-coreblazorjavascript-interop
15
camainc

Je veux ajouter un exemple plus à jour (à partir de 0.9.0) d'appeler une fonction JavaScript pour définir le focus sur un autre contrôle après un événement, comme cliquer sur un bouton. Cela pourrait être utile pour quelqu'un qui débute avec Blazor (comme moi).

Cet exemple s'appuie sur l'exemple de code de la documentation Blazor "Build Your First Blazor Components App" sur https://docs.Microsoft.com/en-us/aspnet/core/tutorials/build-your-first- razor-components-app? view = aspnetcore-3.

Tout d'abord, suivez toutes les instructions de la documentation. Lorsque vous disposez d'une page de liste de tâches en cours, ajoutez les éléments suivants:

  1. Au bas d'Index.html, sous wwwroot et sous la balise de script qui charge le webassembly.js, ajoutez le script suivant:
<script>
        window.MySetFocus = (ctrl) => {
            document.getElementById(ctrl).focus();
            return true;
        }
</script>
  1. En haut de votre page todo.cshtml, ajoutez l'instruction using suivante:
@inject IJSRuntime JsRuntime;
  1. Dans la section @functions de votre page todo.cshtml, ajoutez la fonction suivante:
    async void Focus(string controlId)
    {
        var obj = JsRuntime.InvokeAsync<string>(
            "MySetFocus", controlId);
    }
  1. Dans la fonction AddToDo (), juste en dessous de la ligne où vous définissez la variable "newToDo" sur une chaîne vide, ajoutez un appel à la fonction Focus, en transmettant l'ID de chaîne du contrôle d'entrée. (L'exemple dans la documentation n'attribue pas d'ID au contrôle d'entrée, alors ajoutez-en un vous-même. J'ai nommé le mien "todoItem").

void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
            Focus("todoItem"); // this is the new code
        }
    }
  1. Créez et exécutez votre application. Lorsque vous cliquez sur le bouton Ajouter un nouvel élément, le nouvel élément doit être ajouté à la liste, le contrôle d'entrée est effacé et le focus doit être de retour dans le contrôle d'entrée, prêt à ajouter un autre élément.
5
camainc

Blazor est juste le remplacement (pour être plus précis "valeur ajoutée") du javascript. Il s'agit d'une solution côté client uniquement (mais peut-être avec une liaison facile à ASP.Net à l'avenir).

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

À partir de maintenant (version 0.1.0), vous devez vous fier à HTML DOM focus() Méthode pour faire ce que vous avez l'intention de faire (oui, vous devez utiliser javascript à partir de 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 souhaitez améliorer nettement le pakaging de js . vous pouvez faire quelque chose comme ça. https://stackoverflow.com/a/49521216/476609

public class BlazorExtensionScripts : Microsoft.AspNetCore.Blazor.Components.BlazorComponent
{

    protected override void BuildRenderTree(Microsoft.AspNetCore.Blazor.RenderTree.RenderTreeBuilder builder)
    {
        builder.OpenElement(0, "script");
        builder.AddContent(1, "Blazor.registerFunction('Focus', (controlId) => { document.getElementById(controlId).focus(); });");
        builder.CloseElement();
    }

    public static void Focus(string controlId)
    {
         RegisteredFunction.Invoke<object>("Focus", controlId);
    }
}

puis ajoutez ce composant à la racine. (App.cshtml)

<BlazorExtensionScripts></BlazorExtensionScripts>
<Router AppAssembly=typeof(Program).Assembly />
11
VibeeshanRC

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,

private void CallJavaScript()
{
   RegisteredFunction.Invoke<bool>("ShowControl", itemName);
}

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

<button id="btnShow" class="btn btn-primary" @onclick(CallJavaScript)>Show</button>

Ce post Créer une application CRUD en utilisant Blazor et ASP.NET Core montre une démonstration de travail d'appeler JavaScript depuis Blazor.

2
VirendraJ