Ajax 实现在WebForm中拖动控件并即时在服务端保存状态数据 (Asp.net 2.0)(示例代码下载)

(一) . 运行示例效果

* 运行后用鼠标拖动蓝色的<马>到任意位置, 将浏览器关闭后, 再重新访问本页面, 会发现<马>仍然在您拖到的位置        

(二). AjaxPro.NET简介

         首先对AjaxPro.NET作一下介绍, AjaxPro.NET是一个优秀的Ajax框架, 在实际应用中只要添加其DLL

         引用并进行简单的配置, 即可以非常方便的在客户端直接调用服务端方法, 来获取Tree节点.

(三).使用AjaxPro.NET预配置

       1. 添加 AjaxPro.dll 文件的引用(示例代码中已经包含,直接COPY过来使用即可).

       2. 在Web.config文件中添加以下配置,           

1  < httpHandlers >
2               < add verb = " POST,GET "  path = " ajaxpro/*.ashx "  type = " AjaxPro.AjaxHandlerFactory, AjaxPro "   />             
3 </ httpHandlers >

 

 

       3. 在要使用AjaxPro.NET框架的页面 *.aspx.cs 的 Page_Load事件中加如下代码:

 

AjaxPro.Utility.RegisterTypeForAjax( typeof (_Default));

 

       4. 经过以上三步骤后, 只要在后台服务端的方法前面增加属性[AjaxMethod]后:

 

 1   [AjaxMethod()]     //  or [AjaxPro.AjaxMethod] 
 2  public  ArrayList GetSearchItems(  string  strQuery )
 3  {
 4        // 生成数据源
 5       ArrayList items  =   new  ArrayList();
 6       items.Add( " King " );
 7       items.Add( " Rose " );
 8        return  items ;
 9  } 
10 

 

        就可以在客户端直接使用服务端方法, 非常方便, 客户端调用后台代码如下:

var returnValue  =  后台代码类名.GetSearchItems(参数);

(四). 代码

       1. 页面前台文件 AjaxDrag.aspx 代码如下:

 1  < head runat = " server " >
 2       < title > Drag controls </ title >
 3       < script language = " javascript "  src = " dom-drag.js " ></ script >
 4  </ head >
 5  < body onload = " javascript:ReadPosition(); " >
 6       < form id = " form1 "  runat = " server " >
 7       < div >
 8           < table style = " width: 839px; height: 550px "
 9                 background = " http://blog.youkuaiyun.com/images/blog_youkuaiyun.com/chengking/XiangQi.JPG " >
10               < tr >
11                   < td style = " width: 3px; height: 394px; "  align = " left "  atomicselection = " false "  valign = " top "
12                      background = " http://blog.youkuaiyun.com/images/blog_youkuaiyun.com/chengking/XiangQi.JPG " >
13                       < asp:Image ID = " Image1 "  runat = " server "  ImageAlign = " Middle "  ImageUrl = " ~/blue-ma.gif "
14                           style = " cursor:hand;position:absolute;display:none "   />
15                  </ td >
16               </ tr >
17           </ table >             
18      </ div >   
19       </ form >
20       < script language = " javascript " >            
21          var Image1  =  document.getElementById( " Image1 " );
22          Drag.init(Image1);        
23          Image1.onDragEnd  =  function(x, y)
24          {
25              WritePosition(x, y);
26          }     
27          
28          function WritePosition(x,y)
29          {
30              _Default.WritePosition(x, y);
31          }         
32          
33          function ReadPosition()
34          {
35              window.setTimeout( " _Default.ReadPosition(ReadPosition_callback) " , 600 )            
36          }
37          
38          function ReadPosition_callback(response)        
39          {            
40              var value  =  response.value;               
41              Image1.style.left  =  value.X;
42              Image1.style.top   =  value.Y; 
43              Image1.style.display  =   '' ;
44          }         
45       </ script >         
46  </ body >

       2. 页面后台文件 AjaxDrag.aspx.cs 代码如下:

 1  public  partial  class  _Default : System.Web.UI.Page 
 2  {
 3       protected   void  Page_Load( object  sender, EventArgs e)
 4      {
 5         Utility.RegisterTypeForAjax( typeof (_Default));       
 6      }
 7 
 8     [AjaxPro.AjaxMethod]
 9      public   void  WritePosition( int  x,  int  y)
10     {
11         string  strFileName  =   this .GetFileName();
12         if  (File.Exists(strFileName))
13        {
14           StreamWriter sw  =   new  StreamWriter(strFileName,  false , System.Text.Encoding.UTF8);
15           sw.WriteLine(x.ToString()  +   " , "   +  y.ToString());
16           sw.Flush();
17           sw.Close();
18        }            
19     }
20 
21     [AjaxPro.AjaxMethod]
22      public  Point ReadPosition()
23     {
24        StreamReader sr  =   new  StreamReader( this .GetFileName(), System.Text.Encoding.Default);
25         string  str_X_Y  =   "" ;
26         while  (sr.Peek()  >=   0 )
27        {
28           str_X_Y  =  sr.ReadLine();
29            break ;
30        }
31        sr.Close();   
32        
33         string [] str_x_y  =  str_X_Y.Split( ' , ' );
34        Point p  =   new  Point();
35        p.X  =   int .Parse(str_x_y[ 0 ]);
36        p.Y  =   int .Parse(str_x_y[ 1 ]);
37 
38         return  p;      
39     }
40 
41      private   string  GetFileName()
42     {
43         string  rootCatoryName  =   " AjaxDragControl " ;
44         string  strPath  =  Server.MapPath( " . " );
45        strPath  =  strPath.Substring( 0 , strPath.IndexOf(rootCatoryName)  +  rootCatoryName.Length);
46         string  strFileName  =  Path.Combine(strPath,  " save.txt " );
47         return  strFileName;
48     }
49  }

(五). 示例代码下载

         http://www.cnitblog.com/Files/ChengKing/AjaxDragControl.rar

(六). 相关文章请看

          1. 在WinForm中实现拖动效果, 请看:

               http://blog.youkuaiyun.com/chengking/archive/2005/10/07/496739.aspx

          2. 使用键盘模拟鼠标, 请看:

               http://blog.youkuaiyun.com/chengking/archive/2005/10/07/496715.aspx