ASP.Net AJAX+userControl+js实现仿igoogle效果网站

userControl后台代码
 1 using System;
 2 using System.Data;
 3 using System.Configuration;
 4 using System.Collections;
 5 using System.Web;
 6 using System.Web.Security;
 7 using System.Web.UI;
 8 using System.Web.UI.WebControls;
 9 using System.Web.UI.WebControls.WebParts;
10 using System.Web.UI.HtmlControls;
11 using UI_Servers;
12 using DB_Servers;
13 using Castle.ActiveRecord;
14 using Castle.ActiveRecord.Framework;
15 
16 
17     //public delegate void ClickEventHandler(object sender, EventArgs e);
18     public partial class WebUserControl : System.Web.UI.UserControl
19     {
20         private string Cid;//用户控件ID
21         private string Rssid;//获得数据库中Rss链接的编号
22         private RSSChannel channel;//Rss新闻信息
23         private int count;
24         public string CID
25         {
26             get { return Cid; }
27             set { Cid = value; }
28         }
29         public string RSSID
30         {
31             get { return Rssid; }
32             set { Rssid = value; }
33         }
34 
35         public int Count
36         {
37             get { return count; }
38             set { count = value; }
39         }
40         protected void Page_Load(object sender, EventArgs e)
41         {
42             string url;
43             Rss RSS = Rss.Find(Convert.ToInt32(Rssid));//通过Rssid获得Rss实体类（使用了Castle AR技术，数据库层这里不多做介绍了）
44             channel = new RSSChannel(RSS.RssURL);//通过RSS的URL建立新闻列表实体。
45             channel.ReadChannel();//为新闻实体添加数据（从RSS的XML分析而来）
46         }
47         /// <summary>
48         /// 填充页面RSS新闻
49         /// </summary>
50         /// <returns></returns>
51         public string GetContent()
52         {
53             string ret = string.Empty;
54             RSSItem[] items = new RSSItem[channel.Items.Count];
55             int i = 0;
56             for (; i < count && i < channel.Items.Count; i++)
57             {
58                 items[i] = channel.Items[i];
59                 ret += "<li><a href=/"" + items[i].Link + "/" alt=/"" + items[i].Description + "/">" +
60                     items[i].Title +
61                     "</a></li>";
62             }
63             return ret;
64 
65         }
66         /// <summary>
67         /// RSS新闻模块标题填充
68         /// </summary>
69         /// <returns></returns>
70         public string Title()
71         {
72             return "<a href=/"" + channel.Link + "/" name=/"check/">" + channel.Title + "</a>";
73         }
74         /// <summary>
75         /// 生成拖动控件ID
76         /// 为以后ASP.Net AJAX的拖放注册准备
77         /// </summary>
78         /// <returns></returns>
79         public string DragID()
80         {
81             return Cid + "Drag";
82         }
83 
84 
85 

userControl前台代码
 1 <%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.cs" Inherits="WebUserControl" %>
 2 <div id="<%=CID %>" class="items">
 3         <div id="List_top" class="itemTop">
 4             <div id="<%=DragID() %>" class="itemTitle">
 5                 <%=Title() %>
 6             </div>
 7             <%--<asp:Button runat="server" ID="close_but"  Text="X" CssClass="closing" OnClientClick="elemClose(this);"/>--%>
 8             <input id="close_but" value="X" class="closing" onclick="elemClose(this);"  type="button"/>
 9         </div>
10                     <!-- 内容区域 OnClick="AButton_Click"-->
11         <div class="itemContent">
12             <ul>
13                 <%=GetContent() %>
14             </ul>
15         </div>
16         <div style="height:10px;"></div>
17 </div>
18

拖放功能加载
1     <asp:ScriptManager ID="sm" runat="server" EnablePageMethods="true">
2         <Scripts>
3             <asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" />
4             <asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewDragDrop.js" />
5         </Scripts>
6     </asp:ScriptManager

 1  < div  id ="cccc"  style ="display: block;" >
 2           <!--  左 （容器） -->
 3           < div  id ="leftArea"  class ="list1"  runat ="server" >
 4           </ div >
 5           <!--  中 （容器） --> （容器）
 6           < div  id ="middleArea"  class ="list2"  runat ="server" >
 7           </ div >
 8           <!--  右 （容器） --> （容器）
 9           < div  id ="rightArea"  class ="list3"  runat ="server" >
10           </ div >
11           <!--  template elements  -->
12           < div  style ="display: none;" >
13               <!--  内有元素时候显示  -->
14               < div  id ="dropCueTpl"  class ="dropCue" >
15               </ div >
16               <!--  内没有元素时候显示  -->
17               < div  id ="emptyTpl"  class ="emptyList" >
18                  Drop content here.
19               </ div >
20           </ div >
21       </ div >  
22  <!-- 下面是注册代码（XML） -->
23      < script  type ="text/xml-script" >
24     < page >
25       < components >
26 
27         <!--  左  -->
28         < control id = " leftArea " > （id为容器控件ID）
29           < behaviors >
30             < dragDropList id = " leftDragDropBehavior "   dragDataType = " HTML "  
31              acceptedDataTypes = " 'HTML' "  dragMode = " Move "  direction = " Vertical " >
32               < dropCueTemplate > （内有元素时候显示）
33                 < template layoutElement = " dropCueTpl "   / >
34               < / dropCueTemplate>
35               < emptyTemplate > （内没有元素时候显示）
36                 < template layoutElement = " emptyTpl "   / >
37               < / emptyTemplate>
38             < / dragDropList>
39           < / behaviors>
40         < / control>
41         <!--  中  -->
42         < control id = " middleArea " >
43           < behaviors >
44             < dragDropList id = " middleDragDropBehavior "   dragDataType = " HTML "  
45              acceptedDataTypes = " 'HTML' "  dragMode = " Move "  direction = " Vertical " >
46               < dropCueTemplate >
47                 < template layoutElement = " dropCueTpl "   / >
48               < / dropCueTemplate>
49               < emptyTemplate >
50                 < template layoutElement = " emptyTpl "   / >
51               < / emptyTemplate>
52             < / dragDropList>
53           < / behaviors>
54         < / control>
55 
56         <!--  右  -->
57         < control id = " rightArea " >
58           < behaviors >
59             < dragDropList id = " rightDragDropBehavior "  dragDataType = " HTML "  
60              acceptedDataTypes = " 'HTML' "  dragMode = " Move "  direction = " Vertical " >
61               < dropCueTemplate >
62                 < template layoutElement = " dropCueTpl "   / >
63               < / dropCueTemplate>
64               < emptyTemplate >
65                 < template layoutElement = " emptyTpl "   / >
66               < / emptyTemplate>
67             < / dragDropList>
68           < / behaviors>
69         < / control>
70 
71         <!--  可拖放控件的注册代码下面会提到  -->
72       <%= getreg()  %>
73 
74       < / components>
75     < / page>
76       </ script >

Code
1 WebUserControl b = (WebUserControl)LoadControl("WebUserControl.ascx");
2                             b.CID = item.Trim();
3                             b.RSSID = item_data[1].Trim(); ;
4                             b.Count = Convert.ToInt32(item_data[2

  1       //  JScript 文件
  2       function  pageLoad(sender, args) {
  3           // 加载拖放结束时间的触发函数
  4          Sys.Preview.UI.DragDropManager.add_dragStop(DragStopped);
  5           // Sys.Preview.UI.DragDropManager.add_dragStart(function(){window.alert("Asdf");});
  6      }
  7       // 拖放结束时间的触发函数
  8       function  DragStopped(sender, args) {
  9           // 模块位置排序
 10           var  elems = elemSort();
 11           // userid为当前用户ID因为AJAX在程序中无法访问Session的值所以放在一个input中用AJAX回传
 12           var  userid = $get( " userIdHidden " );
 13           // 调用服务器事件保存模块位置
 14          PageMethods.elemOffset(elems,userid.value);
 15      }
 16       // function DragStart(sender, args)
 17       // {
 18       //     window.alert("DragStart Goes");
 19       // }
 20       // 模块类
 21       function  elem(ID,X,Y)
 22      {
 23           this .ID = ID;
 24           this .X = X; // 模块位子X
 25           this .Y = Y; // 模块位子Y
 26      }
 27       // 获得模块
 28       // findElemsName为可拖放模块的Name熟悉，这里的拖放模块Name值都是一致的。
 29       function  elemGet(findElemsName)
 30      {
 31          
 32           // 获得可拖放模块集合
 33           var  ele = document.getElementsByName(findElemsName);
 34           var  elems = new  Array;
 35           if (ele.length)
 36          {
 37               var  temp_ele;
 38               for (elecount = 0 ;elecount < ele.length;elecount ++ )
 39              {
 40                   var  tempOffset = getoffset(ele[elecount]);
 41                  temp_ele = elemFilter(ele[elecount].parentNode.parentNode.parentNode.id);
 42                   var  temp = new  elem(temp_ele,tempOffset.x,tempOffset.y);
 43                  elems.push(temp);
 44              }
 45          }
 46           return  elems;
 47      }
 48       // 获得拖放模块ID
 49       function  elemFilter(elemid)
 50      {
 51           // window.alert("elemFilter load");
 52           var  temp = new  Array();
 53          temp = elemid.split( " X " );
 54          i = 0 ;
 55           var  ret = "" ;
 56           // window.alert(elemid);
 57           while (temp.length && i < 3 )
 58          {
 59              if (temp[i])
 60             {
 61                   if (i != 0 )
 62                      ret += " X " ;
 63                  ret += temp[i];
 64                  i ++ ;
 65             }
 66          }
 67           return  ret;
 68      }
 69       // 元素位子
 70       function  elemOffset(x,y)
 71      {
 72           this .x = x;
 73           this .y = y;
 74          
 75      }
 76       // 获得元素位子
 77       function  getoffset(e) 
 78      {  
 79           var  x = e.offsetLeft;  
 80           var  y = e.offsetTop;  
 81           while (e = e.offsetParent) 
 82          {  
 83            x += e.offsetLeft;  
 84            y += e.offsetTop;  
 85          }  
 86           var  rec  =   new  elemOffset(x,y);
 87           return  rec
 88      }  
 89       //
 90       function  elemSort()
 91      {
 92           var  elems = new  Array();
 93          elems = elemGet( " check " );
 94          elems = sortY(elems);
 95          elems = sortX(elems);
 96           // 三个数组分辨对应相应列
 97           var  elemSorted = new  Array( new  Array(), new  Array(), new  Array());
 98           // 获得列的位置
 99           var  leftArea = getoffset(document.getElementById( " leftArea " ));
100           var  middleArea = getoffset(document.getElementById( " middleArea " ));
101           var  rightArea = getoffset(document.getElementById( " rightArea " ));
102          // 和列位置比较看当前循环模块属于那个列,并降模块ID压入相应数组
103           for (elemscount = 0 ;elemscount < elems.length;elemscount ++ )
104          {
105 
106             
107               if (elems[elemscount].X >= leftArea.x && elems[elemscount].X < middleArea.x)
108              {
109                  elemSorted[ 0 ].push(elems[elemscount].ID);
110                  
111                  
112              }
113               else   if (elems[elemscount].X >= middleArea.x && elems[elemscount].X < rightArea.x)
114              {
115                  elemSorted[ 1 ].push(elems[elemscount].ID);
116              }
117               else
118              {
119                  elemSorted[ 2 ].push(elems[elemscount].ID);
120              }
121          }
122           return  elemSorted;
123      }
124 
125       // 拖放模块当前列排序
126       function  sortY(elems)
127      {
128           var  temp = new  elem();
129           if (elems.length)
130          {
131               for (sorti = 0 ;i < elems.length - 1 ;sorti ++ )
132              {
133                   for (sortj = elems.length - 1 ;sortj > sorti + 1 ;sortj -- )
134                  {
135                       if (elems[sortj].Y < elems[sortj - 1 ].Y)
136                      {
137                          temp = elems[sortj];
138                          elems[sortj] = elems[sortj - 1 ];
139                          elems[sortj - 1 ] = temp;
140                      }
141                  }
142              }
143          }
144           return  elems;
145      }
146 
147       // 拖放模块当前行排序
148       function  sortX(elems)
149      {
150           var  temp = new  elem();
151           if (elems.length)
152          {
153               for (Sorti = 0 ;Sorti < elems.length - 1 ;Sorti ++ )
154              {
155                   for (Sortj = elems.length - 1 ;Sortj > Sorti + 1 ;Sortj -- )
156                  {
157                       if (elems[Sortj].X < elems[Sortj - 1 ].X)
158                      {
159                          temp = elems[Sortj];
160                          elems[Sortj] = elems[Sortj - 1 ];
161                          elems[Sortj - 1 ] = temp;
162                      }
163                  }
164              }
165          }
166           return  elems;
167      }
168  /* 以下是控件关闭按钮客户端事件 */
169  function  elemClose(sender)
170  {
171       var  closeElemId = sender.parentNode.parentNode.id;
172      
173       var  closeElem = document.getElementById(closeElemId);
174       // 删除节点
175      closeElem.parentNode.removeChild(closeElem);
176       // 模块排序
177       var  elemCloseSort = elemSort();
178       var  userid = $get( " userIdHidden " );
179       // 保存位置
180      PageMethods.elemOffset(elemCloseSort,userid.value);
181  }