教程中国
PHOTOSHOP CS9.0中文版 MAYA 8.5 FOR WINDOWS Corel Painter v9.0 Flash MX2004 中文版 Illustrator cs2 中文版
VC++6.0含sp6 中英文版 VB6.0 +sp6 简体中文版 Borland Delphi 7汉化版 MSDN for vb6.0中文版 Visual Studio 2005简体
教程中国下属 文件存储共享专家BIBIDU.COM 提供大型软件,教材,源码,电影,音乐,图书等下载 更多精品请点此进入
  您目前所在位置: 教程中国 >> .NET类 >> ASP.NET >> 结合ASP.NET与JavaScript 开发电子沙盘 RSS订阅
结合ASP.NET与JavaScript 开发电子沙盘
教程(视频,书籍)下载:  ASP.NET AutoCAD 数据库 C# ASP java photoshop 网页设计 delphi 3dmax Flash C++ VB 张孝祥 实例   更多请进入BIBIDU搜索
IT搜索引擎   
     摘 要 在基于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();
  ……
  
    结束语
  
    电子沙盘的另外一个功能是导入地图,当地图的情况发生变化时,可以及时进行替换,为保证坐标的准确性,要求导入地图要与原有地图的大小相同。因方法较为简单,不再赘述。
  
    本文所设计的电子沙盘开发方法,已成功应用于B/S结构的网络信息系统,实际运行表明该方法是十分可靠与实用的。如果要拓展其功能,还可以在此基础上做更进一步的修改和完善。
  
  
    。



来源:upschool.com.cn
作者:
关键字:结合ASP.NET,开发电子沙盘
发表日期:2006-11-16

网页显示有限 阅读全文请下载本文完整版WORD文档

上一篇:asp.net 2.0 下的表单验证 Cookieless属性   下一篇:如何最大限度提高.NET的性能


本文的相类似文章
  • 结合ASP.NET与JavaScript 开发电子沙盘
  • 网友评论 查看本文全部评论
    笔 名: *
    评 论:
    最多500字。当前字数:0
    联系方式:
    验证码:
    在学习中进步 在进步中成长 教程中国相随您的成长之路
    华腾联合科技股份有限公司版权所有
    广告联系:Rosibo@163.com