HybridWebView - JS Interop

Author: egvijayanand

src/NET_9/HybridWebViewApp/App.xaml.cs

@@ -1,14 +1,13 @@
-namespace HybridWebViewApp
+namespace HybridWebViewApp;
+
+public partial class App : Application
 {
-    public partial class App : Application
+    public App()
     {
-        public App()
-        {
-            InitializeComponent();
-            UserAppTheme = PlatformAppTheme;
-        }
-
-        protected override Window CreateWindow(IActivationState? activationState)
-            => new MainWindow();
+        InitializeComponent();
+        UserAppTheme = PlatformAppTheme;
     }
+
+    protected override Window CreateWindow(IActivationState? activationState)
+        => new MainWindow();
 }

src/NET_9/HybridWebViewApp/Imports.cs

@@ -1,4 +1,5 @@
 global using HybridWebViewApp;
+global using HybridWebViewApp.Models;
 global using HybridWebViewApp.Views;
 
 // Static

src/NET_9/HybridWebViewApp/MainWindow.xaml.cs

@@ -1,15 +1,8 @@
-namespace HybridWebViewApp
+namespace HybridWebViewApp;
+
+public partial class MainWindow : Window
 {
-    public partial class MainWindow : Window
-    {
-        public MainWindow()
-        {
-            InitializeComponent();
-        }
+    public MainWindow() => InitializeComponent();
 
-        public MainWindow(Page page) : base(page)
-        {
-            InitializeComponent();
-        }
-    }
+    public MainWindow(Page page) : base(page) => InitializeComponent();
 }

src/NET_9/HybridWebViewApp/Models/IntContext.cs

@@ -0,0 +1,7 @@
+using System.Text.Json.Serialization;
+
+namespace HybridWebViewApp.Models;
+
+//[JsonSourceGenerationOptions(WriteIndented = true)]
+[JsonSerializable(typeof(int))]
+internal partial class IntContext : JsonSerializerContext;

src/NET_9/HybridWebViewApp/Resources/Raw/wwwroot/index.html

@@ -21,6 +21,10 @@ <h3>HybridWebView App!</h3>
         Messages from .NET: <textarea readonly id="msgFromCS" style="width: 80%; height: 300px;"></textarea>
     </div>
     <script>
+        function addNumbers(num1, num2) {
+            return num1 + num2;
+        }
+
         window.addEventListener(
             "HybridWebViewMessageReceived",
             function(e) {

src/NET_9/HybridWebViewApp/Views/MainPage.xaml

@@ -10,11 +10,35 @@
     mc:Ignorable="d">
     <ContentPage.Content>
         <ScrollView>
-            <Grid RowDefinitions="Auto,*,40">
+            <Grid RowDefinitions="Auto,Auto,*,40">
                 <HorizontalStackLayout
+                    Margin="0,20,0,0"
+                    HorizontalOptions="Center">
+                    <Label
+                        FontAttributes="Bold"
+                        Text="JS Interop:"
+                        VerticalOptions="Center" />
+                    <Entry
+                        x:Name="operand1"
+                        Placeholder="Number 1"
+                        WidthRequest="100" />
+                    <Entry
+                        x:Name="operand2"
+                        Placeholder="Number 2"
+                        WidthRequest="100" />
+                    <Button
+                        Clicked="OnAddClicked"
+                        Text="Add" />
+                </HorizontalStackLayout>
+                <HorizontalStackLayout
+                    Grid.Row="1"
                     Margin="0,20,0,0"
                     HorizontalOptions="Center"
                     VerticalOptions="Center">
+                    <Label
+                        FontAttributes="Bold"
+                        Text="Messaging:"
+                        VerticalOptions="Center" />
                     <Entry
                         x:Name="message"
                         ClearButtonVisibility="WhileEditing"
@@ -30,10 +54,10 @@
                 </HorizontalStackLayout>
                 <HybridWebView
                     x:Name="hwv"
-                    Grid.Row="1"
+                    Grid.Row="2"
                     RawMessageReceived="OnRawMessageReceived" />
                 <Grid
-                    Grid.Row="2"
+                    Grid.Row="3"
                     BackgroundColor="{AppThemeBinding Dark={StaticResource BackgroundDark},
                                                       Light={StaticResource Primary}}">
 

src/NET_9/HybridWebViewApp/Views/MainPage.xaml.cs

@@ -1,34 +1,51 @@
 using System.Reflection;
 
-namespace HybridWebViewApp.Views
+namespace HybridWebViewApp.Views;
+
+public partial class MainPage : ContentPage
 {
-    public partial class MainPage : ContentPage
+    public MainPage()
     {
-        public MainPage()
-        {
-            InitializeComponent();
-            message.ReturnCommand = new Command(SendMessage);
-            var version = typeof(MauiApp).Assembly.GetCustomAttribute<AssemblyInformationalVersionAttribute>()?.InformationalVersion;
-            versionLabel.Text = $".NET MAUI ver. {version?[..version.IndexOf('+')]}";
-        }
+        InitializeComponent();
+        message.ReturnCommand = new Command(SendMessage);
+        var version = typeof(MauiApp).Assembly.GetCustomAttribute<AssemblyInformationalVersionAttribute>()?.InformationalVersion;
+        versionLabel.Text = $".NET MAUI ver. {version?[..version.IndexOf('+')]}";
+    }
 
-        private void OnSendClicked(object sender, EventArgs e) => SendMessage();
+    private void OnSendClicked(object sender, EventArgs e) => SendMessage();
 
-        private async void OnRawMessageReceived(object sender, HybridWebViewRawMessageReceivedEventArgs e)
-        {
-            await DisplayAlert("Raw Message Received", e.Message, "OK");
-        }
+    private async void OnRawMessageReceived(object sender, HybridWebViewRawMessageReceivedEventArgs e)
+        => await DisplayAlert("Raw Message Received", e.Message, "OK");
+
+    private void OnMessageChanged(object sender, TextChangedEventArgs e)
+        => send.IsEnabled = message.Text.Length > 0;
 
-        private void OnMessageChanged(object sender, TextChangedEventArgs e)
+    private async void OnAddClicked(object sender, EventArgs e)
+    {
+        if (int.TryParse(operand1.Text, out var num1)
+            && int.TryParse(operand2.Text, out var num2))
         {
-            send.IsEnabled = message.Text.Length > 0;
-        }
+            var result = await hwv.InvokeJavaScriptAsync<int>(
+                "addNumbers", // Method name
+                IntContext.Default.Int32, // Return type
+                [num1, num2], // Input parameter values
+                [IntContext.Default.Int32, IntContext.Default.Int32]); // Input parameter types
+            await DisplayAlert("Result", $"{result}", "OK");
 
-        private void SendMessage()
+            operand1.Text = string.Empty;
+            operand2.Text = string.Empty;
+            operand1.Focus();
+        }
+        else
         {
-            hwv.SendRawMessage(message.Text);
-            message.Text = string.Empty;
-            message.Focus();
+            await DisplayAlert("Error", "Invalid input.", "OK");
         }
     }
+
+    private void SendMessage()
+    {
+        hwv.SendRawMessage(message.Text);
+        message.Text = string.Empty;
+        message.Focus();
+    }
 }