Cómo hacer eventos de UI del lado del cliente en Blazor

asp.net-core blazor c#

Pregunta

Acabo de empezar a jugar con Blazor y ya puedo ver el gran potencial de este nuevo marco.

Me pregunto, sin embargo, ¿cómo manejará hacer cosas simples como establecer el enfoque en un control de entrada? Por ejemplo, después de manejar un evento de clic, quiero establecer el enfoque en un control de entrada de texto. ¿Tengo que usar JQuery para algo así, o Blazor tendrá algunos métodos incorporados para ese tipo de cosas?

Gracias

Actualización: Así es como lo estoy haciendo por ahora, hasta que aprenda más sobre Blazor. (Esto funciona, pero sé que habrá mejores formas de manejar este tipo de cosas cuando Blazor esté listo para el horario de máxima audiencia).

En mi opinión tengo la siguiente sección de secuencias de comandos:

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

Luego, en la sección de Funciones tengo esta función:

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

Entonces lo llamo desde un método de actualización. (Esto está utilizando el código de muestra proporcionado por TalkingDotNet en 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>

Respuesta aceptada

Blazor es solo el reemplazo (para ser más preciso, "adición de valor") al javascript. Es una solución del lado del cliente (pero puede ser con un enlace fácil a ASP.Net en el futuro).

Todavía está completamente basado en html y CSS. C # está reemplazando la pieza js usando ensamblaje web. Así que nada ha cambiado en cómo acceder / modificar los controles html.

A partir de ahora (versión 0.1.0) debe confiar en el método HTML DOM focus() para hacer lo que intenta hacer (sí, debe usar javascript a partir de ahora :().

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

para más información puede consultar a continuación.

Si quieres mejorar el empaquetado de js cuidadosamente . Puedes hacer algo como esto. 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
}

A continuación, agregue este componente a la raíz. (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
}

Respuesta popular

No puedes llamar directamente a la función de JavaScript. Se requiere que primero registre sus funciones como,

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

Luego debe declarar un método en C # que llame a esta función de JavaScript. Me gusta,

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

Puede llamar a este método C # haciendo clic en el botón. Me gusta,

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

Esta publicación Crea una aplicación CRUD con Blazor y ASP.NET Core muestra una demostración de trabajo de cómo llamar a JavaScript desde Blazor.




Licencia bajo: CC-BY-SA with attribution
No afiliado con Stack Overflow
¿Es esto KB legal? Sí, aprende por qué
Licencia bajo: CC-BY-SA with attribution
No afiliado con Stack Overflow
¿Es esto KB legal? Sí, aprende por qué