Come fare gli eventi dell'interfaccia utente lato client in Blazor

asp.net-core blazor c#

Domanda

Ho appena iniziato a giocare con Blazor e posso già vedere il grande potenziale di questo nuovo framework.

Mi chiedo, però, come gestirà le cose semplici come impostare l'attenzione su un controllo di input? Ad esempio, dopo aver gestito un evento click, desidero impostare lo stato attivo su un controllo di input del testo. Devo usare JQuery per qualcosa del genere, o Blazor avrà alcuni metodi incorporati per quel genere di cose?

Grazie

Aggiornamento: Questo è come sto facendo questo per ora, fino a quando non imparo di più su Blazor. (Funziona, ma so che ci saranno modi migliori per gestire cose come questa quando Blazor è pronto per la prima serata.)

Dal mio punto di vista ho la seguente sezione Script:

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

Quindi, nella sezione Funzioni ho questa funzione:

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

Quindi lo chiamo da un metodo Refresh. (Questo sta utilizzando il codice di esempio fornito da TalkingDotNet all'indirizzo 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>

Risposta accettata

Blazor è solo la sostituzione (per essere più precisi "valore aggiunto") per il javascript. È una soluzione solo lato client (ma potrebbe essere con qualche facile associazione a ASP.Net in futuro).

È ancora completamente basato su HTML e CSS. C # sta sostituendo la parte js usando il web assembly. Quindi non è cambiato nulla su come accedi / modifichi i controlli html.

A partire da ora (versione 0.1.0) devi fare affidamento sul metodo HTML DOM focus() per fare ciò che intendi fare (sì, devi usare javascript sin d'ora :().

// 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
}

per ulteriori informazioni è possibile consultare sotto.

Se vuoi migliorare il pakaging di js ordinatamente . puoi fare qualcosa di simile. 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
}

quindi aggiungi questo componente alla radice. (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
}

Risposta popolare

Non è possibile chiamare direttamente la funzione JavaScript. Devi prima registrare le tue funzioni come,

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

Quindi devi dichiarare un metodo in C # che chiama questa funzione JavaScript. Piace,

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

Puoi chiamare questo metodo C # al clic del pulsante. Piace,

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

Questo post Crea un'app CRUD usando Blazor e ASP.NET Core mostra una demo funzionante di chiamata JavaScript da Blazor.




Autorizzato sotto: CC-BY-SA with attribution
Non affiliato con Stack Overflow
È legale questo KB? Sì, impara il perché
Autorizzato sotto: CC-BY-SA with attribution
Non affiliato con Stack Overflow
È legale questo KB? Sì, impara il perché