您的当前位置：首页>全部文章>文章详情

【C#】Winform NanUI 0.88版本 JS和C#相互调用

CrazyPanda发表于：2024-02-06 20:35:55浏览：370次TAG：

目录

一、需求

版本

二、实例

JS调用C#注册的只读属性

JS调用C#注册的字段

JS调用C#注册的同步方法

JS调用C#注册的异步方法

C#注册一个方法，JS调用并传递参数

C#注册一个方法，JS调用并接收C#返回值

C#注册一个方法，接收JS的数组参数

C#注册一个方法，接收JS的一个函数，执行这个JS函数，并将C#的值传递过去

三、结束


一、需求

在软件的界面和软件逻辑分离后，最重要的就是要处理参数的传递，和函数的调用，因此存在JS中和C#相互调用的需求。

版本

NanUI 版本：0.8.80.191


二、实例

using NetDimension.NanUI;
using NetDimension.NanUI.HostWindow;
using NetDimension.NanUI.JavaScript;
using System;
using System.Drawing;
using System.Linq;
using System.Reflection;
using System.Threading.Tasks;
using System.Windows.Forms;
 
namespace NanUI_0._88
{
    public class MainIndex : Formium
    {
        public override HostWindowType WindowType => HostWindowType.System;
 
        public override string StartUrl => @"C:\Users\Administrator\Desktop\View\index.html";
 
 
        protected override void OnReady()
        {
            Console.WriteLine("===============OnReady");
 
            //显示浏览器控制台
            ShowDevTools();
            //注册方法到JS
            MapClrObjectToJavaScript();
        }
 
 
        //当浏览器加载完成调用
        private void MainIndex_LoadEnd(object sender, NetDimension.NanUI.Browser.LoadEndEventArgs e)
        {
            Console.WriteLine("===============当浏览器加载完成调用");
           
            //执行JS代码
            ExecuteJavaScript("console.log('Hello NanUI')");
            //执行一个有返回值的JS方法
            InvokeIfRequired(async () =>
            {
                var result = await EvaluateJavaScriptAsync("(function(){ return '5';})()");
                if (result.Success)
                {
                    Console.WriteLine("===============返回值：" + result.ResultValue?.GetString());
                }
            });
        }
    
 
        //当浏览器关闭时
        private void MainIndex_BeforeClose(object sender, NetDimension.NanUI.Browser.FormiumCloseEventArgs e)
        {
            Console.WriteLine("===============当浏览器关闭时");
        }
 
        private void MapClrObjectToJavaScript()
        {
            var obj = JavaScriptValue.CreateObject();
 
            //注册只读属性
            obj.SetValue("now", JavaScriptValue.CreateProperty
                (
                    () => { return JavaScriptValue.CreateDateTime(DateTime.Now); }
                )
            );
 
            //注册值
            obj.SetValue("version", JavaScriptValue.CreateString
                (
                    Assembly.GetExecutingAssembly().GetName().Version?.ToString()
                )
            );
 
            //注册可读写属性
            obj.SetValue("subtitle", JavaScriptValue.CreateProperty
                (
                    () => JavaScriptValue.CreateString(Subtitle), title => Subtitle = title.GetString()
                )
            );
 
            //注册同步方法
            obj.SetValue("messagebox", JavaScriptValue.CreateFunction(args =>
            {
                var msg = args.FirstOrDefault(x => x.IsString);
                var text = msg?.GetString();
                InvokeIfRequired(() =>
                {
                    MessageBox.Show(HostWindow, text, "Message from JS", MessageBoxButtons.OK, MessageBoxIcon.Information);
                });
                return JavaScriptValue.CreateString(text);
            }));
 
            //注册异步方法
            obj.SetValue("asyncmethod", JavaScriptValue.CreateFunction((args, callback) =>
            {
                Task.Run(async () =>
                {
                    var rnd = new Random(DateTime.Now.Millisecond);
                    var rndValue = rnd.Next(1000, 2000);
                    await Task.Delay(rndValue);
                    var obj = JavaScriptValue.CreateObject();
                    obj.SetValue("delayed", JavaScriptValue.CreateNumber(rndValue));
                    obj.SetValue("message", JavaScriptValue.CreateString($"Delayed {rndValue} milliseconds"));
                    callback.Success(obj);
                });
            }));
 
            //接收JS的一个参数
            obj.SetValue("JsCallCSharp", JavaScriptValue.CreateFunction(args =>
                {
                    var res = args.FirstOrDefault(x => x.IsString);
                    MessageBox.Show(res.GetString());
                    return null;
                }
            ));
 
            //向JS返回一个字符串
            obj.SetValue("sayHi", JavaScriptValue.CreateFunction(args =>
                {
                    return JavaScriptValue.CreateString("fuck you!");
                }
            ));
 
            //接收来自JS的一个数组
            obj.SetValue("getArr", JavaScriptValue.CreateFunction(args =>
                {
                    var arr = args.FirstOrDefault(x => x.IsArray);
                    if (arr != null)
                    {
                        int len = arr.ArrayLength;
                        for (int i = 0; i < len; i++)
                        {
                            int v = arr.GetValue(i).GetInt();
                            Console.WriteLine("=============数组：" + v);
                        }
                    }
                    return null;
                }
            ));
 
            //接收JS的一个函数
            obj.SetValue("CallBack", JavaScriptValue.CreateFunction(args =>
               {
                   var res = args.FirstOrDefault(x => x.IsFunction);
                   if (res != null)
                   {
                       res.ExecuteFunctionAsync(GetMainFrame(),
                           new JavaScriptValue[] { JavaScriptValue.CreateString("Hello from C#") });
                   }
                   return null;
               }
            ));
 
            //对象注册到 JavaScript 环境的Formium.external里，并取名CSharpProject
            RegisterExternalObjectValue("CSharpProject", obj);
        }
 
