Xamarin.Forms – Ejecutando código JavaScript desde C#

Si has trabajado anteriormente con Xamarin, tal vez hayas utilizado el control WebView. Dicho control nos sirve para mostrar una página web dentro de nuestra aplicación, tal como el siguiente ejemplo:

Tal vez, una cosa que desconozcas es que se puede invocar una función JavaScript, ¡Desde tu código C#!

Para esto, lo que haremos será crear un archivo tipo .html dentro de nuestro proyecto portable, en una solución tipo Xamarin.Forms:

Dicho archivo, debe tener en sus propiedades, asignada la opción “Embedded Resource” en Build Action:

Dicho archivo, contiene la siguiente estructura a modo de ejemplo:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Cálculo de Factoriales</title>    
</head>
<body>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <h1>Cálculo de Factoriales</h1>
    <div id='result'/>
    <script type="text/javascript">
        function printFactorial(number)
        {            
            var result = 1;
            var factorialNumber = parseInt(number);
            $('#result').empty();
            
            for (var i = 1; i <= factorialNumber; i++)
            {
                result *= i;                                
            }
            $('#result').append('Resultado: ' + result + '</br>');
        }
    </script>
</body>
</html>

Procederemos también, a crear la definición de nuestro archivo .xaml, el cual contendrá una caja de texto, un botón para invocar el método Javascript, y un WebView donde desplegaremos la información deseada:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:JavaScriptAndCSharp"
             x:Class="JavaScriptAndCSharp.MainPage">

    <StackLayout>
        <Label Text="Factorial" FontSize="Medium" HorizontalOptions="Center" />
        <StackLayout Orientation="Horizontal" HorizontalOptions="Center">
            <Label Text="Factorial Number: " VerticalOptions="Center" />
            <Entry x:Name="txtNumber" Text="5" WidthRequest="40" />
        </StackLayout>
        <Button x:Name="btnCallJS" Text="Call JavaScript" Clicked="OnbtnCallJSClicked"/>
        <WebView x:Name="webView" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
    </StackLayout>

</ContentPage>

Ahora viene la parte interesante, en primer lugar, debemos de cargar la página HTML que deseemos, en nuestro caso, la página se llama test.html, por lo que crearemos una función dentro de nuestro archivo MainPage.xaml.cs, que lleve a cabo dicha carga, de la siguiente manera:

        HtmlWebViewSource LoadHTMLFileFromResource()
        {
            var source = new HtmlWebViewSource();

            // Carga el archivo HTML embebido como un recurso en el PCL
            var assembly = typeof(MainPage).GetTypeInfo().Assembly;
            var stream = assembly.GetManifestResourceStream("JavaScriptAndCSharp.test.html");
            using (var reader = new StreamReader(stream))
            {
                source.Html = reader.ReadToEnd();
            }
            return source;
        }

El código anterior, lo que hace es obtener el archivo HTML, y regresarlo como un órigen html para nuestro control WebView, debemos asignar dicha lectura en el constructor de nuestra página:

        public MainPage()
        {
            InitializeComponent();
            webView.Source = LoadHTMLFileFromResource();
        }

Por último, codificaremos el manejador de eventos del botón definido en nuestro código XAML, llamado “btnCallJS, de la siguiente forma:

        private void OnbtnCallJSClicked(object sender, EventArgs e)
        {        
            if (string.IsNullOrWhiteSpace(txtNumber.Text))
            {
                return;
            }
            int number = int.Parse(txtNumber.Text);
            webView.Eval(string.Format("printFactorial({0})", number));
        }

La forma de invocar las funciones dentro del archivo html, es a través de la función “Eval”, a la cual se le deben de pasar los parámetros obtenidos a través de la interfaz de usuario.

Con esto, tendrás una aplicación funcional que es capaz de invocar código Javascript:

Recuerda que puedes tener acceso a mis cursos para aprender Xamarin Forms ¡totalmente en español! Por si esto fuera poco, si accedes desde la siguiente página… ¡Te llevas cada uno de los cursos a un súper precio!

Cursos de Xamarin en Español

No lo pienses más y mejora tu carrera desde hoy mismo.

Saludos.

Entrada basada en las recetas del sitio oficial de Xamarin.Forms.

2 comentarios en “Xamarin.Forms – Ejecutando código JavaScript desde C#”

  1. Hola,

    Interesante!. ¿Cómo puedo hacer eso mismo pero recuperando el retorno dej JS en una variable?. En el caso que no se necesite mostrar nada por pantalla, lo único que quiero es llamar a una función Js y parsear ese valor para utilizarlo en código c#?

    Gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

0
    0
    Your Cart
    Your cart is emptyReturn to Shop