先看看下面的實例
這是應朋友之邀編寫的查詢職業技能鑒定考核的分數的軟件。看過我之前的博文的，可知這是借用我之前的網頁界面。
這個UI，如果用WinForm的控件來實現，難度很高。
於是另辟蹊徑，用Webbrowser控件加載HTML網頁來實現軟件的UI。
這樣做的好處有：
1、用HTML編寫UI的難度要低得多，可以利用網上很多現成的UI庫實現絢麗的UI。本例就是利用Bootstrap庫實現的界面UI。
2、實現前端UI和后台邏輯的分離。前端UI（HTML）只實現界面的繪制（可以簡單的對前端數據驗證），不需要負責后台邏輯以及數據的驗證。
缺點是：
界面實現是通過Webbrowser控件來調用系統內核的IE來實現。則界面的效果和IE的版本息息相關，高版本的IE沒什么太大的差異，但是低版本的IE就會出現界面變形的情況。
這樣做還要解決前端UI和后台的通信問題，即：
1、前端UI如何調用后台的方法
2、后台如何調用前端UI的方法來刷新頁面
下面詳細講解一下
1、前端UI如何調用后台的方法
首先，新建一個類，專門實現后台的邏輯。為了能讓前端調用，必須給類添加相應的申明，如下所示：
<System.Runtime.InteropServices. ComVisible( True)>
Public Class clsQuery
Private _Web As WebBrowser
Public Sub New(W As WebBrowser)
_Web = W
_Web.ObjectForScripting = Me
End Sub
Public Sub Query(ID As String, Subject As String)
End Sub
End Class
通過申明
<System.Runtime.InteropServices.ComVisible(True)>
使得該類的公用方法能通過Webbrowser控件被調用，就是代碼中Query方法
再通過 _Web.ObjectForScripting = Me 把該類和Webbrowser控件綁定，這樣前端UI就能調用該類的方法了。
在前端UI的HTML代碼中，通過window.external.Query(ID, Subject); 調用后台的邏輯
< script >
function Query() {
var ID = $( '#IDCard').val();
var Subject = $( '#Subject').val();
if (ID == '') {
alert( '請輸入身份證號！！！！');
}
else {
window.external.Query(ID, Subject);
}
}
function CreateTable(T) {
$( '#ResultTable').html(T);
}
</ script >
2、后台如何調用前端UI的方法來刷新頁面
上面的前端UI代碼中，函數CreateTable是給后台邏輯調用來刷新前端UI的
在后台代碼中用下面的代碼調用前端UI的函數來刷新UI。
_Web.Document.InvokeScript("CreateTable", A)
至此，前端UI和后台邏輯的雙向通信已經全部打通，實現了UI和邏輯層的分離。
同時，前端UI利用眾多的HTML、CSS、JS類庫能實現很多絢麗的UI，不怕想不到，就怕做不到。
本文中的后台邏輯就不貼了，無外乎就是獲取數據、數據分析、格式化數據而已
多說一句，這個前端UI也可以用WPF實現，只是實現的難度要大很多。畢竟網上現成的WPF的前端UI庫不太好找。