結合ASP.NET與JavaScript開發電子沙盤

2019-11-18 16:55:44

字體：大中小

來源：轉載

供稿：網友

　　摘要在基于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是一種基于對象(Object)和事件驅動(Event Driven)并具有安全性能的腳本語言。JavaScript腳本嵌入在網頁中，運行時JavaScript代碼和網頁一起下載到瀏覽器。當用戶的一些操作不涉及到數據存取時，如移動圖標與瀏覽圖標信息這兩項主要的沙盤操作，就可以由JavaScript腳本來實現，從而使用戶、瀏覽器、服務器之間的三層交互變成了用戶、瀏覽器之間的兩層交互，有效提高網頁反應的快速性和靈活性。

　　設計思路

　　本文所述的信息系統，以Windows 2000 Server+IIS5.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＞

　　3、坐標值保存

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

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();
……