结合ASP.NET与JavaScript开发电子沙盘
日期：2010-11-26 浏览次数：20514 次
摘 要 在基于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从数据库中提取其所属的图标参数（坐标值和基本信息）,再根据坐标值将图标定位在地图中，同时将图标基本信息写入网页代码。在网页加载完毕以后，生成的图标会配置在地图上的指定位置，且附带了基本信息。节选程序如下：
2、客户端操作
ASP.NET中的Web控件没有坐标属性，因此它们不能在网页中移动。可以采用HTML控件中的Label控件（div），把它当成一个可以移动的层来使用，在这个层上嵌入一个Image控件，两者合并在一起即可作为活动的图标。
编写的JavaScript脚本主要有两类：一类是拖动动作，即图标可以被鼠标拖动到地图上的某一位置；另一类是点击动作，在图标被选中状态下，单击鼠标的右键可以显现图标的基本信息。节选程序如下：
3、坐标值保存
在用户完成图标的配置后，可选择保存设置，这一动作由Web控件Button按钮的Click事件激发。Web服务器将用户ID、图标ID和坐标值赋传送给数据库服务器的存储过程，由存储过程将数据保存到数据库表中。节选程序如下：
关键词 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;
……
{
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＞
……
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)
{
{
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
