摘 要 在基于B/S結(jié)構(gòu)的網(wǎng)絡(luò)信息系統(tǒng)開發(fā)中，結(jié)合asp.net與客戶端的javaScript腳本, 開發(fā)能與數(shù)據(jù)庫進行交互的電子沙盤。沙盤中圖標的參數(shù)存取由客戶端與服務(wù)器交互完成，圖標的移動和圖標的信息瀏覽依靠客戶端實現(xiàn)。文章結(jié)合系統(tǒng)開發(fā)實例，詳細闡述了這一方法的實現(xiàn)過程。

　　關(guān)鍵詞 ASP.NET Javascript 電子沙盤

　　引 言

　　ASP.NET技術(shù)是用于Web開發(fā)的全新框架，它完全基于模塊與組件，給Web開發(fā)人員提供更多的靈活性，是創(chuàng)建Web應(yīng)用程序的有效工具。ASP.NET特別適用于開發(fā)動態(tài)的Web站點，使網(wǎng)頁與用戶之間不僅僅是顯示和瀏覽的關(guān)系，而且還是動態(tài)交互的關(guān)系。大部份的交互任務(wù)都可由ASP.NET的服務(wù)器端代碼來完成。筆者為某單位開發(fā)的B/S結(jié)構(gòu)網(wǎng)絡(luò)信息系統(tǒng)，除一般功能外，還需要特別設(shè)計地理模塊。因其眾多的下屬子單位的地理位置會比較頻繁地發(fā)生變動，而業(yè)務(wù)工作與地理位置的配置又有著重要關(guān)系，為此，要在系統(tǒng)中引入基于數(shù)據(jù)庫支持的電子沙盤。使各級用戶按權(quán)限查看和配置子單位在地圖上分布。

　　電子沙盤的基本原理是在以地圖為背景的網(wǎng)頁中生成多個可以移動的圖標，每一個圖標代表一個子單位。但在Web上僅靠ASP.NET來實現(xiàn)沙盤功能是比較困難的，因為它對交互性提出了更高的要求。這主要體現(xiàn)在兩個方面：一是沙盤與數(shù)據(jù)庫服務(wù)器的交互，這主要體現(xiàn)在沙盤數(shù)據(jù)在數(shù)據(jù)庫中的存取；二是沙盤與用戶的交互，這主要體現(xiàn)在用戶在地圖中移動圖標（鼠標拖動動作）以及瀏覽圖標的信息（鼠標點擊動作）兩個方面。在實際操作中，沙盤與用戶的交互是比較頻繁的，如果每一次動作都要求瀏覽器和服務(wù)器建立一次往返行程，必然會受到網(wǎng)速、服務(wù)器性能等因素的制約，從而延長用戶操作的等待時間，降低沙盤的實用性。

　　為此，要引入JavaScript技術(shù)，來滿足這種實時交互的需求。JavaScript是一種基于對象(Object)和事件驅(qū)動(Event Driven)并具有安全性能的腳本語言。JavaScript腳本嵌入在網(wǎng)頁中，運行時JavaScript代碼和網(wǎng)頁一起下載到瀏覽器。當(dāng)用戶的一些操作不涉及到數(shù)據(jù)存取時，如移動圖標與瀏覽圖標信息這兩項主要的沙盤操作，就可以由JavaScript腳本來實現(xiàn)，從而使用戶、瀏覽器、服務(wù)器之間的三層交互變成了用戶、瀏覽器之間的兩層交互，有效提高網(wǎng)頁反應(yīng)的快速性和靈活性。

　　設(shè)計思路

　　本文所述的信息系統(tǒng)，以Windows 2000 Server+IIS5.0+.NET作為平臺，采用ASP.NET+C#.NET構(gòu)造程序框架, SQL Server 2000為后臺數(shù)據(jù)庫。針對該單位分為總部—分區(qū)—子單位三層結(jié)構(gòu)，按行政級別規(guī)定了不同的權(quán)限：總部級用戶具有對全部子單位的瀏覽權(quán)和調(diào)配權(quán)，分區(qū)級用戶具有對本分區(qū)子單位的瀏覽權(quán)和調(diào)配權(quán)，子單位具有地理配置權(quán)。

