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

      編輯Tag賺U幣
      教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!

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

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

      接下來(lái),我們將使用原型設(shè)計(jì)模式編寫該類中的成員函數(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中各種語(yǔ)言中的定義形式。

      下面的成員函數(shù)是我們的重點(diǎn),它負(fù)責(zé)調(diào)用遠(yuǎn)程的Web服務(wù):

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

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

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

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

      3)有意思的是,這里的GetAreaInfo方法并不是我們?cè)谇懊鎰?chuàng)建的Web服務(wù)中的那個(gè),而是屬于在運(yùn)行時(shí)刻創(chuàng)建的Web服務(wù)代理類—此代理類作為一個(gè)客戶端代理訪問(wèn)服務(wù)器端的ASMX Web服務(wù)。

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

      下面是調(diào)用成功時(shí)對(duì)應(yīng)的回叫函數(shù)的實(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)容相當(dāng)簡(jiǎn)單—把從服務(wù)器端返回的數(shù)據(jù)設(shè)置為彈出窗口的顯示內(nèi)容并根據(jù)情況確保顯示此窗口。

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

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

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

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


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

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

      其它幾個(gè)工具函數(shù)比較簡(jiǎn)單,在此不再贅述。

      五、總結(jié)

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

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

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

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

      共3頁(yè)上一頁(yè)123下一頁(yè)
      來(lái)源:模板無(wú)憂//所屬分類:.Net教程/更新時(shí)間:2008-08-22
      相關(guān).Net教程