Interoperabilidad con JavaScript: Ejecución desde C# - Tutorial de Blazor

En Blazor podemos crear casi cualquier tipo de interfaz utilizando sus funcionalidades, CSS, HTML, Razor, C#, y, por supuesto, la flexibilidad de los componentes de Blazor. Sin embargo, hay ocasiones en las que no nos queda más remedio que acudir a JavaScript. Para esto, Blazor nos provee de un mecanismo de interoperabilidad llamado JSRuntime. Este servicio está disponible mediante la inyección de dependencias con la interfaz IJSRuntime, que podemos inyectar en cualquiera de nuestros componentes. De hecho, es un servicio predeterminado que no tenemos que registrar en ningún sitio. Bien, vamos a verlo con un ejemplo. Estamos en la página principal de nuestro proyecto de StoriesLibrary, y aquí lo que yo quiero hacer es que cuando cargue la página por primera vez, me pida mi nombre, ¿pero cómo? No con una interfaz y un formulario, no, lo quiero en plan año 90, con un prompt de navegador que me diga: «Hola, ¿cómo te llamas?» Y luego ese nombre que JavaScript ha capturado, me lo va a poner en mi interfaz. ¿Cómo lo hacemos? Pues, primero vamos a inyectar el servicio IJSRuntime. Aquí lo tenemos. Y ahora vamos a hacer uso de él. ¿Dónde? Bueno, vamos a ver primero la página Razor. Fíjate, tenemos una variable privada que se llama name, y aquí digo, si name no está vacía, pinta name en un párrafo. Bien, ahora aquí, en nuestro método OnAfterRender, cuando ya está todo renderizado, pero solo la primera vez y si render es true, hago name = await jsRuntime.InvokeAsync de tipo string. Es decir, yo le estoy diciendo: «Oye, invoca esto, pero la devolución la quiero, y la quiero en formato de string». ¿Y qué invocamos? La función prompt. ¿Con qué? Con un argumento. ¿Cuál es? «¿Cómo te llamas?». Esta función acepta cualquier número de argumentos que luego se le pasarán a la función JavaScript. Bien. Y después, además, además de pedirme mi nombre y que lo pinte, yo quiero reproducir un sonido. Para seguir con la tendencia de página de los 90. Cuando yo responda con mi nombre, quiero que se escuche una página al girarse, así tipo de historias, ¿no? ¿Cómo lo hacemos? Pues, aquí, en nuestra página Razor, aquí abajo he metido un componente de audio. <audio, una clase para que no se vean los controles, y aquí, fíjate, @ref="audioRef". ¿Qué es este @ref? Bueno, este @ref es un atributo que nos va a permitir capturar la referencia del elemento HTML cuando está renderizado. Y la capturamos en esta variable. private ElementReference audioRef. Como estamos trabajando con el método OnAfterRenderAsync, este elemento audio ya va a estar renderizado y estará capturado en ese ElementReference. ¿Por qué lo necesitamos? Porque necesitamos pasarle ese elemento a una función JavaScript para que se ejecute el play de ese audio. ¿Cómo lo hacemos? Pues, igual que antes, simplemente await jsRuntime, .InvokeVoidAsync, el nombre de la función que se llama «playAudio», y la referencia al elemento, audioRef. Fíjate que aquí estamos utilizando InvokeVoidAsync. ¿Por qué? Porque a mí me da igual el valor de retorno de la función de play, que de hecho, es un void, no tiene valor. Así que se usa este método para no recibir un valor en la tarea asincrónica. Bien, ¿pero dónde está esta función playAudio? La tenemos en un fichero JavaScript estático que está dentro de wwwroot, storiesFunctions, y aquí lo definimos. window.playAudio= esta función, que recibe un elemento audio, y hace audio.play, nada más que eso. ¿Y dónde se inserta? Pues, hay que insertarlo dentro del index.html que carga nuestra página la primera vez. Aquí abajo tenemos ese script src, js/storiesFunctions.js. Bien, vamos a ejecutar todo esto, a ver si funciona. Compilamos, ejecutamos, activamos el audio del sistema. Me dice: «¿Cómo te llamas?» Yo pongo aquí: «Juanjo». Y atención, voy a callar al lector para que no lo escuches. Y cuando pulse Enter, (sonido de pasar una página) se escucha nuestra página al girar. Como ves, es muy fácil llamar a funciones JavaScript e incluso obtener sus valores de devolución.