　　為盡量減少客戶端與服務(wù)器的交互次數(shù)，電子沙盤的運行過程應(yīng)分為三個步驟進行：第一步是在網(wǎng)頁加載時，Web服務(wù)器從數(shù)據(jù)庫服務(wù)器中提取圖標參數(shù)（坐標值與基本信息），將JavaScript代碼和網(wǎng)頁一起下載到客戶端；第二步是由JavaScript腳本負責(zé)執(zhí)行沙盤與用戶的交互（配置圖標與瀏覽圖標信息）；第三步是在用戶選擇保存設(shè)置時，Web服務(wù)器接收來自客戶端的坐標值等參數(shù)，并賦值給數(shù)據(jù)庫服務(wù)器的存儲過程，由存儲過程執(zhí)行數(shù)據(jù)的保存。

　　程序設(shè)計

　　1、網(wǎng)頁加載

　　Web服務(wù)器根據(jù)用戶ID從數(shù)據(jù)庫中提取其所屬的圖標參數(shù)（坐標值和基本信息）,再根據(jù)坐標值將圖標定位在地圖中，同時將圖標基本信息寫入網(wǎng)頁代碼。在網(wǎng)頁加載完畢以后，生成的圖標會配置在地圖上的指定位置，且附帶了基本信息。節(jié)選程序如下：

PRivate void Page_Load(object sender, System.EventArgs e) //初始化
{
if (!IsPostBack) //程序是否是第一次執(zhí)行
{
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控件沒有坐標屬性，因此它們不能在網(wǎng)頁中移動。可以采用HTML控件中的Label控件（div），把它當(dāng)成一個可以移動的層來使用，在這個層上嵌入一個Image控件，兩者合并在一起即可作為活動的圖標。

　　編寫的JavaScript腳本主要有兩類：一類是拖動動作，即圖標可以被鼠標拖動到地圖上的某一位置；另一類是點擊動作，在圖標被選中狀態(tài)下，單擊鼠標的右鍵可以顯現(xiàn)圖標的基本信息。節(jié)選程序如下：

＜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＞

　　3、坐標值保存

　　在用戶完成圖標的配置后，可選擇保存設(shè)置，這一動作由Web控件Button按鈕的Click事件激發(fā)。Web服務(wù)器將用戶ID、圖標ID和坐標值賦傳送給數(shù)據(jù)庫服務(wù)器的存儲過程，由存儲過程將數(shù)據(jù)保存到數(shù)據(jù)庫表中。節(jié)選程序如下：

private void Button1_Click(object sender, System.EventArgs e)
{
　string strConn=ConfigurationSettings.AppSettings["ConnectionString"];
　SqlConnection cn=new SqlConnection(strConn);
　SqlCommand cm9=new SqlCommand("sp_sketchmap_modify",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"].Value=TextBoxD1.Text.Trim();
　cm9.Parameters.Add("@D1A",SqlDbType.Int); 1號子單位橫坐標
　cm9.Parameters["@D1A"].Value=Int32.Parse(TextBoxD1A.Text.Trim());
　cm9.Parameters.Add("@D1B",SqlDbType.Int); //1號子單位縱坐標 　　
　cm9.Parameters["@D1B"].Value=Int32.Parse(TextBoxD1B.Text.Trim());
　……
　cm9.Connection.Open();
　cm9.ExecuteNonQuery();
　cm9.Connection.Close();
……

　　結(jié)束語

　　電子沙盤的另外一個功能是導(dǎo)入地圖，當(dāng)?shù)貓D的情況發(fā)生變化時，可以及時進行替換，為保證坐標的準確性，要求導(dǎo)入地圖要與原有地圖的大小相同。因方法較為簡單，不再贅述。

　　本文所設(shè)計的電子沙盤開發(fā)方法，已成功應(yīng)用于B/S結(jié)構(gòu)的網(wǎng)絡(luò)信息系統(tǒng)，實際運行表明該方法是十分可靠與實用的。如果要拓展其功能，還可以在此基礎(chǔ)上做更進一步的修改和完善。