从 JavaScript 访问 C# 列表

Posted

技术标签:

【中文标题】从 JavaScript 访问 C# 列表【英文标题】:Access C# List from JavaScript 【发布时间】:2019-07-21 03:55:41 【问题描述】:

作为实习的一部分,我们的任务是使用 Unity WebGL 创建一个业务应用程序。在阅读了 JS 和 C# 代码之间的交互之后,我们陷入了困境。 我们正在尝试从 C# 中取回一个列表以填充我们网页上的 Select,但我们只是不知道该怎么做。我们遵循 Unity 文档,可以轻松地从我们的网页进行交流和取回数据以在我们的 C# 中使用。 但是,我们无法在浏览器中访问 C# 数据。 SendMessage() 方法不允许返回。 到目前为止,这是我们的代码

index.html

          <select id="wallsSelect"></select>

js文件

    function getWallsList() 
    //function is called at the creation of our object
    var wallsSelect = document.getElementById("wallsSelect");
    index = 0;
    var wallsList = gameInstance.SendMessage('WallCreator', 'GetGameObjects'); //would like to get back our list of walls and populate our Select with it

    for (item in wallsList) 
        var newOption = document.createElement("option");
        newOption.value = index;
        newOption.innerHTML = item;

        wallsSelect.appendChild(newOption);
        index++;
    

C#代码终于

public List<string> GetGameObjects()

    List<string> goNames = new List<string>();
    foreach (var item in goList)
    
        goNames.Add(item.name);
    
    Debug.Log("Accessed GetGameObjects method. GameObject count = " + goNames.Count.ToString()); //The object is instanciated and return the right count number so it does work without a problem
    return goNames;


是的,我们确实检查了https://docs.unity3d.com/Manual/webgl-interactingwithbrowserscripting.html,并且我进行了大量研究,发现了一些有趣的资源,因为经验不足,我无法理解,例如http://tips.hecomi.com/entry/2014/12/08/002719

最后,我想指出这是我们的第一个“现实世界”项目,Unity-WebGL 是一种很好的体验,因为它可以看到缺乏文档。

【问题讨论】:

【参考方案1】:

好的,在广泛阅读 Unity 文档并获得我们技术主管的帮助后,我获得了“足够好”的解决方案。

Unity 为您提供了一种从 C# 代码调用 JS 函数以与 Unity 模块所在的 HTML 页面进行通信的方法。我必须创建一个可序列化的“虚拟”类,并且只存储对象的名称和坐标。

C#代码

 //We create a class with the Serializable attribute and stock the name and size of our GameObject 

[Serializable]
    public class SzModel
    
        public string modelName;
        public Vector3 modelSize;
    

//we have to import our .jslib method into our C# (see below)
    [DllImport("__Internal")]
    private static extern void UpdateModel(string model);

//We use our dummy class to create a JSON parseable list of those objects
    void WallsList()
    
        List<SzModel> szModelList = new List<SzModel>();
        foreach (var item in goList)
        
            SzModel newWall = new SzModel();
            newWall.modelName = item.Name;
            newWall.modelSize = item.Size;
            szModelList.Add(newWall);
        

        UpdateModel(JsonHelper.ToJson<SzModel>(szModelList.ToArray(), true));
    

//We create an helper class to be able to use JsonUtility on list
//code can be found here -> https://***.com/a/36244111/11013226

之后,我们需要通知我们的 HTML 页面新对象,我们使用 UpdateModel() 方法来做到这一点。 Unity 使用 .jslib 文件在 C#(在构建时转换为 JS 代码)和我们的浏览器之间进行通信。所以我们可以在这个 .jslib 文件中声明一个函数。这些文件位于 Asset/Plugins 中,并在构建时自动转换。正如您在下面看到的,我们必须使用 Pointer_stringify 方法来获取我们的 json 数据,而不仅仅是指向它的指针。

.jslib 文件

mergeInto (LibraryManager.library, 

    UpdateModel : function(model)
        model = Pointer_stringify(model);
        updateModel(model);
    ,
//rest of code
);

最后我可以在我的网页中使用我的 json 数据,在这种情况下显示墙壁名称的列表。

function updateModel(model) 
    var jsonWallsList = JSON.parse(model);
    var wallsList = document.getElementById("wallsSelect"),
        option,
        i = jsonWallsList.Items.length - 1,
        length = jsonWallsList.Items.length;

    for (; i < length; i++) 
        option = document.createElement('option');
        option.setAttribute('value', jsonWallsList.Items.modelName);
        option.appendChild(document.createTextNode(jsonWallsList.Items[i]['modelName']));
        wallsList.appendChild(option);
    

在我的网页上的选择中给出以下内容

【讨论】:

【参考方案2】:

我认为您应该尝试在 html 中使用可以使用 C# 修改的隐藏字段。然后,您可以使用 javascript 访问该数据。例如:

HTML:

<input type="hidden" value="currentValue" id="hiddenField1">

C#:

private void changeHiddenField()

    hiddenField1.Value = "differentValue";


JS:

var hiddenFieldVal = document.getElementById("hiddenField1").value;

有关 HTML 中隐藏字段的更多信息https://www.w3schools.com/tags/att_input_type_hidden.asp

请原谅任何语法错误。

【讨论】:

以上是关于从 JavaScript 访问 C# 列表的主要内容,如果未能解决你的问题,请参考以下文章

将列表字符串从 C# 传递到 JavaScript

将 C# 列表转换为 javascript 数组

从 C# 代码内部访问 F# 列表

C# Websockets 将序列化列表发送到 javascript

将 Javascript 数组转换为 C# 列表

如何使用对象 MVC 5 C# 的 Javascript 列表填充剃刀 DropDownListFor