Table of Contents
- Getting Started
- EO.Pdf
- EO.Web
- EO.WebBrowser
- Overview
- Installation and Deployment
- Getting Started
- Customizing WebView
- Advanced Topics
- Executing JavaScript Code
- JavaScript and DOM Interface
- Using JavaScript Extension
- Passing Complex Data Objects in between JavaScript and .NET
- Custom Resource Handler
- Custom Response Handling
- Handling Input Events
- Handling New Window
- Managing Browser Engines
- Setting WebView Options
- Authentication
- Working with Certificates
- Working with Local Files
- Printing Pages
- HTML 5 Support
- Using Plugins
- Debugging Web Pages
- Using Google Services
- EO.Wpf
- Common Topics
- Reference
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):
//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:
function showPersonInfo(json) { //Deserialize the object var person = JSON.parse(json); //Display object properties alert("Person name: " + person.name + ", age: " + person.age); }