超簡單實現 .NET開發類似Web Parts的功能_.Net教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

推薦：數據訪問層的第一種實現:Access SQL
經過上面篇文章的介紹，整個系統的框架算是基本搭建完了，下面，我們要具體實現各個層次。關于數據訪問層的實現，我準備討論三種實現方式，這一篇文章討論第一種：Access 動態生成SQL。顧名

微軟推出SharePoint2003 ，SharePoint2007以來，一個新的技術Web Parts也隨著推出來了。剛一接觸到這個東西，作為了一個開發人員，感到十分的好奇，這雖然算不上一次技術上的革命，但對用戶的體驗來講，卻是一個實實在在的好東東，能給使用的用戶帶來使用軟件的幸福感，自在感。一句話，真是太棒了！

看了很多軟件已經實現了這個功能，像google這種大公司也早就實現了這種功能，還有許多其它公司也實現了類似的功能。最近我們在做E8.HelpDesk For ITSM產品，這樣的好東西怎么能放過了。。。

Web Parts的實現有多種方式，由于對.Net 2.0的Web Parts不是很熟，我們用最方便快捷的javascrpt腳本來實現，實現的原理是用Iframe，用戶可以自定義自己的桌面，每個Iframe里可以放入一個網頁地址，具體要放什么網頁，我們可以做一個管理界面，加一個自定義桌面表，可以根據自己的需要，不斷的延伸這個功能，做到非常的靈活，強大，這里面有用的XmlHttp技術，讓用戶自定義自已的桌面時，休驗到快速的效果，最后的效果，類似于google的定義功能。現在把實現的腳本代碼貼出來，與大家共享，共同進步。

// Input 0
/**
* get element
* document.getElementById的封裝

* 如果瀏覽器不支持getElementById方法則返回null
*/
function _getElementById(a)
{
return document.getElementById?document.getElementById(a):null
}
/**
* get elements tag name
* document.getElementsByTagName的封裝

* 根據tagName返回數組，*返回所有tag。

* 如果瀏覽器不支持getElementsByTagName方法，則返回空數組

*/
function _getElementsByTagName(a)
{
return document.getElementsByTagName?document.getElementsByTagName(a):new Array()
}

//標志瀏覽器是否為Safari
var isSafari=navigator.userAgent.indexOf("Safari")>=0;

/**
* 一個標準的colArrayAX替換頁面內容典范
* 變量a為地址，aa為回掉處理函數

*/
function _sendXMLRequest(theURL,aa)
{
var xmlHttpObj=getXMLHttpObj();
if(!xmlHttpObj||isSafari&&!aa)
{//特殊瀏覽器特殊照顧

(new Image()).src=theURL;
}
else
{//正常的瀏覽器，用XMLHTTP顯示內容
xmlHttpObj.open("GET",theURL,true);
xmlHttpObj.setRequestHeader( "CONTENT-TYPE ", "application/x-www-form-urlencoded ");
xmlHttpObj.send(null);
}
}
/**
* 拿到一個可用的XMLHttpRequest對象
*/
function getXMLHttpObj()
{
var a=null;
if(window.ActiveXObject)
{
a=new ActiveXObject("Msxml2.XMLHTTP");
if(!a)
{
a=new ActiveXObject("Microsoft.XMLHTTP");
}
}
else if(window.XMLHttpRequest)
{
a=new XMLHttpRequest();
}
return a;
}

function _del(a)
{
msg="確認不在桌面上顯示該模塊么?\n\n您可以通過自定義桌面恢復顯示！";
if(window.confirm(msg))
{
var module=_getElementById("module_" a);
if(module)
module.style.display="none";
aI();
}
return false
}

/**
* 查找CSS，將class名字為a的aa自段定義值為ab
* 例如setCSSAttrib("medit","display", "none");
* 則代表將.media的display定義為none
*
*/
function setCSSAttrib(clasName,attrName,attrValue)
{
if(document.styleSheets)
{//瀏覽器有styleSheets，查找CSS列表并修改

clasName="." clasName;
for(var i=0;i<document.styleSheets.length;i )
{
var classI=document.styleSheets[i];
var rulesI=classI.rules;
if(!rulesI)
{
rulesI=classI.cssRules;
if(!rulesI){return}
}
for(var j=0;j<rulesI.length;j )
{
if(rulesI[j].selectorText.toLowerCase()==clasName.toLowerCase())
{
rulesI[j].style[attrName]=attrValue
}
}
}
}
else
{//瀏覽器不支持styleSheets，一個元素一個元素地找并修改-_-b
var elementI=_getElementsByTagName("*");
for(var i=0;i<elementI.length;i )
{
if(elementI[i].className==clasName)
{
elementI[i].style[attrName]=attrValue
}
}
}
}

var aC="";

var _pnlo;
var _mod;
var ay=false;

var aq=0;

var colArray=[];
var ap=0;
var am=null;

/**
* 如果am為null，將am創建為<div>標簽，暫時先不顯示，鼠標形狀為move，

* 背景為白色，底部padding為0px，直接創建在<body>下。最后返回am
*/
function createDiv()
{
if(!am)
{
am=document.createElement("DIV");
am.style.display="none";
am.style.position="absolute";
am.style.cursor="move";
am.style.backgroundColor="#ffffff";
am.style.paddingBottom="0px";
document.body.appendChild(am)
}
return am
}

