C# Winform WebBrowser控件中的Html与C#后台的数据交互

最新推荐文章于 2024-04-24 09:27:42 发布

poetry-code

最新推荐文章于 2024-04-24 09:27:42 发布

阅读量1.2w

点赞数 11

分类专栏： C# winform开发文章标签： WebBrowser winform html js

本文链接：https://blog.csdn.net/weixin_45237517/article/details/93602887

版权

C# winform开发专栏收录该内容

3 篇文章 1 订阅

订阅专栏

winform因为其简陋的控件而为人所诟病，即使可以更改控件的样式，但操作繁琐而困难。好在其控件家族中有一个能兼容HTML的强大控件 — WebBrowser，该控件中可添加html文件，来实现对各种js插件的支持，例如layui、easyui，或者Echarts.js等等。来达到BS端网页程序的效果。

如下图所示的winform CS端程序：
说明：按钮为layui样式，图形为echarts.js插件样式，可实现图形数据的动态交互展示

在这里插入图片描述

要实现上图的效果，需要从最基础的WebBrowser控件中的Html与C#后台代码的数据交互说起。

直接上步骤说明：

一、新建测试窗体

在这里插入图片描述

二、创建HTML文件

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
    <br/><br/>
    数据展示和采集：<input id="text" type="text"/><br/><br/>
    &nbsp;&nbsp;&nbsp;
    发送数据按钮：<button id="button">发送数据</button>
</body>
</html>

三、初始化WebBrowser控件并获取该Html的物理位置

将新建的HTML文件和jquery.js的属性设置成“始终复制” ，（不然WebBrowser读取不到该文件）
在窗体代码中初始化WebBrowser，并设置Url

using System;
using System.Windows.Forms;

namespace WebBrowerTest
{
    // 该注解的作用是让Html中的js代码可以调用C#中的函数
    [System.Runtime.InteropServices.ComVisible(true)]
    public partial class Form1 : Form
    {
        
        public Form1()
        {
            InitializeComponent();
            // 初始化浏览器
            this.initWebBrowser();
            // 设置WebBrower的Url
            string url_path = Environment.CurrentDirectory + "\\Html\\Sim_Html.html";
            webBrowser1.Url = new Uri(url_path);
        }

        #region 初始化浏览器
        /// <summary>
        /// 初始化浏览器
        /// </summary>
        private void initWebBrowser()
        {
            // 防止 WebBrowser 控件打开拖放到其上的文件。
            webBrowser1.AllowWebBrowserDrop = false;
            // 防止 WebBrowser 控件在用户右击它时显示其快捷菜单.
            webBrowser1.IsWebBrowserContextMenuEnabled = false;
            // 以防止 WebBrowser 控件响应快捷键。
            webBrowser1.WebBrowserShortcutsEnabled = false;
            // 以防止 WebBrowser 控件显示脚本代码问题的错误信息。    
            webBrowser1.ScriptErrorsSuppressed = true;
            // 这个属性比较重要，可以通过这个属性，把后台代码中的数据，传递到JS中，供内嵌的网页使用
            webBrowser1.ObjectForScripting = this;
        }
        #endregion
    }
}

说明：
1）类上的注解是为了Html中js可以调用该类中的方法
2）而设置webBrowser.ObjectForScripting = this;是为了能够让Html接受该类中拼接的js代码
3）新建的Html文件在项目中的位置如下图：（自行对应代码中获取的html位置）

在这里插入图片描述

启动程序，可看见html已经显示在WebBrowser控件中

四、Html中js代码调用C#后台代码中的函数并传递数据，且展示返回值

在主窗口代码中添加函数，供js调用

#region 供外部js调用的方法
/// <summary>
/// 供外部js调用的方法
/// </summary>
/// <param name="mes"></param>
/// <returns></returns>
public string functionForHtml(string mes)
{
    // 将Html传递过来的数据设置到组件文本框中
    textEdit1.Text = "收到Html的数据：" + mes;
    // 返回给Html的数据
    return "我已收到";
}
#endregion

在Html文件中添加如下js代码（按钮点击事件，调用C#代码中的方法）

<script type="text/javascript">
    // 按钮点击事件
    $("#button").click(function () {
        // 获取input输入框里的值
        var input_val = $("#text").val();
        // 调用主窗口中的方法 functionForHtml
        var result = window.external.functionForHtml(input_val);
        // 弹框显示返回值
        alert("收到来自C#代码的反馈信息：" + result);
    })
</script>

启动程序后，在html区的文本框内写入：123，点击“发送数据”按钮
结果：C#区的文本框中显示从Html中传递过来的数据，并返回“我已收到”给Html网页弹框显示。

在这里插入图片描述

五、主窗口C#代码往Html页面设置js代码块，并渲染页面（两种方法）

《一》

在主窗口的C#代码中添加C#区按钮点击事件

#region C#区按钮点击事件
/// <summary>
/// C#区按钮点击事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void simpleButton1_Click(object sender, EventArgs e)
{
    // 获取C#区文本框内的值
    string textEdit_val = textEdit1.Text;
    // 创建js脚本
    HtmlElement script = webBrowser1.Document.CreateElement("script");
    script.SetAttribute("type", "text/javascript");
    StringBuilder js = new StringBuilder();
    js.AppendFormat("$('#text').val({0})",textEdit_val);
    script.SetAttribute("text", js.ToString());
    // 将创建好的js脚本加载到Html最后，并渲染
    webBrowser1.Document.Body.AppendChild(script);
}
#endregion

启动程序，在C#区的文本框中输入：123，点击“发送数据”
结果：Html#区的文本框中显示从C#后台代码中传递过来的数据。

在这里插入图片描述
说明：上面按钮点击事件中创建的js代码如下

<script type="text/javascript">
    $("#text").val("123");
</script>

原理：是将在C#中处理好的数据，拼接成script脚本，再利用WebBrowser控件的AppendChild方法将拼接好的脚本追加到Html中进行渲染

《二》

在Html中添加设置input文本框的方法

// 设置input框的值
function setInputValue(str)
{
    $("#text").val(str);
}

在主窗口的C#代码中添加C#区按钮点击事件

#region C#区按钮点击事件
/// <summary>
/// C#区按钮点击事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void simpleButton1_Click(object sender, EventArgs e)
{
    // 获取C#区文本框内的值
    string str = textEdit1.Text;
    //调用Html中的函数 setInputValue
    webBrowser1.Document.InvokeScript("setInputValue",new object[] { str });
}
#endregion

启动程序，在C#区的文本框中输入：666，点击“发送数据”

在这里插入图片描述
原理：在C#后台代码中直接利用InvokeScript方法去调用Html中的函数，将要赋给html的值放到参数中。

总结：

优点：WebBrowser控件中添加Html可以实现各种网页端的css样式，可以加载各种js插件。
缺点：
1、将后台数据推到Html中时，在通过C#代码中拼接字符串的方法进行时。要是处理过于复杂的js脚本，容易出错。
2、该WebBrowser控件中的网页无法调试，所以排错很困难。

poetry-code

关注

11
点赞
踩
67

收藏

觉得还不错? 一键收藏
14
评论
C# Winform WebBrowser控件中的Html与C#后台的数据交互

winform因为其简陋的控件而为人所诟病，即使可以更改控件的样式，但操作繁琐而困难。好在其控件家族中有一个能兼容HTML的强大控件 --- WebBrowser，该控件中可添加html文件，来实现对各种js插件的支持，例如layui、easyui，或者Echarts.js等等。来达到BS端网页程序的效果。
复制链接

扫一扫