        public MainIndex()
        {
            //当浏览器关闭时触发
            BeforeClose += MainIndex_BeforeClose;
            //当浏览器加载完成后调用
            LoadEnd += MainIndex_LoadEnd;
 
            Size = new Size(1280, 720);
            StartPosition = System.Windows.Forms.FormStartPosition.CenterScreen;
            Mask.BackColor = Color.White;
            Title = "NanUI 0.88版本";
            Icon = System.Drawing.Icon.ExtractAssociatedIcon("xxxx.exe");
            CanMaximize = false;//不允许使用最大化界面按钮
            Resizable = false;//窗体是否能够改变大小
        }
    }
}

上面这些方法可以在NanUI控制台执行JS


JS调用C#注册的只读属性

C#：

//注册只读属性
obj.SetValue("now", JavaScriptValue.CreateProperty
    (
        () => { return JavaScriptValue.CreateDateTime(DateTime.Now); }
    )
);

JS:

Formium.external.CSharpProject.now

运行：

20210129140851680.png


JS调用C#注册的字段

C#：

//注册值
obj.SetValue("version", JavaScriptValue.CreateString
    (
        Assembly.GetExecutingAssembly().GetName().Version?.ToString()
    )
);

JS:

Formium.external.CSharpProject.version

运行：
20210129140851680.png


JS调用C#注册的同步方法

C#：

//注册同步方法
obj.SetValue("messagebox", JavaScriptValue.CreateFunction(args =>
{
    var msg = args.FirstOrDefault(x => x.IsString);
    var text = msg?.GetString();
    InvokeIfRequired(() =>
    {
        MessageBox.Show(HostWindow, text, "Message from JS", MessageBoxButtons.OK, MessageBoxIcon.Information);
    });
    return JavaScriptValue.CreateString(text);
}));

JS:

Formium.external.CSharpProject.messagebox('oh shit')

运行：

20210129140851680.png

C#弹框：

20210129140851680.png


JS调用C#注册的异步方法

C#：

//注册异步方法
obj.SetValue("asyncmethod", JavaScriptValue.CreateFunction((args, callback) =>
{
    Task.Run(async () =>
    {
        var rnd = new Random(DateTime.Now.Millisecond);
        var rndValue = rnd.Next(1000, 2000);
        await Task.Delay(rndValue);
        var test = JavaScriptValue.CreateObject();
        test.SetValue("delayed", JavaScriptValue.CreateNumber(rndValue));
        test.SetValue("message", JavaScriptValue.CreateString($"Delayed {rndValue} milliseconds"));
        callback.Success(test);
    });
}));

JS:

Formium.external.CSharpProject.asyncmethod().success(time=>console.log(time));

运行：

20210129140851680.png


C#注册一个方法，JS调用并传递参数

C#：

//接收JS的一个参数
obj.SetValue("JsCallCSharp", JavaScriptValue.CreateFunction(args =>
    {
        var res = args.FirstOrDefault(x => x.IsString);
        MessageBox.Show(res.GetString());
        return null;
    }
));

JS:

Formium.external.CSharpProject.JsCallCSharp('oh shit');

运行：

20210129140851680.png

C# 弹框

20210129140851680.png


C#注册一个方法，JS调用并接收C#返回值

