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

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

一、userControl编写

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

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

后台代码如下：

Code
WebUserControl b = (WebUserControl)LoadControl("WebUserControl.ascx");
b.CID = item.Trim();
b.RSSID = item_data[1].Trim(); ;
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"));
var middleArea=getoffset(document.getElementById("middleArea"));
var rightArea=getoffset(document.getElementById("rightArea"));
//和列位置比较看当前循环模块属于那个列,并降模块ID压入相应数组
for(elemscount=0;elemscount<elems.length;elemscount++)
{

if(elems[elemscount].X>=leftArea.x&&elems[elemscount].X<middleArea.x)
{
elemSorted[0].push(elems[elemscount].ID);

}
else if(elems[elemscount].X>=middleArea.x&&elems[elemscount].X<rightArea.x)
{
elemSorted[1].push(elems[elemscount].ID);
}
else
{
elemSorted[2].push(elems[elemscount].ID);
}
}
return elemSorted;
}

//拖放模块当前列排序
function sortY(elems)
{
var temp=new elem();
if(elems.length)
{
for(sorti=0;i<elems.length-1;sorti++)
{
for(sortj=elems.length-1;sortj>sorti+1;sortj--)
{
if(elems[sortj].Y<elems[sortj-1].Y)
{
temp=elems[sortj];
elems[sortj]=elems[sortj-1];
elems[sortj-1]=temp;
}
}
}
}
return elems;
}

//拖放模块当前行排序
function sortX(elems)
{
var temp=new elem();
if(elems.length)
{
for(Sorti=0;Sorti<elems.length-1;Sorti++)
{
for(Sortj=elems.length-1;Sortj>Sorti+1;Sortj--)
{
if(elems[Sortj].X<elems[Sortj-1].X)
{
temp=elems[Sortj];
elems[Sortj]=elems[Sortj-1];
elems[Sortj-1]=temp;
}
}
}
}
return elems;
}
/*以下是控件关闭按钮客户端事件*/
function elemClose(sender)
{
var closeElemId=sender.parentNode.parentNode.id;

var closeElem=document.getElementById(closeElemId);
//删除节点
closeElem.parentNode.removeChild(closeElem);
//模块排序
var elemCloseSort=elemSort();
var userid=$get("userIdHidden");
//保存位置
PageMethods.elemOffset(elemCloseSort,userid.value);
}
最后是首页的源码可以更好的理解程序但是代码不能运行哦

首页代码