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<addverb="POST,GET"path="ajaxpro/*.ashx"type="AjaxPro.AjaxHandlerFactory,AjaxPro"/>
3 </httpHandlers>
2<addverb="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]
2publicArrayListGetSearchItems(stringstrQuery)
3{
4//生成数据源
5ArrayListitems=newArrayList();
6items.Add("King");
7items.Add("Rose");
8returnitems;
9}
10
2publicArrayListGetSearchItems(stringstrQuery)
3{
4//生成数据源
5ArrayListitems=newArrayList();
6items.Add("King");
7items.Add("Rose");
8returnitems;
9}
10
就可以在客户端直接使用服务端方法, 非常方便, 客户端调用后台代码如下:
(四). 代码
1. 页面前台文件 AjaxDrag.aspx 代码如下:
1<headrunat="server">
2<title>Dragcontrols</title>
3<scriptlanguage="javascript"src="dom-drag.js"></script>
4</head>
5<bodyonload="javascript:ReadPosition();">
6<formid="form1"runat="server">
7<div>
8<tablestyle="width:839px;height:550px"
9background="http://blog.csdn.net/images/blog_csdn_net/chengking/XiangQi.JPG">
10<tr>
11<tdstyle="width:3px;height:394px;"align="left"atomicselection="false"valign="top"
12background="http://blog.csdn.net/images/blog_csdn_net/chengking/XiangQi.JPG">
13<asp:ImageID="Image1"runat="server"ImageAlign="Middle"ImageUrl="~/blue-ma.gif"
14style="cursor:hand;position:absolute;display:none"/>
15</td>
16</tr>
17</table>
18</div>
19</form>
20<scriptlanguage="javascript">
21varImage1=document.getElementById("Image1");
22Drag.init(Image1);
23Image1.onDragEnd=function(x,y)
24{
25WritePosition(x,y);
26}
27
28functionWritePosition(x,y)
29{
30_Default.WritePosition(x,y);
31}
32
33functionReadPosition()
34{
35window.setTimeout("_Default.ReadPosition(ReadPosition_callback)",600)
36}
37
38functionReadPosition_callback(response)
39{
40varvalue=response.value;
41Image1.style.left=value.X;
42Image1.style.top=value.Y;
43Image1.style.display='';
44}
45</script>
46</body>
2<title>Dragcontrols</title>
3<scriptlanguage="javascript"src="dom-drag.js"></script>
4</head>
5<bodyonload="javascript:ReadPosition();">
6<formid="form1"runat="server">
7<div>
8<tablestyle="width:839px;height:550px"
9background="http://blog.csdn.net/images/blog_csdn_net/chengking/XiangQi.JPG">
10<tr>
11<tdstyle="width:3px;height:394px;"align="left"atomicselection="false"valign="top"
12background="http://blog.csdn.net/images/blog_csdn_net/chengking/XiangQi.JPG">
13<asp:ImageID="Image1"runat="server"ImageAlign="Middle"ImageUrl="~/blue-ma.gif"
14style="cursor:hand;position:absolute;display:none"/>
15</td>
16</tr>
17</table>
18</div>
19</form>
20<scriptlanguage="javascript">
21varImage1=document.getElementById("Image1");
22Drag.init(Image1);
23Image1.onDragEnd=function(x,y)
24{
25WritePosition(x,y);
26}
27
28functionWritePosition(x,y)
29{
30_Default.WritePosition(x,y);
31}
32
33functionReadPosition()
34{
35window.setTimeout("_Default.ReadPosition(ReadPosition_callback)",600)
36}
37
38functionReadPosition_callback(response)
39{
40varvalue=response.value;
41Image1.style.left=value.X;
42Image1.style.top=value.Y;
43Image1.style.display='';
44}
45</script>
46</body>
2. 页面后台文件 AjaxDrag.aspx.cs 代码如下:
1publicpartialclass_Default:System.Web.UI.Page
2{
3protectedvoidPage_Load(objectsender,EventArgse)
4{
5Utility.RegisterTypeForAjax(typeof(_Default));
6}
7
8[AjaxPro.AjaxMethod]
9publicvoidWritePosition(intx,inty)
10{
11stringstrFileName=this.GetFileName();
12if(File.Exists(strFileName))
13{
14StreamWritersw=newStreamWriter(strFileName,false,System.Text.Encoding.UTF8);
15sw.WriteLine(x.ToString()+","+y.ToString());
16sw.Flush();
17sw.Close();
18}
19}
20
21[AjaxPro.AjaxMethod]
22publicPointReadPosition()
23{
24StreamReadersr=newStreamReader(this.GetFileName(),System.Text.Encoding.Default);
25stringstr_X_Y="";
26while(sr.Peek()>=0)
27{
28str_X_Y=sr.ReadLine();
29break;
30}
31sr.Close();
32
33string[]str_x_y=str_X_Y.Split(',');
34Pointp=newPoint();
35p.X=int.Parse(str_x_y[0]);
36p.Y=int.Parse(str_x_y[1]);
37
38returnp;
39}
40
41privatestringGetFileName()
42{
43stringrootCatoryName="AjaxDragControl";
44stringstrPath=Server.MapPath(".");
45strPath=strPath.Substring(0,strPath.IndexOf(rootCatoryName)+rootCatoryName.Length);
46stringstrFileName=Path.Combine(strPath,"save.txt");
47returnstrFileName;
48}
49}
2{
3protectedvoidPage_Load(objectsender,EventArgse)
4{
5Utility.RegisterTypeForAjax(typeof(_Default));
6}
7
8[AjaxPro.AjaxMethod]
9publicvoidWritePosition(intx,inty)
10{
11stringstrFileName=this.GetFileName();
12if(File.Exists(strFileName))
13{
14StreamWritersw=newStreamWriter(strFileName,false,System.Text.Encoding.UTF8);
15sw.WriteLine(x.ToString()+","+y.ToString());
16sw.Flush();
17sw.Close();
18}
19}
20
21[AjaxPro.AjaxMethod]
22publicPointReadPosition()
23{
24StreamReadersr=newStreamReader(this.GetFileName(),System.Text.Encoding.Default);
25stringstr_X_Y="";
26while(sr.Peek()>=0)
27{
28str_X_Y=sr.ReadLine();
29break;
30}
31sr.Close();
32
33string[]str_x_y=str_X_Y.Split(',');
34Pointp=newPoint();
35p.X=int.Parse(str_x_y[0]);
36p.Y=int.Parse(str_x_y[1]);
37
38returnp;
39}
40
41privatestringGetFileName()
42{
43stringrootCatoryName="AjaxDragControl";
44stringstrPath=Server.MapPath(".");
45strPath=strPath.Substring(0,strPath.IndexOf(rootCatoryName)+rootCatoryName.Length);
46stringstrFileName=Path.Combine(strPath,"save.txt");
47returnstrFileName;
48}
49}
(五). 示例代码下载
http://www.cnitblog.com/Files/ChengKing/AjaxDragControl.rar
(六). 相关文章请看
1. 在WinForm中实现拖动效果, 请看:
http://blog.csdn.net/chengking/archive/2005/10/07/496739.aspx
2. 使用键盘模拟鼠标, 请看:
http://blog.csdn.net/chengking/archive/2005/10/07/496715.aspx