C#：

//向JS返回一个字符串
obj.SetValue("sayHi", JavaScriptValue.CreateFunction(args =>
    {
        return JavaScriptValue.CreateString("fuck you!");
    }
));

JS:

Formium.external.CSharpProject.sayHi();

运行：
20210129140851680.png


C#注册一个方法，接收JS的数组参数

C#：

//接收来自JS的一个数组
obj.SetValue("getArr", JavaScriptValue.CreateFunction(args =>
    {
        var arr = args.FirstOrDefault(x => x.IsArray);
        if (arr != null)
        {
            int len = arr.ArrayLength;
            for (int i = 0; i < len; i++)
            {
                int v = arr.GetValue(i).GetInt();
                Console.WriteLine("=============数组：" + v);
            }
        }
        return null;
    }
));

JS:

Formium.external.CSharpProject.getArr([1,3,5,7])

运行：
20210129140851680.png

C#这边打印数组：

20210129140851680.png


C#注册一个方法，接收JS的一个函数，执行这个JS函数，并将C#的值传递过去

C#：

//接收JS的一个函数
obj.SetValue("CallBack", JavaScriptValue.CreateFunction(args =>
   {
       var res = args.FirstOrDefault(x => x.IsFunction);
       if (res != null)
       {
           res.ExecuteFunctionAsync(GetMainFrame(),
               new JavaScriptValue[] { JavaScriptValue.CreateString("Hello from C#") });
       }
       return JavaScriptValue.CreateString("返回值~~~");
   }
));

JS:

Formium.external.CSharpProject.CallBack(function say(str) { console.log("C#的返回值：" + str);});

运行：

20210129140851680.png


三、结束

如果你这个帖子对你有用，欢迎给我点赞 + 留言，谢谢


原文链接https://blog.csdn.net/qq_38693757/article/details/113334277

上一篇：【C#】C# Winform 热更新 基于ECSharp框架

猜你喜欢

