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

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的物理位置
  1. 将新建的HTML文件和jquery.js的属性设置成“始终复制” ,(不然WebBrowser读取不到该文件)

    在这里插入图片描述

  2. 在窗体代码中初始化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位置)

在这里插入图片描述

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

    在这里插入图片描述


四、Html中js代码调用C#后台代码中的函数并传递数据,且展示返回值
  1. 在主窗口代码中添加函数,供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
  1. 在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>
  1. 启动程序后,在html区的文本框内写入:123,点击“发送数据”按钮
    结果:C#区的文本框中显示从Html中传递过来的数据,并返回“我已收到”给Html网页弹框显示。

在这里插入图片描述


五、主窗口C#代码往Html页面设置js代码块,并渲染页面(两种方法)
《一》
  1. 在主窗口的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
  1. 启动程序,在C#区的文本框中输入:123,点击“发送数据”
    结果:Html#区的文本框中显示从C#后台代码中传递过来的数据。

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

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

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

《二》
  1. 在Html中添加设置input文本框的方法
// 设置input框的值
function setInputValue(str)
{
    $("#text").val(str);
}
  1. 在主窗口的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
  1. 启动程序,在C#区的文本框中输入:666,点击“发送数据”

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


总结:

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

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页