使用ASP.NET AJAX框架擴展HTML Map控件(3)_.Net教程

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

推薦：ASP.NET調(diào)用oracle存儲過程實現(xiàn)快速分頁
《使用 ADO.NET 訪問 Oracle 9i 存儲過程》見下面的介紹（如果對這個不怎么懂的，還是先看看下面文章） http://www.microsoft.com/china/MSDN/library/data/dataAccess/DMSDNorsps.mspx 包

這兩個參數(shù)都將用于描述在頁面顯示的彈出窗口。另外兩個私有變量_xAxis和_yAxis用于描述彈出窗口的顯示位置。典型情況下，我們最好在構(gòu)造器中聲明所有的私有成員。

接下來，我們將使用原型設計模式編寫該類中的成員函數(shù)和屬性：

以下為引用的內(nèi)容：
MyServices.Location.prototype =
{
get_uiElement: function()
{
return this._uiElement;
},
set_uiElement: function(value)
{
this._uiElement = value;
},
get_uiBody: function()
{
return this._uiBody;
},
set_uiBody: function(value)
{
this._uiBody = value;
},

注意，這里的UI元素屬性方法的定義方式非常類似于.NET中各種語言中的定義形式。

下面的成員函數(shù)是我們的重點，它負責調(diào)用遠程的Web服務：

以下為引用的內(nèi)容：
ShowPopupinfo: function(event, areaName)
{
MyServices.LocationService.GetAreaInfo(areaName,
Function.createDelegate(this, this.OnCompleted),
this.OnError, //負責進行錯誤處理的回叫函數(shù)
this.OnTimeOut); //負責進行超時處理的回叫函數(shù)
this._xAxis = event.clientX;
this._yAxis = event.clientY;
}

上面的代碼展示的是非常典型的從客戶端調(diào)用Web服務的方法：

1)形式與調(diào)用一個普通的本地方法幾乎一樣方便;

2)Function.createDelegate函數(shù)是ASP.NET AJAX客戶端開發(fā)中的極為重要的全局函數(shù)。創(chuàng)建此函數(shù)的原始目的之一是解決this關(guān)鍵字的問題。在一個由一個DOM元素引發(fā)的事件處理器中，this關(guān)鍵字總是引用此DOM元素而不是類本身。但在此，我們使用這個函數(shù)的理由是，使得AJAX環(huán)境在與激發(fā)Web服務的相同的類實例中調(diào)用成功時的回叫函數(shù)。當你需要引用客戶端類的屬性和方法時，這是相當重要的。簡言之，使用此函數(shù)將使得訪問調(diào)用Web服務的客戶端類的屬性和方法安全而準確。否則，進行異步調(diào)用的客戶端類實例將為null，因為Web服務的響應是在另一個不同的上下文中執(zhí)行的—這個上下文不再等同于發(fā)出異步Web調(diào)用請求的那個上下文。

3)有意思的是，這里的GetAreaInfo方法并不是我們在前面創(chuàng)建的Web服務中的那個，而是屬于在運行時刻創(chuàng)建的Web服務代理類—此代理類作為一個客戶端代理訪問服務器端的ASMX Web服務。

上面ShowPopupInfo函數(shù)中的最后兩行代碼中，使用事件的輸入?yún)?shù)設置兩個私有變量xAxis和yAxis的值。我們在此的目的是，在與用戶點擊位置盡可能近的地方顯示彈出窗口。

下面是調(diào)用成功時對應的回叫函數(shù)的實現(xiàn)代碼：

以下為引用的內(nèi)容：
OnCompleted: function(result, userContext, methodName)
{
var uiElement = $get(this.get_uiElement());
var uiBody = $get(this.get_uiBody());
if (uiBody != null)
{
var textNode = uiBody.firstChild;
if (!textNode)
{
textNode = document.createTextNode(result);
uiBody.appendChild(textNode);
}
else
{
textNode.nodeValue = result;
}
if (uiElement != null)
{
uiElement.style.visibility = "visible";
uiElement.style.display = "inline";
uiElement.style.left = this._xAxis "px";
uiElement.style.top = this._yAxis "px";
}
}
},

內(nèi)容相當簡單—把從服務器端返回的數(shù)據(jù)設置為彈出窗口的顯示內(nèi)容并根據(jù)情況確保顯示此窗口。

在創(chuàng)建客戶端類的最后，我們還必須告訴AJAX框架在客戶端注冊之，以便可以從客戶端訪問它：

以下為引用的內(nèi)容：
MyServices.Location.registerClass("MyServices.Location");

至此，客戶端類MyServices.Location已經(jīng)成功創(chuàng)建。那么，如何使用它呢?

首先，我們需要在頁面加載時定義客戶端類的一個新的實例。為此，我們需要在pageLoad函數(shù)中編程：

　var location = null;
　　function pageLoad(sender, args) {
　　location = new MyServices.Location("modal", "modalBody");
　　location.HidePopupInfo();
　　}

上面的代碼簡單地創(chuàng)建MyServices.Location類的一個新的實例。然后調(diào)用客戶端類的成員函數(shù)之一來隱藏頁面中的彈出窗口。為什么我們在pageLoad函數(shù)中創(chuàng)建客戶端類的一個實例呢?原因在于，當AJAX環(huán)境控制流程到達pageLoad函數(shù)時，所有的AJAX客戶端和用戶定義的JavaScript代碼都已經(jīng)被成功加載。因此，這一時刻我們可以安全地訪問任何用戶或系統(tǒng)定義的JavaScript代碼。

其它幾個工具函數(shù)比較簡單，在此不再贅述。

五、總結(jié)

在本文中，我向你展示了如何通過創(chuàng)建一個AJAX服務和創(chuàng)建自己定制的客戶端類來擴展HTML Map控件。在擴展后的控件中，當點擊圖像中的某個區(qū)域時，我們可以通過新型的AJAX方式來給出相關(guān)細節(jié)信息，而不必刷新整個Web頁面。盡管在大部分Web應用中我們較少應用到這種Map控件(也許因此VS2005工具欄中省略之)，但如果開發(fā)大量圖片、圖像及地圖操作相關(guān)的Web應用時，基于本文AJAX改造后的Map控件一定會讓你的Web應用更加絢爛多彩。

【附】本文源碼調(diào)試環(huán)境：Windows XP專業(yè)版 Visual Studio 2005 ASP.NET AJAX 1.0。

本文收集整理自互聯(lián)網(wǎng),若您是原文作者,請來信更改作者及出處Post#vip.qq.com（把#改為@）

分享：復雜ASP.NET服務器控件調(diào)整小技巧
在創(chuàng)建或修改布局復雜ASP.NET服務器端控件時，大量的時間都是在編譯，等待JIT，修改，編譯，JIT... 這樣一個循環(huán)中，而且兩個編譯常常還很耗費時間。特別地，當控件已集成在頁面之中后，在出現(xiàn)