【C#】C# Winform 相册功能，图片缩放，拖拽，预览图分页
一、前言在一些项目中也会用到预览图片的功能，至于为什么有一个添加图片的按钮，是因为有些项目，比如视觉相关的项目，摄像头拍摄图片，然后显示在界面上，拍一次显示一张。另一个，就是分页功能，当预览图位置不够用时就会用到。当前软件的功能1.添加图片如果8个预览图都满了，会自动分页，就可以点击上一页，或者下一页了。2.点击预览图显示大图点击预览图，之前的拖拽和放大会自动复位3.大图可以拖拽，放大，缩小如果图片比较小，有这个功能就看到图片的更多细节了。4.图片倒序排列最后拍摄的图片，始终显示在前面，方便用户
发表于：2024-02-02 浏览：313 TAG：
【C#】Winform NanUI 0.88版本 用官方源码搭建原生态开发环境
目录一、需求二、搭建原生开发环境1.导入源码2.解决源码报错错误1错误23.导入其他项目4.官方Demo运行效果三、创建自己的NanUI项目1.新建项目2.导入NanUI.Runtime扩展包3.添加NanUI程序集的引用4.MainIndex主界面相关代码5.Program程序入口相关代码6.读取本地前端文件的处理四、测试项目效果五、结束一、需求NanUI 插件确实很方便，但想改其中的需求怎么办，下面就来自己搭建NanUI 原生开发环境，在此很感谢作者免费的开源。官方源码地址：GitHub -
发表于：2024-02-08 浏览：484 TAG：
【C#】C# Winform 定时清理日志
一、前言在 Winform 开发中经常有这样的需求，在用户执行一些操作不正确时，需要将错误信息反馈给用户，比如：登录密码不正确，无法连接到服务器等，一般常见的用法有两个：1.弹框使用&nbsp;MessageBox.Show(&quot;密码错误&quot;); 这样的方式，弹框后，用户必须点击确定后才能执行下一步操作，给用户的体验并不是特别好。2.在界面中显示错误信息，定时清除如果是输入框，直接用&nbsp;ErrorProvider 控件就行了。如果只是做一些简单的提示信息，那么就要定时清除
发表于：2024-01-31 浏览：297 TAG：
【C#】C# Winform 配置文件App.config
目录一、简介二、添加引用&nbsp;三、添加节点1.普通配置节点2.数据源配置节点四、管理类 ConfigHelper.cs1.获取配置节点2.更新或加入配置节点结束一、简介在C#中，配置文件很常用，ASP.NET 和 Winform 名称不同，用法一样，如下图config 文件通常用来存储一些需要修改的数据，比如用户名密码，连接数据库的IP地址等，而不是在代码中写死。有人可能会问，那我自己自定义一个配置文件也行，为什么要用它这个？区别当然有，微软自己封装的读取和写入会更简单一些，你自己封装的，
发表于：2024-01-31 浏览：374 TAG：
【C#】C#实现Excel合并单元格数据导入数据集
目录功能需求Excel与DataSet的映射关系范例运行环境Excel DCOM 配置设计实现组件库引入方法设计返回值&nbsp;参数设计打开数据源并计算Sheets拆分合并的单元格创建DataTable将单元格数据写入DataTable总结功能需求将Excel里的worksheet表格导入到DataSet里，是项目应用里常用的一种操作。一般情况下，worksheet是一个标准的二维数组，如下图：我们可以效仿 MS SQL SERVER 的一些基本导入选项，如首行是否包含数据，要导入哪个Shee
发表于：2024-01-29 浏览：346 TAG：
【C#】C# Winform ListView用法
目录添加标题显示网格添加数据到表格中自定义其他属性结束添加标题在 Winfrom 界面中添加一个 ListView 组件，然后点击右上角的箭头，点击编辑列添加下面标题，然后点击确定此时 ListView 中还是一片空白，不能显示这些标题，在视图这里选择 Details就会如下图所示，虽然标题出来了，内容确实一块白版，此时还是觉得 DataGridView 组件好用啊显示网格此时，表格只是一片空白，可以在属性面板中设置，显示网格，如下图&nbsp;&nbsp;这时，就如下图所示，效果就出来了，但是
发表于：2024-01-31 浏览：368 TAG：
【C#】C# Winfrom 常用功能整合-2
目录Winfrom&nbsp;启动一个外部exe文件，并传入参数Winform ListBox用法HTTP下载文件(推荐）Winform HTTP下载并显示进度Winform&nbsp;HTTP下载文件Winform&nbsp;跨线程访问UI组件Winform 改变文字的颜色和大小Winfrom&nbsp;启动一个外部exe文件，并传入参数在我们常用的一些软件中，经常有些软件，双击之后根本打不开，这是因为启动时做了限制，我们需要传入一些参数才能打开，在工作中，这个需求也可以用在软件的自动更新上，
发表于：2024-02-02 浏览：333 TAG：
【C#】C# System.Windows.Forms.DataVisualization Demo案例
简介DataVisualization 其实就是Winform 中自带的 Chart 控件，整个图形控件主要由以下几个部份组成：1.Annotations --图形注解集合2.ChartAreas&nbsp; --图表区域集合3.Legends&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --图例集合4.Series　　&nbsp; --图表序列集合（即图表数据对象集合）5.Titles　　　--图标的标题集合每个集合具体介绍，可以参考下面的帖子，看完了介绍，一定对你理解这个插件
发表于：2024-02-01 浏览：286 TAG：
【C#】从零开始用C#写一个桌面应用程序（二）一个表白程序
恶搞表白小程序如何添加按钮，如何添加属性和事件请移步前文。基础操作第一步：新建窗口&nbsp;&nbsp;在工具箱内找到label和button，拖到form上，设置它们的size属性，autosize属性，text属性。第二步：添加事件为了实现我们的效果，需要给三个按钮分别设计点击事件，鼠标移入事件，鼠标点下事件。分别为click,mouseenter,mousedown事件。第三步：实现移动逻辑this获取form对象，clientsize获取实时大小，使用随机数值，设置对应按钮位置。将对应
发表于：2024-01-30 浏览：294 TAG：
【C#】C#超急速举例入门-适用有C/C++语言基础
前提编程环境：vs2022电脑系统：win10学习目的：能看懂c#，不纠结各种细节，快速适应开发。入门篇程序结构变量类型类似c语言，不掌握细节，int，float，double都有。输入输出Console.WriteLine(&quot;变量0：{0}&quot;,&nbsp;para0); var&nbsp;a=Console.ReadLine();&nbsp;运算符几乎相同。sizeof();typeof();取地址，取值：&amp;，*；三元运算符： ？ ：判断类型：is强制转换：as。注
发表于：2024-01-30 浏览：340 TAG：
栏目分类全部>
标签云
#kodo #Git #协程 #RabbitMQ #网络服务器软件 #SQLAlchemy #acme #网页 #cropper #base64 #队列 #TIOBE #rpc #sessionstorage #memcached #Python #负载均衡 #composer #compact #antd
推荐文章
© 2023~2025 疯狂的熊猫 豫ICP备19023836号-4