Demo要求
1、在页面上设计一个计算器的相关按钮；
2、从本地读取xml并解析展示在页面上（xml中的内容自拟）；
3、在页面上显示需要计算的数值，然后在后台计算好传到页面上显示，实现winform与js的交互；
下面给出Demo的例子：可能会有Bug大家勿喷
步骤：
新建一个Windows窗体应用程序：Form1
新建一个html文件（关于计算页面的）tang.htm
新建xml文件（后台程序重xml文件中读取内容）first.xml
运行截图
1.窗体程序代码
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.Text.RegularExpressions;
using System.Xml.Linq;
using System.IO;
namespace WinForms2
{
//在被调用方法类上加上[ComVisible(true)]标签，意思就是当前类可以以com组件的形式供外包调用
[System.Security.Permissions.PermissionSet(System.Security.Permissions.SecurityAction.Demand, Name = "FullTrust")]
[System.Runtime.InteropServices.ComVisible(true)]
public partial class Form1 : Form
{
//在他的构造方法里写代码
public Form1()
{
InitializeComponent();
//第一种：打开项目路径中的htm文件 // Application.StartupPath + "\\" + "test.htm";
//需要将html文件放在debug文件下面 使用DirectoryInfo需要导入 using System.IO;
DirectoryInfo mDir = new DirectoryInfo(Application.StartupPath);
DirectoryInfo mDirF = mDir.Parent.Parent;
//MessageBox.Show(mDirF.FullName);
string pathName = mDirF.FullName + "\\" + "tang.htm"；
//初始化webBrowser，保证js和C#通信
this.webBrowser1.ObjectForScripting = this;
//加载指定网页资源
webBrowser1.Navigate(pathName);
//调用自定的方法读取xml文件中的内容
getXml();
}
string title = "";
//读取xml中的文件
public void getXml()
{
//将XML文件加载进来 XDocument这个要想不报错，要导入using System.Xml.Linq;
try {
//将XML文件加载进来 为了写文件路径的\不要加转义符而在前面加上@标识符
XDocument document = XDocument.Load("../../first.xml");
//获取到XML的根元素进行操作
// XDocument document = XDocument.Load(Application.StartupPath + "\\" + "first.xml");
XElement root = document.Root;
XElement ele = root.Element("Note");
//获取info标签的值
XElement info = ele.Element("info");
title = info.Value;
}catch (Exception e){
MessageBox.Show(e.Message);
}
}
object obj="";
public string Computer(String str)
{
//因为反斜杠需要转义，所以会有两个\\ 这是检查传入的字符串是否符合运算规则
string pattern = "^-{0,}\\d+(\\.*\\d{0,})([+*/-]\\d+(\\.*\\d{0,}))+$";
Regex re = new Regex(pattern);
//判断传入的字符串是否正则表达式的规则
if(re.IsMatch(str))
{ //如果匹配则进行计算
DataTable dt = new DataTable();
obj=(dt.Compute(str, ""));
//MessageBox.Show(obj.ToString());
}
if (obj.ToString().Equals("正无穷大")){
return "分母不能为0";
}else {
return obj.ToString();
}
}
private void Form1_Load(object sender, EventArgs e)
{
//禁止使用最大化按钮
this.MaximizeBox = false;
//改变窗体风格，使之不能用鼠标拖拽改变大小
this.FormBorderStyle = FormBorderStyle.FixedSingle;
}
private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
// winform后台可以通过语句：
//webBrowser1.Document.InvokeScript("loadInfo", new object[] {参数1，...，参数m});
//调用javascript函数loadInfo，实现将数据传到网页中；
if (webBrowser1.Document != null)
{
webBrowser1.Document.InvokeScript("showTitle", new object[] { title});
}
}
}
}
2.html页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
#Text1
{
height: 116px;
width: 467px;
}
#title
{
height: 50px;
width: 467px;
border:none;
background-color:transparent;
}
.style1
{
width: 115px;
}
.cs1
{
width: 115px;
height:60px;
font-size:larger;
}
.cs2
{
width: 115px;
height:120px;
background-color:#EE7700 ;
}
</style>
</head>
<body>
<div style="height: 442px; width: 469px">
<input id="title" type="button" style="font-size:20px"/>
<input id="Text1" type="text" style="font-size:20px" readonly="readonly"/>
<table style="width: 100%; height: 282px;">
<tr>
<td>
<input class="cs1" id="ac" type="button" value="AC" onclick="jisuan(this.id)"/></td>
<td >
<input class="cs1" id="<-" type="button" value="<-" onclick="jisuan(this.id)"/></td>
<td >
<input class="cs1" id="/" type="button" value="/" onclick="jisuan(this.id)"/></td>
<td>
<input class="cs1" id="*" type="button" value="*" onclick="jisuan(this.id)"/></td>
</tr>
<tr>
<td>
<input class="cs1" id="7" type="button" value="7" onclick="jisuan(this.id)"/></td>
<td>
<input class="cs1" id="8" type="button" value="8" onclick="jisuan(this.id)"/></td>
<td>
<input class="cs1" id="9" type="button" value="9" onclick="jisuan(this.id)"/></td>
<td>
<input class="cs1" id="-" type="button" value="-" onclick="jisuan(this.id)"/></td>
</tr>
<tr>
<td>
<input class="cs1" id="4" type="button" value="4" onclick="jisuan(this.id)"/></td>
<td>
<input class="cs1" id="5" type="button" value="5" onclick="jisuan(this.id)"/></td>
<td>
<input class="cs1" id="6" type="button" value="6" onclick="jisuan(this.id)"/></td>
<td>
<input class="cs1" id="+" type="button" value="+" onclick="jisuan(this.id)"/></td>
</tr>
<tr>
<td>
<input class="cs1" id="1" type="button" value="1" onclick="jisuan(this.id)"/></td>
<td>
<input class="cs1" id="2" type="button" value="2" onclick="jisuan(this.id)"/></td>
<td>
<input class="cs1" id="3" type="button" value="3" onclick="jisuan(this.id)"/></td>
<td rowspan="2">
<input class="cs2" id="=" type="button" value="=" onclick="jisuan(this.id)"/></td>
</tr>
<tr>
<td>
<input class="cs1" id="%" type="button" value=""/></td>
<td>
<input class="cs1" id="0" type="button" value="0" onclick="jisuan(this.id)"/></td>
<td>
<input class="cs1" id="." type="button" value="." onclick="jisuan(this.id)"/></td>
</tr>
</table>
</div>
</body>
<script type="text/javascript" language="javascript">
var flag = 1;
//在计算开始就赋值为0，是为了防止用户在一开始时摁运算符出现错误。
var result = "0";
document.getElementById('Text1').value = result;
//点击按钮触发事件，获取用户输入的数据
function jisuan(num) {
switch (num) {
case "=":
//取得输入字符串中的最后一个字符
var temp1 = result.charAt(result.length - 1);
if ((temp1 == "+") || (temp1 == "-") || (temp1 == "*") || (temp1 == "/") || (temp1 == ".")) {
result = "0";
document.getElementById('Text1').value = result;
} else {
//window.external.myFunction();调用后台C#中的自己定义的方法myFunction（）
result = window.external.Computer(result);
if (result == ""){
document.getElementById('Text1').value = "0";
} else {
document.getElementById('Text1').value = result;
}
}
break;
case "ac": //用户按清除按钮时
result = "0";
document.getElementById('Text1').value = result;
break;
case "<-": //用户按回删按钮的处理
//切割字符串，不保留最后一个字符
result = result.toString().slice(0, result.toString().length - 1);
if (result != "") {//如果输入的数据全部回删完，显示0
document.getElementById('Text1').value = result;
} else {
document.getElementById('Text1').value = "0";
}
break;
case "+":
case "-":
case "*":
case "/":
case "%":
case ".":
result = result + num;
if (result == ".") {
result = "0.";
}
//取得输入字符串中的最后一个字符
var temp1 = result.charAt(result.length - 1);
//取得输入字符串中的倒数第二个字符
var temp2 = result.charAt(result.length - 2);
var temp = "";
var temp_pre = "";
//对最后一个字符为 . 进行处理
if (temp1 == ".") {
if (result.length == 3) {//解决2..这样的输入问题
temp = result.substring(0, result.length);
} else {//解决2.3.这样的问题
temp = result.substring(0, result.length - 1);
}
for (var i = temp.length; i > 0; i--) {
/*从输入的字符串中反着找+-*等运算符，只要找到了任意一个就break，
将字符串根据运算符进行切割
*/
if ((result.substring(i - 1, i) == "+") || (result.substring(i - 1, i) == "-") || (result.substring(i - 1, i) == "*") || result.substring(i - 1, i) == "/") {
temp_pre = temp.substring(0, i + 1);
temp = temp.substring(i + 1, temp.length);
break;
}
}
//对切割后运算符右边的字符串进行.的处理
//temp.indexOf("."); 返回的是.的标索引，如果没有则返回-1
if (temp.indexOf(".") != -1) { //如果运算符后面的字符串中也包含.，则不能输入
result = temp_pre + temp;
}
}
/*
match(参数)参数是一个正则表达式，可以理解为：比较一个变量是否为数组中的一个元素
表示只含有+-*%/.这六种情况，因为/ *等有特殊含义，故需要转义
如果两个连续字符是+-*%/.中的一种则要进行约束，以最后出现的字符代替前一个字符，
比如：2+9-+则会修改为2+9+
*/
if (temp1.match(/^[+-\/\*]$/) && temp2.match(/^[+-\/\*]$/)) {
//先切割字符串，再拼接
result = result.slice(0, result.length - 2).concat(temp1);
}
document.getElementById('Text1').value = result;
break;
default:
if (result == "0") {//最开始当用户输入数字时，0会被替换成数字
result = num;
} else {
result = result + num;
}
document.getElementById('Text1').value = result;
}
}
//显示xml文件中的方法
function showTitle(val) {
document.getElementById('title').value = val;
}
</script>
</html>
3.first.xml文件
<?xml version="1.0" encoding="gb2312"?>
<computer id="30">
<Note id="20">
<info>C#牌计算器</info>
</Note>
</computer>
4.运行截图