Will we ever be able to pass complex objects into and out of our API's ?

[Krauthi72]

Hello
Will we ever be able to pass complex objects into and out of our API's ?

I have follow example:

   var dataObj= {nameX: 'max monster',messageX: 'lorem ipsum...'};
   async function sendData(){
        let res =  await chrome.webview.hostObjects.sync.eventForwarder.SendData(dataObj);
	console.log(res);
   }

In C# API:

using System;
using System.Runtime.InteropServices;
using System.Windows;
using Microsoft.Web.WebView2.Core;

namespace TestWebView2
{
    public partial class MainWindow : Window
    {
       
        public MainWindow()
        {
            InitializeComponent();
            InitializeAsync();
        }

        async void InitializeAsync()
        {
            await webView.EnsureCoreWebView2Async(null);
            WebView_CoreWebView2Ready();
        }
        private void WebView_CoreWebView2Ready()
        {
            webView.CoreWebView2.AddHostObjectToScript("eventForwarder", new EventForwarder());
        }
   }

    public class DataObject
    {
        public string nameX = "";
        public string messageX = "";

        public DataObject() { }
    }

    [ClassInterface(ClassInterfaceType.AutoDual)]
    [ComVisible(true)]
    public class EventForwarder
    {
        public string SendData(DataObject data)
        {
            return "hasCall with parameters: " + data.nameX;
        }
    }
}

How can I receive the ObjectData on the API side as shown in the example above?

As described above, the example would not work because the following message comes back:

VM6:1 Uncaught (in promise) Error: Schnittstelle nicht unterst�tzt (0x80004002)
    at RemoteMessenger.postSyncRequestMessage (<anonymous>:1:10471)
    at Function.applyHostFunction (<anonymous>:1:22650)
    at Object.apply (<anonymous>:1:15398)
    at SendData (test.html:87)
    at HTMLDivElement.onclick (test.html:93)

Thank for your answer

AB#27139995

[david-risney]

Hi @Krauthi72! I would expect that what you have should work as long as all the classes you pass around all have the AutoDual / ComVisible attributes. We will look into this to more, or let us know if that resolves your issue. Thanks!

[Krauthi72]

Hello, thank you very much for your answer.
Unfortunately the "AutoDual / ComVisible attribute" does not solve my problem.
Do you have a small example where it works?
THX

[Krauthi72]

I tried to forward the object "DataObject" in Javascript. Fill it there and send it back. Than it works.
Is it intended that I pass objects to Javascript, then use them and send them back again?

[Krauthi72]

Is this the right way of implementation?
Here is the Code that works:

using System;
using System.Net;
using System.Net.Http;
using System.Net.Security;
using System.Runtime.InteropServices;
using System.Runtime.Serialization;
using System.Security.Cryptography.X509Certificates;
using System.Text;
using System.Windows;
using System.Xml;
using System.Xml.Linq;
using Microsoft.Web.WebView2.Core;
using Newtonsoft.Json;

namespace Webview2Test
{
	
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            InitializeAsync();
        }

        private string timeflexurl = null;

        async void InitializeAsync()
        {
            await webView.EnsureCoreWebView2Async(null);
            WebView_CoreWebView2Ready();
        }
        private async void WebView_CoreWebView2Ready()
        {
            webView.CoreWebView2.OpenDevToolsWindow();
            webView.CoreWebView2.WebMessageReceived += PostMessageHandler;
            webView.CoreWebView2.AddHostObjectToScript("nativeMethods", new NativeMethods());
            webView.CoreWebView2.AddHostObjectToScript("nativeObjects", new NativeObjects());

            await webView.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(
               "let native = {};" +
               "native.objects = chrome.webview.hostObjects.sync.nativeObjects;" +
               "native.methods = chrome.webview.hostObjects.sync.nativeMethods;"
           );
        }

        void PostMessageHandler(object sender, CoreWebView2WebMessageReceivedEventArgs args)
        {
            String message = args.WebMessageAsJson;
            switch (message)
            {
                case "\"contentReady\"":
                    // ... 
                    break;
                default:
                    break;
            }
        }


        [ClassInterface(ClassInterfaceType.None)]
        [ComVisible(true)]
        public class NativeMethods
        {
            public string SendDataObject(DataObject data)
            {                
                return "DataObject submitted successfully!";
            }
        }



        [ClassInterface(ClassInterfaceType.None)]
        [ComVisible(true)]
        public class NativeObjects
        {
            public DataObject dataObject { 
                get {
                    return new DataObject();
                }
                set { }
            } 
        }

        [ClassInterface(ClassInterfaceType.None)]
        [ComVisible(true)]
        public class DataObject
        {
            public string fullName { get; set; } = "";
            public string message { get; set; } = "";

            public DataObject() { }
        }

    }

}

And javascript here:

async function sendData(){		
	//native.objects always returns a new instance of the object
	let dataObject = native.objects.dataObject;	
	dataObject.fullName = 'Max Mustermann';
	dataObject.message = 'TEST';
	let result =  await native.methods.SendDataObject(dataObject);	
}	

Is it intended that I pass objects to Javascript, then use them and send them back again?

[andrewmd5]

@david-risney I believe WebView2 should allow for binding of objects to the Window with focus on type safety. This is something we started rolling into CefSharp after using it in our production app for awhile. cefsharp/CefSharp#3138

Hopefully it can provide a reference point, but there should definitely be a simple way to utilize existing classes, enums, and properties across the language domains.

[RickStrahl]

@Krauthi72 As far as I can see you can't pass binary objects back and forth at this point. But you could in theory create multiple host objects and set and retrieve properties on them.

