在写windows窗体应用的时候，每次设计的窗体在复用的时候比较麻烦，受到MVC项目的启发，就在想是否可以把UI层分离出来，也就有了我这个尝试，用Html写UI层。当然，windows窗体开发也可以选择用WPF，但是那个需要一定的学习，用Html来做渲染，有个好处可以和web端复用。下面是我的个人的自己尝试，没有见到有正式的项目这么用。
主要涉及到和html之间数据交互和事件响应的处理。
我写了个Demo以供交流学习。如下图所示，是我的程序结构。
程序的主题部分：
public partial class Index : Form
{
public Index()
{
InitializeComponent();
this.webBrowser.ScriptErrorsSuppressed = true; //禁用错误脚本提示
this.webBrowser.IsWebBrowserContextMenuEnabled = false; // 禁用右键菜单
this.webBrowser.WebBrowserShortcutsEnabled = false; //禁用快捷键
this.webBrowser.AllowWebBrowserDrop = false; // 禁止文件拖动
this.webBrowser.Navigate("E:/Project/WinWithHtml/WinWithHtml/Content /Html/HTMLPage.html");
}
private void webBrowser_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
//订阅html按钮事件
this.webBrowser.Document.All["btnClouse"].Click += new HtmlElementEventHandler(html_btnClouse_Click);
this.webBrowser.Document.All["firstpage"].Click += new HtmlElementEventHandler(html_btnChangePage_Click);
this.webBrowser.Document.All["lastpage"].Click += new HtmlElementEventHandler(html_btnChangePage_Click);
this.webBrowser.Document.All["nextpage"].Click += new HtmlElementEventHandler(html_btnChangePage_Click);
this.webBrowser.Document.All["prepage"].Click += new HtmlElementEventHandler(html_btnChangePage_Click);
}
void html_btnClouse_Click(object sender, HtmlElementEventArgs e)
{
this.Close();
}
void html_btnChangePage_Click(object sender, HtmlElementEventArgs e)
{
//获取html值的方法
string pageCoont = webBrowser.Document.All["pagecount"].GetAttribute("value");
BindData();
}
/// <summary>
/// 我这里用于演示，这里可以写获取数据库的数据，
/// 根据每页记录数和当前页获取数据库内容，再给Html传递用于显示
/// </summary>
void BindData()
{
DataTable dt = new DataTable();
dt.Columns.Add("Name");
dt.Columns.Add("Age");
DataRow dr = dt.NewRow();
dr["Name"] = "Adam";
dr["Age"] = 6;
dt.Rows.Add(dr);
DataRow dr2 = dt.NewRow();
dr2["Name"] = "Adams";
dr2["Age"] = 7;
dt.Rows.Add(dr2);
string recordCount = "100";
string[] b = new string[] { newhtml(dt), recordCount };
this.webBrowser.Document.InvokeScript("showHtml", b);
}
/// <summary>
/// 这个函数用于动态拼接html代码,
/// 把datatale中的数据进行拼接赋值，实现表格显示的效果
/// </summary>
public string newhtml(DataTable table, int z = 0)
{
int hang = table.Rows.Count;
int columcount = table.Columns.Count;
string a = "";
for (int i = 0; i < hang; i++)
{
a += " <tr class='italic'> ";
for (int j = 0; j < columcount; j++)
{
a += " <td> ";
a += table.Rows[i][j];
a += " </td> ";
}
a += "</tr>";
}
return a;
}
}其中：数据要在html上显示，我的思路是拼接Html代码，比如要用类似于datagridview的方式显示数据库的数据，可以查询数据写到Datatable中，再做拼接。
HTML部分：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style>
#Datagriview {
margin: 20px;
width: 1024px;
padding: 10px;
height: 300px;
border: 2px solid black;
outline: 2px solid red;
outline-offset: 15px;
}
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
th {
background-color: deepskyblue;
color: white;
}
td {
background-color: green;
color: white;
}
#header {
margin: 20px;
width: 1024px;
padding: 10px;
height: 50px;
background-color: deepskyblue;
position: relative;
}
#btnClouse {
position: absolute;
right: 0px;
background-color: #b0e0e6;
}
</style>
<script src="../../Scripts/jquery-1.11.1.js"></script>
<script src="../../Scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var pageIndex = 0; //当前页
var recordCount = 0; //总记录数
var pageSize = 15; //每页记录数
var pageCount = 10; //总页数
function showHtml(a, pagecount) {
var str = a;
pageCount = pagecount;
$("tr").remove(".italic");
$("tr").append(str);
showPageCount();
}
function firstPage() {
pageIndex = 1;
//showPageCount();
}
function lastPage() {
pageIndex = pageCount;
//showPageCount();
}
function nextPage() {
if (pageIndex < pageCount) {
pageIndex++;
}
//showPageCount();
}
function prePage() {
if (pageIndex > 1) {
pageIndex--;
}
//showPageCount();
}
function showPageCount() {
document.getElementById("pagecount").innerText = pageIndex;
document.getElementById("count").innerText = pageCount;
}
</script>
</head>
<body>
<div id="header">
<input id="btnClouse" type="button"
value="关闭窗体" />
</div>
<div id="Datagriview">
<table id="append" border="1" ; style="background-color:deepskyblue;width:100%;text-align:center;">
<tr style="color:white;">
<th>姓名</th>
<th>身份ID</th>
</tr>
</table>
</div>
<div>
<span>当前<input id="pagecount" style="width:20px" />页/</span><span>总<input id="count" style="width:50px" />页/</span><a href="#" id="firstpage" onclick="firstPage();">首 页</a>/<a href="#" id="nextpage" onclick="nextPage();">下一页</a>/<a href="#" id="prepage" onclick="prePage();">上一页</a>/<a href="#" id="lastpage" onclick="lastPage();">末 页</a>
<span id="divFood"></span>/第<input id="pageno" value="1" style="width:20px" />页/<a href="#" onclick="aimPage();">跳转</a>
</div>
</body>
</html>