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

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

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

      【摘要】在本文中,我將向你展示如何使用ASP.NET AJAX框架對添加可點擊的熱點的HTML Map控件進行擴展。經擴展后,當我們的鼠標移動到這些熱點上后,即彈出關于這些熱點的詳細信息;但是,這些詳細信息都是通過AJAX異步方式從遠程服務中取得的。

      一、簡介

      首先,我們注意到,ASP.NET 2.0中也提供了一個服務器控件ImageMap。此控件是一個讓你可以在圖片上定義熱點(HotSpot)區域的服務器控件。用戶可以通過點擊這些熱點區域進行回發(PostBack)操作或者轉發到某個URL地址。典型情況下,該控件用于需要對某張圖片的局部范圍進行互動操作。然而,這個控件的不足之處在于,在點擊這些熱點區域進行回發時將導致整個Web頁面的刷新。

      在本文中,我們將基于ASP.NET AJAX技術對普通的HTML Map控件加以擴展,以達到在點擊其上的熱點區域時,在顯示有關詳細信息時僅僅導致局部的頁面更新,從而使之適應Web 2.0應用程序開發潮流。

      下面圖1展示了本文示例程序運行時的一個快照。

      圖1.使用AJAX技術擴展后的Map控件熱點點擊僅引發局部更新。

      從上圖中看到,當鼠標懸浮于上圖太陽系中的木星(木星)上時,有關該星球的細節信息將以一個彈出窗口形式友好地展示出來(注:此圖取自MSDN,這里沒有翻譯相應單詞)。

      二、 創建一個AJAX示例網站

      啟動Visual Studio 2005,選擇“文件→新建網站…”,然后選擇“ASP.NET AJAX-Enabled Web Site”模板,命名工程為“Ajax_ImageMap”,并選擇C#作為內置支持語言,最后點擊OK。

      然后,添加一個新的ASPX頁面ImageMap.aspx,并且按如下所示修改其中的HTML代碼部分:

      以下為引用的內容:
      <IMG SRC="images\solarsys.gif" WIDTH=504 HEIGHT=126 BORDER=0
      ALT="Solar System" USEMAP="#SystemMap">
      <MAP NAME="SystemMap">
      <AREA SHAPE="rect" COORDS="0,0,82,126"
      onmouseover="javascript:GetAreaInfo(event, 'sun');" onmouseout="javascript:HidePopup();">
      <AREA SHAPE="circle" COORDS="90,58,3"
      onmouseover="javascript:GetAreaInfo(event, 'merglobe');" onmouseout="javascript:HidePopup();"
      >
      <AREA SHAPE…………(省略)
      </MAP>

      在上面代碼中,我們添加了一個HTML 元素和一個HTML 元素(注:VS2005工具欄中沒有提供現成的控件,只能手工添加)。其中定義了各個星球相應的熱點形狀及坐標信息。而且,每一個熱點都有一個相應的onmouseover和onmouseout JavaScript函數與之相關聯。當鼠標在這些熱點上移動時,這兩個函數將被激活,相應信息被顯示出來。有關這兩個函數,我們將在后面詳細討論。

      三、 創建一個AJAX服務

      現在,我們需要創建一個新的Web服務,由它負責與熱點點擊相關的數據檢索任務。其實,這里所謂的“AJAX服務”,其功能與通常的Web服務是一致的。有關它們之間的細節區別在此不再贅述,F在,你可以右擊工程,然后添加一個命名為LocationService.asmx的Web服務。

      注意,在本例中我們僅想通過這個Web服務來模擬實戰環境中的一種簡單邏輯。因此,它僅包含一個Web方法;此方法負責模擬從服務器數據庫中取得客戶端需要的信息。

      在此,為了使這個ASP.NET Web服務能夠被從客戶端以AJAX方式加以調用,必須把ScriptService屬性添加到類聲明的前面,如下所示:

      以下為引用的內容:
      [ScriptService()]
        public class LocationService : System.Web.Services.WebService
        {

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

      共3頁上一頁123下一頁
      來源:模板無憂//所屬分類:.Net教程/更新時間:2008-08-22
      相關.Net教程