前端 JavaScript 通过 HTTP 请求调用 C# Web API，展示opcua节点

展示 OPC UA 节点可以分为以下几个步骤：

1. 前端 JavaScript 通过 HTTP 请求调用 C# Web API。

2. C# Web API 从 OPC UA 服务器中获取节点数据，并将数据以 JSON 格式返回给前端。

3. 前端 JavaScript 接收到返回的 JSON 数据后，解析数据并将数据渲染到 TreeView 中。

具体实现方式可以参照以下步骤：

1. 在 C# Web API 中使用 OPC UA 客户端库，如 Opc.Ua.Client，连接 OPC UA 服务器，并获取节点数据。

2. 将获取到的节点数据转换为 JSON 格式，并使用 HTTP 协议将 JSON 数据返回给前端。

3. 在前端 JavaScript 中，使用 jQuery 或原生的 XMLHttpRequest 对象发送 HTTP 请求，获取 C# Web API 返回的 JSON 数据。

4. 解析 JSON 数据，并将数据渲染到 TreeView 中显示。

下面是一个简单的代码示例：

C# Web API 代码：

using System.Collections.Generic;
using System.Web.Http;
using Opc.Ua.Client;

namespace OpcuaWebApi.Controllers
{
    public class NodesController : ApiController
    {
        private static readonly string ServerEndpointUrl = "opc.tcp://localhost:4840";
        private static readonly NodeId RootFolderId = ObjectIds.ObjectsFolder;

        // 获取节点数据
        [HttpGet]
        public IEnumerable<NodeModel> GetNodes()
        {
            var nodes = new List<NodeModel>();

            // 连接 OPC UA 服务器
            var endpoint = new EndpointDescription(ServerEndpointUrl);
            var config = EndpointConfiguration.Create();
            var selectedEndpoint = CoreClientUtils.SelectEndpoint(endpoint, config);
            var endpointConfiguration = EndpointConfiguration.Create(config);
            using (var session = Session.Create(endpointConfiguration, new ConfiguredEndpoint(null, selectedEndpoint, EndpointConfiguration.Create())))
            {
                session.Open();

                // 浏览节点
                var browseDescription = new BrowseDescription(RootFolderId, BrowseDirection.Forward, ReferenceTypeIds.HierarchicalReferences, true, NodeClass.Unspecified, uint.MaxValue);
                var browseResult = session.Browse(null, null, 0, browseDescription);

                // 处理节点数据
                foreach (var referenceDescription in browseResult.References)
                {
                    var node = new NodeModel
                    {
                        Id = referenceDescription.NodeId.ToString(),
                        Name = referenceDescription.BrowseName.Name
                    };
                    nodes.Add(node);
                }
            }

            return nodes;
        }
    }

    public class NodeModel
    {
        public string Id { get; set; }
        public string Name { get; set; }
    }
}

前端 JavaScript 代码：

// 发送 HTTP 请求
$.get("http://localhost:3000/api/nodes", function (data) {
  // 解析 JSON 数据
  var nodes = JSON.parse(data);
  // 渲染节点数据到 TreeView 中
  var treeView = $("#treeView").kendoTreeView({
    dataSource: nodes,
    dataTextField: "name",
    dataValueField: "id",
  }).data("kendoTreeView");
});

以上示例中，C# Web API 使用了 Opc.Ua.Client 库连接 OPC UA 服务器，并通过 ASP.NET Web API 提供 HTTP 服务。前端 JavaScript 使用了 jQuery 库发送 HTTP 请求，并使用 kendoTreeView 插件将节点数据渲染到 TreeView 中。