如何实现.NET混合开发中网页JS调用C#代码的解决方案？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1218个文字，预计阅读时间需要5分钟。
系列目录【已更新最新开发文章，点击查看详情】+ WebView2控件应用详解系列博客+.NET桌面程序集成Web网页开发的十种解决方案+.NET混合开发解决方案1+WebView2简介+.NET混合开发解决方案2
系列目录WebView2控件应用详解系列博客
.NET桌面程序集成Web网页开发的十种解决方案
.NET混合开发解决方案1 WebView2简介
.NET混合开发解决方案2 WebView2与Edge浏览器的区别
.NET混合开发解决方案3 WebView2的进程模型
.NET混合开发解决方案4 WebView2的线程模型
.NET混合开发解决方案5 WebView2运行时与分发应用
.NET混合开发解决方案6检测是否已安装合适的WebView2运行时.NET混合开发解决方案7 WinForm程序中通过NuGet管理器引用集成WebView2控件
.NET混合开发解决方案8 WinForm程序中通过设置固定版本运行时的BrowserExecutableFolder属性集成WebView2控件
.NET混合开发解决方案9 WebView2控件的导航事件
.NET混合开发解决方案10 WebView2控件调用网页JS方法
.NET混合开发解决方案11 网页JS调用C#方法
在前一篇博客《.NET混合开发解决方案11 网页JS调用C#方法》中介绍了JS访问C#方法的简单实现方式。但是在企业级应用软件中业务需求可能更加复杂，如JS调用C#方法之后，需要访问宿主的窗体，设置窗体（WinForm、WPF、WinUI、Win32）中的控件等。
下面通过一个Demo来讲解如何实现JS调用C#方法。
业务场景：JS调用C#方法，传递三个参数，分别是num1、num2、message。C#接收到参数后，调用WinFrom窗体中定义的方法，将num1与num2作为参数传入，并将计算结果显示在窗体控件上。
先看一下示例效果
下面详细介绍其实现步骤。
步骤11、在Frm4JSCallWinForm窗体上添加一个label，用于显示计算结果，默认值为0，且颜色为黑色。
2、Frm4JSCallWinForm窗体后台代码中添加如下逻辑方法
步骤2在主机对象中定义 TestCallCSharpWinForm() 方法，该方法中访问 Frm4JSCallWinForm 窗体中的 SetResultFromWeb() 方法
在普通的类中如访问一个窗体有两种方式
第一种是使用窗体类来实例化一个对象
Frm4JSCallWinForm form = new Frm4JSCallWinForm();
第二种方式直接使用窗体已经实例化之后的对象。
窗体已经运行，说明已经实例化了，如果采用第一种方式，那么新创建的对象与正在运行的窗体对象不是同一个对象，即使访问到窗体中定义的方法也无法更新当前窗体上的控件属性。所以必须采用第二种方式。
CustomWebView2HostObject 类 与 窗体Frm4JSCallWinForm 类是两个独立的类，CustomWebView2HostObject 类无法直接获取当前正在运行的Frm4JSCallWinForm 对象，我们知道一个类中的静态变量或属性可以通过类名称直接访问，这里通过一个巧妙的方式来实现，即在 Frm4JSCallWinForm窗体中定义一个公开的静态的 Frm4JSCallWinForm对象，在构造函数中赋值为当前运行的对象值。
此时在外部任何类中都可以通过Frm4JSCallWinForm.Instance 访问到当前运行的窗体对象。
步骤3在访问目标网页之前，通过webView2.CoreWebView2.AddHostObjectToScript()方法向网页中注入主机对象，其中第一个参数是自定义名称（随意命名），JS中访问主机对象时就需要与该参数名称一致。
步骤4网页中定义一个测试按钮，并设置点击事件
点击事件中，第43行获取主机对象，customWebView2HostObject 与 C#中定义的名称需要完全相同。
使用主机对象调用C#方法，由于调用过程是异步的，所以需要使用 await，方法定义前需要加上 async。
以上四步完成后即实现了JS访问窗体方法。
系列目录成在管理，败在经验；嬴在选择，输在不学！ 贵在坚持！
欢迎关注作者头条号 张传宁IT讲堂，获取更多IT文章、视频等优质内容。
个人作品
BIMFace.SDK.NET
开源地址：gitee.com/NAlps/BIMFace.SDK
系列博客：www.cnblogs.com/SavionZhang/p/11424431.html
系列视频：www.cnblogs.com/SavionZhang/p/14258393.html
技术栈
1、Visual Studio、.C#/.NET、.NET Core、MVC、Web API、RESTful API、gRPC、SignalR、Python
2、jQuery、Vue.js、Bootstrap
3、数据库：SQLServer、MySQL、PostgreSQL、Oracle、SQLite、Redis、MongoDB、ElasticSearch、TiDB、达梦DM、人大金仓、 神通、南大通用 GBase
4、ORM：Dapper、Entity Framework、FreeSql、SqlSugar、分库分表、读写分离
5、架构：领域驱动设计 DDD、ABP
6、环境：跨平台、Windows、Linux（CentOS、麒麟、统信UOS、深度Linux）、maxOS、IIS、Nginx
7、移动App：Android、IOS、HarmonyOS、微信、小程序、uni-app、MUI、Xamarin、Smobiler
云原生、微服务、Docker、CI/CD、DevOps、K8S；
Dapr、RabbitMQ、Kafka、分布式、大数据、高并发、负载均衡、中间件、RPC、ELK；
.NET + Docker + jenkins + Github + Harbor + K8S；
出处：www.cnblogs.com/SavionZhang
本文共计1218个文字，预计阅读时间需要5分钟。
系列目录【已更新最新开发文章，点击查看详情】+ WebView2控件应用详解系列博客+.NET桌面程序集成Web网页开发的十种解决方案+.NET混合开发解决方案1+WebView2简介+.NET混合开发解决方案2
系列目录WebView2控件应用详解系列博客
.NET桌面程序集成Web网页开发的十种解决方案
.NET混合开发解决方案1 WebView2简介
.NET混合开发解决方案2 WebView2与Edge浏览器的区别
.NET混合开发解决方案3 WebView2的进程模型
.NET混合开发解决方案4 WebView2的线程模型
.NET混合开发解决方案5 WebView2运行时与分发应用
.NET混合开发解决方案6检测是否已安装合适的WebView2运行时.NET混合开发解决方案7 WinForm程序中通过NuGet管理器引用集成WebView2控件
.NET混合开发解决方案8 WinForm程序中通过设置固定版本运行时的BrowserExecutableFolder属性集成WebView2控件
.NET混合开发解决方案9 WebView2控件的导航事件
.NET混合开发解决方案10 WebView2控件调用网页JS方法
.NET混合开发解决方案11 网页JS调用C#方法
在前一篇博客《.NET混合开发解决方案11 网页JS调用C#方法》中介绍了JS访问C#方法的简单实现方式。但是在企业级应用软件中业务需求可能更加复杂，如JS调用C#方法之后，需要访问宿主的窗体，设置窗体（WinForm、WPF、WinUI、Win32）中的控件等。
下面通过一个Demo来讲解如何实现JS调用C#方法。
业务场景：JS调用C#方法，传递三个参数，分别是num1、num2、message。C#接收到参数后，调用WinFrom窗体中定义的方法，将num1与num2作为参数传入，并将计算结果显示在窗体控件上。
先看一下示例效果
下面详细介绍其实现步骤。
步骤11、在Frm4JSCallWinForm窗体上添加一个label，用于显示计算结果，默认值为0，且颜色为黑色。
2、Frm4JSCallWinForm窗体后台代码中添加如下逻辑方法
步骤2在主机对象中定义 TestCallCSharpWinForm() 方法，该方法中访问 Frm4JSCallWinForm 窗体中的 SetResultFromWeb() 方法
在普通的类中如访问一个窗体有两种方式
第一种是使用窗体类来实例化一个对象
Frm4JSCallWinForm form = new Frm4JSCallWinForm();
第二种方式直接使用窗体已经实例化之后的对象。
窗体已经运行，说明已经实例化了，如果采用第一种方式，那么新创建的对象与正在运行的窗体对象不是同一个对象，即使访问到窗体中定义的方法也无法更新当前窗体上的控件属性。所以必须采用第二种方式。
CustomWebView2HostObject 类 与 窗体Frm4JSCallWinForm 类是两个独立的类，CustomWebView2HostObject 类无法直接获取当前正在运行的Frm4JSCallWinForm 对象，我们知道一个类中的静态变量或属性可以通过类名称直接访问，这里通过一个巧妙的方式来实现，即在 Frm4JSCallWinForm窗体中定义一个公开的静态的 Frm4JSCallWinForm对象，在构造函数中赋值为当前运行的对象值。
此时在外部任何类中都可以通过Frm4JSCallWinForm.Instance 访问到当前运行的窗体对象。
步骤3在访问目标网页之前，通过webView2.CoreWebView2.AddHostObjectToScript()方法向网页中注入主机对象，其中第一个参数是自定义名称（随意命名），JS中访问主机对象时就需要与该参数名称一致。
步骤4网页中定义一个测试按钮，并设置点击事件
点击事件中，第43行获取主机对象，customWebView2HostObject 与 C#中定义的名称需要完全相同。
使用主机对象调用C#方法，由于调用过程是异步的，所以需要使用 await，方法定义前需要加上 async。
以上四步完成后即实现了JS访问窗体方法。
系列目录成在管理，败在经验；嬴在选择，输在不学！ 贵在坚持！
欢迎关注作者头条号 张传宁IT讲堂，获取更多IT文章、视频等优质内容。
个人作品
BIMFace.SDK.NET
开源地址：gitee.com/NAlps/BIMFace.SDK
系列博客：www.cnblogs.com/SavionZhang/p/11424431.html
系列视频：www.cnblogs.com/SavionZhang/p/14258393.html
技术栈
1、Visual Studio、.C#/.NET、.NET Core、MVC、Web API、RESTful API、gRPC、SignalR、Python
2、jQuery、Vue.js、Bootstrap
3、数据库：SQLServer、MySQL、PostgreSQL、Oracle、SQLite、Redis、MongoDB、ElasticSearch、TiDB、达梦DM、人大金仓、 神通、南大通用 GBase
4、ORM：Dapper、Entity Framework、FreeSql、SqlSugar、分库分表、读写分离
5、架构：领域驱动设计 DDD、ABP
6、环境：跨平台、Windows、Linux（CentOS、麒麟、统信UOS、深度Linux）、maxOS、IIS、Nginx
7、移动App：Android、IOS、HarmonyOS、微信、小程序、uni-app、MUI、Xamarin、Smobiler
云原生、微服务、Docker、CI/CD、DevOps、K8S；
Dapr、RabbitMQ、Kafka、分布式、大数据、高并发、负载均衡、中间件、RPC、ELK；
.NET + Docker + jenkins + Github + Harbor + K8S；
出处：www.cnblogs.com/SavionZhang