在WebView2中通过JSON序列化在C#与JavaScript之间传递数组

using System;
using System.Text.Json; // 引入System.Text.Json命名空间

public class HostObject
{
    public string GetArrayAsJson()
    {
        int[,] xx = { { 1, 2, 3 }, { 3, 4, 5 } };

        // 为了将多维数组正确序列化为JSON数组的数组，
        // 最好先将其转换为List<List<int>>或其他更易于序列化的结构。
        // 或者直接序列化，但JavaScript端可能需要特殊处理。
        // 对于本例，我们将其转换为List<int[]>以便JsonSerializer能更好地处理。
        // 更直接的方式是转换为List<List<int>>
        var list = new System.Collections.Generic.List<System.Collections.Generic.List<int>>();
        for (int i = 0; i < xx.GetLength(0); i++)
        {
            var row = new System.Collections.Generic.List<int>();
            for (int j = 0; j < xx.GetLength(1); j++)
            {
                row.Add(xx[i, j]);
            }
            list.Add(row);
        }

        // 使用JsonSerializer将List<List<int>>序列化为JSON字符串
        string jsonString = JsonSerializer.Serialize(list);
        Console.WriteLine($"C# serialized JSON: {jsonString}");
        return jsonString;
    }

    // 示例：传递一个字符串数组
    public string GetStringArrayAsJson()
    {
        string[] names = { "Alice", "Bob", "Charlie" };
        string jsonString = JsonSerializer.Serialize(names);
        Console.WriteLine($"C# serialized string array JSON: {jsonString}");
        return jsonString;
    }

    // 示例：传递一个匿名对象数组
    public string GetObjectArrayAsJson()
    {
        var users = new[]
        {
            new { Id = 1, Name = "Alice" },
            new { Id = 2, Name = "Bob" }
        };
        string jsonString = JsonSerializer.Serialize(users);
        Console.WriteLine($"C# serialized object array JSON: {jsonString}");
        return jsonString;
    }
}

// 假设C#的HostObject实例被命名为'control'并暴露给JavaScript
class WebView2HostInterface {
    async getArrayFromCSharp() {
        return new Promise(async (resolve, reject) => {
            try {
                // 调用C#方法，该方法返回一个JSON字符串
                let jsonString = await window.chrome.webview.hostObjects.control.GetArrayAsJson();
                console.log("Received JSON string from C#:", jsonString);

                // 使用JSON.parse()将JSON字符串解析为JavaScript数组
                let resultArray = JSON.parse(jsonString);
                console.log("Parsed JavaScript array:", resultArray);
                console.log("Type of parsed result:", typeof resultArray);
                console.log("Is it an array?", Array.isArray(resultArray));
                resolve(resultArray);
            } catch (error) {
                console.error("Error getting array from C#:", error);
                reject(error);
            }
        });
    }

    async getStringArrayFromCSharp() {
        return new Promise(async (resolve, reject) => {
            try {
                let jsonString = await window.chrome.webview.hostObjects.control.GetStringArrayAsJson();
                let resultArray = JSON.parse(jsonString);
                console.log("Parsed JavaScript string array:", resultArray);
                resolve(resultArray);
            } catch (error) {
                console.error("Error getting string array from C#:", error);
                reject(error);
            }
        });
    }

    async getObjectArrayFromCSharp() {
        return new Promise(async (resolve, reject) => {
            try {
                let jsonString = await window.chrome.webview.hostObjects.control.GetObjectArrayAsJson();
                let resultArray = JSON.parse(jsonString);
                console.log("Parsed JavaScript object array:", resultArray);
                resolve(resultArray);
            } catch (error) {
                console.error("Error getting object array from C#:", error);
                reject(error);
            }
        });
    }
}

// 示例调用
const hostInterface = new WebView2HostInterface();
hostInterface.getArrayFromCSharp().then(data => {
    console.log("Successfully received and parsed array:", data);
}).catch(err => {
    console.error("Failed to get array:", err);
});

hostInterface.getStringArrayFromCSharp().then(data => {
    console.log("Successfully received and parsed string array:", data);
});

hostInterface.getObjectArrayFromCSharp().then(data => {
    console.log("Successfully received and parsed object array:", data);
});