Passing Complex Data Objects in between JavaScript and .NET

Sometimes you may need to pass complex data objects in between JavaScript and .NET. It is recommended to use JSON to serialize the object into a string on the caller side and then deserialize it on the callee side. The following code demonstrates how to pass complex data object from JavaScript to .NET (the sample code uses JavaScript Extension feature. So it is recommended that you to be familiar with this feature first):

JavaScript
//Prepare the data object
var data = {"name": window.navigator.appName, "version": window.navigator.appVersion};

//Use JSON.stringify to serialize the data object into a string and then pass this string
//to .NET code through eoapi.extInvoke
eoapi.extInvoke("demoAbout", [JSON.stringify(data)]);

You can then use JSON to deserialize the object on the .NET side:

//You can use any JSON library. The code below uses Microsoft's JSON
//library. In order to use Microsoft's JSON library, you need to:
//1. Use .NET Framework 4.5 or above;
//2. Reference nuget package System.JSON;
using System.JSON;

//Attach the event handler
webView1.JSExtInvoke += new JSExtInvokeHandler(WebView_JSExtInvoke);

//Event handler code
void WebView_JSExtInvoke(object sender, JSExtInvokeArgs e)
{
    switch (e.FunctionName)
    {
        case "demoAbout":
            //Deserialize the JSON string back to JsonValue object
            JsonValue data = JsonObject.Parse(e.Arguments[0] as string);
            
            //Access each property
            string name = (string)data["name"];
            string version = (string)data["version"];
            break;
    }
}

The same concept can be applied when passing data object from .NET to JavaScript. The following code demonstrates how to serialize complex data object on .NET side and then deserialize it on the JavaScript side:

//You can use any JSON serializer. The following code uses Microsoft's
//JSON serializer implemented in System.Runtime.Serialization assembly. 
//So you must reference this assembly in order to use the following code. 
//The sample code is based on the following MSDN documentation:
//https://docs.microsoft.com/en-us/dotnet/framework/wcf/feature-details/how-to-serialize-and-deserialize-json-data
using System.Runtime.Serialization;
using System.Runtime.Serialization.Json;

//Data type to be serialized
[DataContract]  
class Person  
{  
    [DataMember]  
    internal string name;  

    [DataMember]  
    internal int age;  
}  

//Create an instance of the data object
Person p = new Person();  
p.name = "John";  
p.age = 42;  

//Serialize to JSON string
MemoryStream ms = new MemoryStream();  
DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(Person));  
ser.WriteObject(ms, p);  
ms.Position = 0;  
StreamReader sr = new StreamReader(ms);  
string json = sr.ReadToEnd();

//Pass the JSON string to the JavaScript function showPersonInfo
webView1.InvokeFunction("showPersonInfo", json);

The following JavaScript code deserializes the JSON string and displays the value of each member:

JavaScript
function showPersonInfo(json)
{
    //Deserialize the object
    var person = JSON.parse(json);
    
    //Display object properties
    alert("Person name: " + person.name + ", age: " + person.age);
}