As to actually passing complex data - I guess we have to use JSON to do that and serialize/deserialize on both ends.

As to calling, using HostObjects these are the steps that worked for me:

Create a class:

    [ClassInterface(ClassInterfaceType.AutoDual)]
    [ComVisible(true)]
    public class DotnetInterop
    {
        public string Name { get; set; } = "Rick";
        public string Company { get; set; } = "West Wind";


        // var res = window.chrome.webview.hostObjects.sync.mm.HelloWorld('rick');
        // alert(res);
        public string HelloWorld(string name)
        {
            Thread.Sleep(300);
            return $"Hello World, {name}!";
        }
      
      // this doesn't work - method is called, but JS sees null
       public MessageItem ReturnDotnetObject()
        {
            return new MessageItem();
        }

        // this fails on the client
        public string PassMessageItem(MessageItem message)
        {
            return message.Message;
        }

    }


    [ClassInterface(ClassInterfaceType.AutoDual)]
    [ComVisible(true)]
    public class MessageItem
    {
        public string Name { get; set; } = "Rick";
        public string Message {get; set; }

    }

Then in your browser initialization code:

webView.CoreWebView2.AddHostObjectToScript("mm", Interop);   // property so it's persistent

Then in JavaScript you can call this class both sync and async:

// async
var res = window.chrome.webview.hostObjects.mm.HelloWorld('rick async')

// sync
var res = window.chrome.webview.hostObjects.sync.mm.HelloWorld('rick');

But any of the other methods don't work as expected:

   // this doesn't work - message is null
   var message = mm.ReturnDotnetObject();
   alert(message.Message);

   // this fails and since we can't create the dotnet message object it won't go
   var message = mm.PassMessageItem({Message: 'hello from JS'});
   alert(message);

But what does seem to work is 'attaching' a 'message object' to the host object:

 [ClassInterface(ClassInterfaceType.AutoDual)]
    [ComVisible(true)]
    public class DotnetInterop
    {
        public string Name { get; set; } = "Rick";
        public string Company { get; set; } = "West Wind";

        public MessageItem Message { get; set; } = new MessageItem();

and you can then read and write that message object:

  // Object access
    alert(mm.Message.Name);

    mm.Message.Message = "Yowza - set in JavaScript";
    alert(mm.HelloWorld); // should now show the new message as part of the result

Awkward but I suppose you can basically set anything you need to pass around explicitly as a host object or a child of a host object.

[Krauthi72]

IMPORTANT KNOWLEDGE:
What I noticed when the declaration occurs in an object with a "Name" leads to an error.
@RickSstrahl try the "MessageItem" object instead of "Name" - "FullName". Then it should actually work with the ReturnDotNetObject.

[alex3683]

@RickStrahl What about the very simple case of passing a plain object created in the JavaScript environment to the C# host, just like in ASP web applications. Isn't that possible without manual (de-)serialization or passing an object stub to the JavaScript environment first?

[RickStrahl]

@Krauthi72 Good catch, man! Yup sure enough changing the property to fullname makes both the object return from .NET and passing the .NET object back work:

     var message = mm.ReturnDotnetObject();
     alert("object return: " + message.Message + " - " + message.FullName);

    message.Message = 'hello from JS';
    message.FullName= "JS Rick 2";
    
    var message = mm.PassMessageItem(message);
    alert(message);

That sure sounds like a bug and should be a new issue. You want to file that one?

@alex3683 As far as I can see you can't pass arbitrary JavaScript objects back to .NET. That doesn't seem to work. If I pass:

    var message = mm.PassMessageItem({ FullName: "JS name", Message: "JS Generated Message" });

the call fails.

It only works if the actual .NET type that was previous returned, is passed back.

I can get the call to work into .NET by having the parameter type be of type object (or dynamic)::

public string PassDynamic(object message)
        {
// Reflection doesn't work (InvokeMember() call)
            var msgText = Westwind.Utilities.ReflectionUtils.GetPropertyCom(message, "Message") as string;
            var name = Westwind.Utilities.ReflectionUtils.GetPropertyCom(message, "FullName") as string;

// dynamic also doesn't work
            dynamic msg = message as dynamic;
            return msg.Message + " " + msg.FullName;
        }

This method does get called but the parameter is not accessible.

FWIW, I don't think that's a huge deal. If you really need to pass values you can rely on JSON serialization. It's fast on the JS side and assuming the objects aren't massive pretty fast on the .NET side too. This is COM anyway so no matter what you wouldn't want to have super chatty APIs with data going back and forth.

I researching this for Markdown Monster which is an editor and replacing the IE Web Browser control, and for the interop I'm doing with the browser there are 3 methods out of maybe a 100 that require objects - the rest can live with simple value parameters no problem and come to think of it all of those are from .NET into JavaScript which actually works - it's only the passing back into .NET that doesn't work.

[alex3683]

Thanks @RickStrahl and others for you valuable input. So I guess manual (de-)serialization is the way to go, since passing an empty object to JavaScript as a blueprint, just to fill it with data and send it back feels awkward.

[Krauthi72]

Hello everyone and thanks for your contributions.
I also think that the best way is to manually seralize. That would be nice with the complex objects if you send json and that, like with a rest interface with corresponding attributes, has the object directly without serializing. But this is so that this still leads to problems.
THX
For information: The attributes ([ClassInterface (ClassInterfaceType.XXX)]) ClassInterfaceType.AutoDual or ClassInterfaceType.AutoDispatch is shown to me as outdated. Does that make any sense to use them? Then there would only be ClassInterfaceType.None? Or are you currently using something else? What is your experience?