winform因为其简陋的控件而为人所诟病,即使可以更改控件的样式,但操作繁琐而困难。好在其控件家族中有一个能兼容HTML的强大控件 — WebBrowser,该控件中可添加html文件,来实现对各种js插件的支持,例如layui、easyui,或者Echarts.js等等。来达到BS端网页程序的效果。
如下图所示的winform CS端程序:
说明:按钮为layui样式,图形为echarts.js插件样式,可实现图形数据的动态交互展示
要实现上图的效果,需要从最基础的WebBrowser控件中的Html与C#后台代码的数据交互说起。
<!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/>
发送数据按钮:<button id="button">发送数据</button>
</body>
</html>
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 初始化浏览器
///
/// 初始化浏览器
///
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位置)
#region 供外部js调用的方法
///
/// 供外部js调用的方法
///
///
///
public string functionForHtml(string mes)
{
// 将Html传递过来的数据设置到组件文本框中
textEdit1.Text = "收到Html的数据:" + mes;
// 返回给Html的数据
return "我已收到";
}
#endregion
<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>
#region C#区按钮点击事件
///
/// C#区按钮点击事件
///
///
///
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
<script type="text/javascript">
$("#text").val("123");
</script>
原理:是将在C#中处理好的数据,拼接成script脚本,再利用WebBrowser控件的AppendChild方法将拼接好的脚本追加到Html中进行渲染
// 设置input框的值
function setInputValue(str)
{
$("#text").val(str);
}
#region C#区按钮点击事件
///
/// C#区按钮点击事件
///
///
///
private void simpleButton1_Click(object sender, EventArgs e)
{
// 获取C#区文本框内的值
string str = textEdit1.Text;
//调用Html中的函数 setInputValue
webBrowser1.Document.InvokeScript("setInputValue",new object[] { str });
}
#endregion
原理:在C#后台代码中直接利用InvokeScript方法去调用Html中的函数,将要赋给html的值放到参数中。
优点:WebBrowser控件中添加Html可以实现各种网页端的css样式,可以加载各种js插件。
缺点:
1、将后台数据推到Html中时,在通过C#代码中拼接字符串的方法进行时。要是处理过于复杂的js脚本,容易出错。
2、该WebBrowser控件中的网页无法调试,所以排错很困难。