結合 ASP.NET 與 JavaScript 開發互動式電子沙盤系統

摘要：在基於 B/S 結構的網路資訊系統開發中，結合 ASP.NET 與客戶端 JavaScript 腳本，開發能與資料庫互動的電子沙盤。沙盤中圖示參數存取由客戶端與伺服器互動完成，圖示移動與資訊瀏覽靠客戶端實現。文章結合系統開發實例，詳細闡述實現過程。

關鍵字：ASP.NET、JavaScript、電子沙盤

引言

ASP.NET 技術是用於 Web 開發的全新框架，完全基於模組與元件，給 Web 開發人員提供更多彈性，是建立 Web 應用程式的有效工具。ASP.NET 特別適用於開發動態 Web 網站，使網頁與用戶之間不僅是顯示與瀏覽關係，更是動態互動關係。大部分互動任務可由 ASP.NET 伺服器端程式碼完成。筆者為某單位開發的 B/S 結構網路資訊系統，除一般功能外，還需特別設計地理模組。因其眾多下屬子單位地理位置較頻繁變動，而業務工作與地理位置配置有重要關係，故在系統中引入基於資料庫支援的電子沙盤，使各級用戶按權限查看和配置子單位在地圖上分布。

電子沙盤基本原理是在以地圖為背景的網頁中生成多個可移動圖示，每個圖示代表一個子單位。但在 Web 上僅靠 ASP.NET 實現沙盤功能較困難，因對互動性要求更高。主要體現在兩方面：一是沙盤與資料庫伺服器互動，主在沙盤資料在資料庫中存取；二是沙盤與用戶互動，主在用戶在地圖中移動圖示（滑鼠拖曳）及瀏覽圖示資訊（滑鼠點擊）。實際操作中，沙盤與用戶互動頻繁，若每次動作都要求瀏覽器與伺服器建立一次往返，必受網速、伺服器效能制約，延長用戶等待時間，降低實用性。

因此引入 JavaScript 技術，滿足即時互動需求。JavaScript 是基於物件與事件驅動且具安全性的腳本語言。JavaScript 腳本嵌入網頁中，執行時程式碼隨網頁下載到瀏覽器。當用戶操作不涉及資料存取時（如移動圖示、瀏覽圖示資訊），可由 JavaScript 實現，將用戶、瀏覽器、伺服器三層互動變為用戶、瀏覽器兩層互動，有效提升網頁反應速度與靈活性。

設計思路

本文系統以 Windows 2000 Server + IIS 5.0 + .NET 為平台，採用 ASP.NET + C#.NET 建構程式框架，SQL Server 2000 為後台資料庫。針對該單位總部—分區—子單位三層結構，按行政級別規定不同權限：總部級用戶具全部子單位瀏覽權與調配權，分區級用戶具本分區子單位瀏覽權與調配權，子單位具地理配置權。

為減少客戶端與伺服器互動次數，電子沙盤執行過程分三步驟：第一步網頁載入時，Web 伺服器從資料庫提取圖示參數（座標值與基本資訊），將 JavaScript 程式碼與網頁一起下載到客戶端；第二步由 JavaScript 負責執行沙盤與用戶互動（配置圖示與瀏覽圖示資訊）；第三步用戶選擇儲存設定時，Web 伺服器接收客戶端座標值等參數，賦值給資料庫儲存程序，由儲存程序執行資料儲存。

程式設計

1、網頁載入

Web 伺服器依用戶 ID 從資料庫提取其所屬圖示參數（座標值與基本資訊），再依座標值將圖示定位在地圖中，同時將圖示基本資訊寫入網頁程式碼。網頁載入完畢後，生成的圖示會配置在地圖指定位置，且附帶基本資訊。程式碼節選如下：

private void Page_Load(object sender, System.EventArgs e) //初始化
{
if (!IsPostBack) //程式是否第一次執行
{
string strConn=ConfigurationSettings.AppSettings["ConnectionString"];
SqlConnection cn=new SqlConnection(strConn);
SqlCommand cm9=new SqlCommand("sp_sketchmap",cn); //提取子單位名稱及座標值
cm9.CommandType=CommandType.StoredProcedure;
cm9.Parameters.Add("@unitid",SqlDbType.VarChar,50); //使用者單位編碼
cm9.Parameters["@unitid"].Value=Session["unitid"].ToString();
cm9.Parameters.Add("@D1",SqlDbType.VarChar,50); //1號子單位名稱
cm9.Parameters["@D1"].Direction=ParameterDirection.Output;
cm9.Parameters.Add("@D1A",SqlDbType.Int); //1號子單位橫座標
cm9.Parameters["@D1A"].Direction=ParameterDirection.Output;
cm9.Parameters.Add("@D1B",SqlDbType.Int); //1號子單位縱座標
cm9.Parameters["@D1B"].Direction=ParameterDirection.Output;
cm9.Parameters.Add("@D1C",SqlDbType.VarChar,100); //1號子單位基本資訊
cm9.Parameters["@D1C"].Direction=ParameterDirection.Output;
……

2、客戶端操作

ASP.NET 中的 Web 控制項沒有座標屬性，故不能在網頁中移動。可採用 HTML 控制項中的 Label 控制項（div），當成可移動的層使用，在這層上嵌入 Image 控制項，兩者合併即可作為活動圖示。

編寫的 JavaScript 腳本主要兩類：一類是拖曳動作，即圖示可被滑鼠拖曳到地圖某位置；另一類是點擊動作，圖示被選中狀態下，單擊滑鼠右鍵可顯示圖示基本資訊。程式碼節選如下：

<script language="JavaScript"> // JavaScript腳本
……
function dragIt(evt) // 滑鼠拖曳動作
{
 ……
 if (selectedObj) {
shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY))
document.forms(0).TextBox1.value=window.event.clientX – offsetX
document.forms(0).TextBox2.value=window.event.clientY – offsetY
document.forms(0).TextBox3.value=window.event.srcElement.id
 }
}
……
function rightclick(){ //滑鼠右鍵點擊動作
 if (event.button==2){
linkex.innerHTML=document.forms(0).TextBoxD1C.value linkex.style.posTop=plane1.style.posTop+20
linkex.style.posLeft=plane1.style.posLeft+20
linkex.style.backgroundColor="Pink"
linkex.style.visibility="visible"
 }
}
</script>