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

不知道大家有没有用过igoogle这个google的个人门户网站，我弄的这个东西就是模仿igoogle，主要的难点是新闻模块的动态生成和模块的拖放功能和位置保存。基本原理是用userControl去实现新闻的容器--新闻模块，模块的内容由RSS提供，ASP.Net AJAX实现模块的拖放和服务器的数据存储，js负责提供页面的动态信息交给服务器处理。

 

一、userControl编写

userControl负责存放新闻，我们为了可以重复使用给他填上了属性。这样根据不同的属性就可以让

userControl提供不同的新闻。
模块的信息来源是RSS然后通过程序分析XML中的信息放在userControl中。

后台代码如下：

 

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

 

二、ASP.Net AJAX拖放编写

这里用到的是ASP.Net AJAX的拖放实现是依靠 ASP.Net AJAX CTP实现的，普通的ASP.Net AJAX 1.0是没有这个功能的。

在aspx页面上面加以下代码加载拖放的功能。

 

拖放功能加载
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

现在拖放功能加载了，但是要告诉程序那个控件是可以拖放的，那个地方可以是投放控件的容器。ASP.Net AJAX CTP实现拖放需要用XML来注册控件的信息。下面是容器和容器注册的代码：

 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 >

可拖放控件的注册代码

<control id=可拖放的控件的ID><behaviors><draggableListItme handle=可拖放控件的触发控件（即点击此控件拖动就可以拖动可拖动控件）的ID/></behaviors></control>

 下面介绍一下拖放时候的可以用到的两个触发事件：

1. Sys.Preview.UI.DragDropManager.add_dragStart(function(){})在拖拽开始的时候触发
2. Sys.Preview.UI.DragDropManager.add_dragStop(function(){})在拖拽结束的时候触发

括号里面是执行的函数。

三、新闻模块的动态生成

新闻模块既然已经被做成userControl，那么只要把userControl当做一个类实例化它，再通过页面初始化时候加载它就可以实现了。但是这个涉及到的问题就是如何在程序中将userControl当做类实例化，如何使其具有拖拽功能，又放在那里。

首先我们来解决userControl的实例化问题，有些朋友可能发现直接写出userControl的名字程序不认识，就算是放在一个解决方案中using这个方案也不行，其实这个是要在.aspx页面下面注册的，注册或就可以在.cs下面访问了，这个和加载其他第三方控件是一样的。需要在aspx的文件开头就注册好程序中才能使用，当然在Web.config文件中也可以注册。一下是两种注册方法：

Title

1. <% Register Src=userControl文件路径 TagName=元素的标记名称（在程序中的类名） TagPrefit=命名控件别名%>(aspx中注册)
2. <add Src=  TagName=  TagPrefit= />(在web.config中注册）

这样解决了这个问题就可以动态实例化一个userControl了

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

设置了这些属性以后在程序调用实例化userControl，其初始化时候新闻信息就会添加在这个userControl中了。

下面是如何实现拖放功能，想让其有拖放功能在前面已经做好了其拖放容器好容器的注册，现在只需要将其加入注册就可以了，因为控件是动态生成的没有办法直接写在aspx代码里面我们用<%=函数名%>实现向aspx中添加注册代码的方式实现注册。把userControl的CID和DragID以上面的可拖放控件的注册方式生成一段注册字符串，再提供给函数就可以了，由于比较简单这里就不增加代码了。

四、JS对userControl的定位和位置存储。

这个是我编这个网站时候遇到的最大的问题，我在这里想了一个方法实现这个问题是一段字符串来记录的，因为每次用户的拖拽时间都要去改变本用户的页面设置，也就是说每次数据库都要有改动，都要和服务器有信息交换，为了不花销过多的服务器资源把大部分的计算工作留给了预览器即JS处理，然后将页面状况描述为一个二维数组，再由有服务器将数组变成字符串存储在个人的设置中。

字符串格式

JS会在每次拖放结束的时候执行，搜索所有的新闻模块，然后根据其位置经过计算处理整理出字符串。

JS处理代码如下：

  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  }

最后是首页的源码可以更好的理解程序但是代码不能运行哦首页代码