/**
* 核心代碼
* al是這樣一個對象，它有一個屬性obj，默認為null，和init/start/drag/end/fixE五個方法
* init() ---- 設置初始方法
* 設置元素a的onmousedown事件響應為al.start方法，并設置am（那個直接隸屬于
* <body>的隱藏<div>）的左邊在頁面左上角（如果沒有設置過的話），設置上a的空拖拽
* 事件
* start() --- 拖拽開始事件

* 設置全局變量aa和al.obj為事件源（同一時刻只能有一個box在drag狀態）。得到隱藏div
* 元素的坐標和當前事件的鼠標坐標，回掉aa變量在initHead()函數中注冊的onDragStart()函數（將
* 隱藏div內容填好，移動到鼠標位置）。將當前鼠標坐標記錄在aa變量中。設置鼠標移動

* 事件響應和鼠標抬起事件響應。

* drag() ---- 拖拽中事件

* 設置全局變量aa為事件源。得到當前鼠標坐標和移動中的div的位置，與上次鼠標坐標相比

* 計算出偏移量，修改移動中的div的坐標。記錄鼠標當前位置，回掉aa的onDrag()函數。設置

* al.obj為null，等待下個box的移動。

* end() ----- 拖拽結束事件
* 設置onmousemove和onmouseup不響應事件，回掉aa的onDragEnd()函數。

* fixE()
* 確保瀏覽器兼容性，保證變量a為event事件，并修正事件的layerX/Y（似乎沒有用處）
*/
var al = {"obj":null,
"init":function(a){
a.onmousedown=al.start;
if ( isNaN(parseInt(createDiv().style.left)) ) {
createDiv().style.left="0px";
}
if ( isNaN(parseInt(createDiv().style.top)) ) {
createDiv().style.top="0px";
}
a.onDragStart=new Function();
a.onDragEnd=new Function();
a.onDrag=new Function()
},
"start":function(a){
var aa=al.obj=this;
a=al.fixE(a);
var ab=parseInt(createDiv().style.top);
var ac=parseInt(createDiv().style.left);
aa.onDragStart(ac,ab,a.clientX,a.clientY);
aa.lastMouseX=a.clientX;
aa.lastMouseY=a.clientY;
document.onmousemove=al.drag;
document.onmouseup=al.end;
return false
},
"drag":function(a){
a=al.fixE(a);
var aa=al.obj;
var ab=a.clientY;
var ac=a.clientX;
var ad=parseInt(createDiv().style.top);
var ae=parseInt(createDiv().style.left);
var af,ag;
af=ae ac-aa.lastMouseX;
ag=ad ab-aa.lastMouseY;
createDiv().style.left=af "px";
createDiv().style.top=ag "px";
aa.lastMouseX=ac;
aa.lastMouseY=ab;
aa.onDrag(af,ag,a.clientX,a.clientY);
return false
},
"end":function(){
document.onmousemove=null;
document.onmouseup=null;
al.obj.onDragEnd(parseInt(createDiv().style.left),parseInt(createDiv().style.top));
al.obj=null
},
"fixE":function(a){
if (typeof a=="undefined") {
a=window.event;
}
if (typeof a.layerX=="undefined") {
a.layerX=a.offsetX;
}
if (typeof a.layerY=="undefined") {
a.layerY=a.offsetY;
}
return a
}
};

var aw=false;
/**
* 本函數作用是設置所有標題可拖動，給元素加入拖拽事件響應代碼。

* 本函數只執行一次，aw為true時函數直接返回。

* 對第一列c_1、第二列c_2、第三列c_3做初始設置。每一列下均有若干id為m_x的<div>標簽
* 每一個<div>標簽內容均為一個<table>，該table中有一個<td>命名為m_x_h，這就是可可拖拽的

* 標題。得到這個<td>元素，加入拖拽事件代碼，就是本函數的作用。

*/
function initHead(a)
{
if(aw)return;
aw=true;
//設置全局變量colArray為當前要處理的列數組，也即三個id為c_1、c_2和c_3的<td>元素
colArray=a;
//數組colArray中的每個元素都要執行。其實數組colArray只有三個元素，c_1、c_2和c_3，也即第一/二/三列
for(var i=0;i<colArray.length;i )
{//對所有c_x的子結點遍歷，其實也就是命名為m_x的div標簽。最后一個div標簽有其它用處，
//故此處length-1
for(var j=0;j<colArray[i].childNodes.length-1;j )
{
var module_i=colArray[i].childNodes[j];
var head_i=_getElementById(module_i.id "_head");
if(!head_i)
continue;

//此刻，已經得到了id為m_x_h的<td>元素，即box的標題td
//將整個大<div>記錄在ad對象的module屬性中，這個module屬性是？？？？
head_i.module=module_i;
//用al對象的init方法初始化可拖拽標題td。

al.init(head_i);

//得到m_x_h的<a>元素，即id為m_x_url的<a>
var url_i=_getElementById(module_i.id "_url");
if(url_i)
{//設置<a>的h屬性為ad（即上層標題的<td>元素）,這個h屬性是？？？？
url_i.h=head_i;
//當超級鏈接被點中，設置上層標題<td>的href和target屬性

//為當前超級鏈接的href和target屬性。這樣用戶也可以拖超級鏈接

url_i.onmousedown=function() {
this.h.href=this.href;
this.h.target=this.target;
}
}

分享：依賴注入機制及IoC的設計與實現
我們設計的分層架構，層與層之間應該是松散耦合的。因為是單向單一調用，所以，這里的“松散耦合”實際是指上層類不能具體依賴于下層類，而應該依賴于下層提供的一個接口。這樣，上層