原文位址：http://www.dotnetbips.com/articles/36f06160-5221-4d27-a177-320927f4b962.aspx
[原文源碼下載下傳]
[譯者改後源碼下載下傳]
原文釋出日期：2007.05.06
作者：Bipin Joshi
翻譯：webabcd
介紹
ASP.NET AJAX可以使你的web應用程式具有更豐富的功能和更多的使用者響應。 本文中，我将示範如何通過ASP.NET AJAX的幫助，給像GridView這樣的資料綁定控件的資料行增加popup提示框。
初看這個需求後，你可能會想到使用AJAX Control Toolkit來實作這個功能。 因為AJAX Control ToolKit裡包含一個懸浮菜單控件（HoverMenu）。 但是，如果菜單是動态讀取的話，你就不能使用這個控件了。 一個HoverMenu Extender僅能被附加到一個目标控件。 我們可以想象一下，如果你有一個GridView，它裡面有一個HyperLinkField類型的列。 當使用者的滑鼠經過這個HyperLink的時候，你希望彈出一個Popup提示框來顯示該資料行的詳細資訊。 此時，使用AJAX Control Toolkit就不能達到我們的要求了。 本文中，我将圖文結合的示範如何完成這樣的功能。
提示框的圖例
在開講之前讓我們先來看一看這個提示框是如何顯現的。 請看下圖：
上圖示範了一個内含GridView控件的Web窗體。 這個GridView控件由一個HyperLinkField類型的列構成。 當你的滑鼠浮動到任何超鍊上的時候，就會彈出一個提示框，用來顯示改資料行的更詳細的資訊。 這段通過提示框顯示的描述文本是從資料庫中動态讀取的，也就是說它不是靜态文本。
現在就讓我們開始開發這個提示框吧！
首先建立一個名為AJAXTooltip的ASP.NET AJAX-Enabled Web Site。
建立資料庫
為了實作本示例的功能，你需要建立一個資料庫，該資料庫内有一個名為Menus的表。 右鍵單擊App_Data檔案夾，選擇“添加新項…”。 然後添加一個名為Database.mdf的SQL資料庫。
在伺服器資源浏覽器中建立一個名為Menus的表。 其表結構如下：
MenuID列是關鍵字，它是每一條菜單的唯一ID。 Text列儲存着用來在浏覽器中顯示的菜單項的文本。 NavigateUrl列為單擊該菜單項後應當連結到的URL。 最後的TooltipText列儲存的是當滑鼠經過菜單項後所顯示的詳細文本。
建完表後，再在表中插入一些資料，這樣就會給之後測試你的web程式時提供友善。
建立Web Service
ASP.NET AJAX允許你通過用戶端腳本調用web services。 在我們的這個例子中就使用了這項技術。 首先在你的web程式中建立一個web service（WebService.asmx），并在其内添加一個web method。代碼如下：
[WebMethod]
public string GetToolTipText( int menuid)
{
string strConn = ConfigurationManager.ConnectionStrings["connstr"].ConnectionString;
SqlConnection cnn = new SqlConnection(strConn);
cnn.Open();
SqlCommand cmd = new SqlCommand();
cmd.Connection = cnn;
cmd.CommandText = "select tooltiptext from menus where [email protected]";
SqlParameter p = new SqlParameter("@id", menuid);
cmd.Parameters.Add(p);
object obj = cmd.ExecuteScalar();
cnn.Close();
return obj.ToString();
}
其中的GetToolTipText()方法需要一個菜單ID作為參數，然後傳回提示框文本。 這段代碼首先使用ConfigurationManager類從web.config中擷取資料庫連接配接字元串。 然後建立一個SqlConnection和一個SqlCommand對象。 最後，使用SqlCommand類的ExecuteScalar()方法，根據菜單ID獲得相應的提示框文本。
資料庫連接配接字元串儲存在web.config中的<connectionStrings>節點下。代碼如下：
< connectionStrings >
< add name ="connstr" connectionString ="Data Source=./SQLEXPRESS;AttachDbFilename=|DataDirectory|/Database.mdf;Integrated Security=True;User Instance=True" providerName ="System.Data.SqlClient" />
</ connectionStrings >
注意Database.mdf檔案的路徑使用的是AttachDbFilename屬性。 用這種方法就會使App_Data檔案夾（DataDirectory）中的資料庫附加到SQL Server Express上。
到此之前都和以往開發web service是一樣的。 但是，這個web service是從用戶端腳本調用的。 也就是說，用戶端腳本為了調用這個web service需要由一個代理。 我們可以給這個web service增加一個[ScriptService]屬性來實作這個特性。 該屬性在System.Script.Services命名空間内。 該命名空間在System.Web.Extensions程式集中。 [ScriptService]屬性必須像下面這樣應用到web service類中。
[ScriptService]
public class WebService : System.Web.Services.WebService
這樣就完成了我們的web service
開發Web Form
現在打開預設的web form – Default.aspx – 確定其内有ScriptManager控件的執行個體。 拖拽一個SQL資料源控件到頁上，并配置它，以使它可以從Menus表中讀取全部記錄。
接下來，拖拽一個GridView控件進來并設定它的DataSourceID屬性為SqlDataSource1。 繼續設定這個GridView控件，使它有一個類型為HyperLinkField的列。 然後如下設定該HyperLinkField列的屬性：
指定DataNavigateUrlFields屬性為一個用逗号分隔的字段清單，其中所有字段的值都可以作用于URL中。 DataNavigateUrlFormatString屬性指向格式化後的URL。 因為我們的Menus表中的NavigateUrl列儲存的就是URL，是以我們不需要做任何格式化的工作。 是以DataNavigateUrlFormatString屬性隻包含一個站位符 – {0}。 在運作時，NavigateUrl列的真實值将會替代{0}。 最後，DataTextField屬性的值為超鍊所顯示的文本。
在我們如此設定了GridView控件之後，再拖拽一個Panel控件到頁上。 設定這個Panel控件的BorderStyle屬性為Solid，BorderColor屬性為#FF8000，BackColor屬性為Yellow。 這個Panel控件是用來顯示提示框的。
最後，我們需要使用ScriptManager控件添加一個指向到我們的web service的引用。 如下圖所示，定位到ScriptManager的Services屬性，然後添加一個指向到我們的web service的引用即可。
建立AJAX類
ASP.NET AJAX給用戶端腳本增加一些面向對象的特性。 為了使用這些特性，我們需要開發一個名為ToolTip的類。 這個ToolTip類是用來顯示提示框的，我們首先要隐藏它，然後調用我們的web service。 ToolTip類的全部代碼如下：
< script type = " text/javascript " >
Type.registerNamespace( " Demo " );
Demo.ToolTip = function (panelid)
{
this._panelid=panelid;
this.x=0;
this.y=0;
}
Demo.ToolTip.prototype =
{
get_PanelID:function()
{
return this._panelid;
},
set_PanelID:function(panelid)
{
this._panelid=panelid;
},
BeginShowToolTip:function(event,menuid)
{
WebService.GetToolTipText(menuid,this.
EndShowToolTip,this.OnError,this.OnTimeOut);
this.x=event.clientX + 10;
this.y=event.clientY + 10;
},
EndShowToolTip:function(result)
{
var pnl=$get(tooltip.get_PanelID());
if(pnl.innerText!=null)
{
pnl.innerText=result;
}
else
{
pnl.textContent=result;
}
pnl.style.visibility="visible";
pnl.style.display="inline";
pnl.style.position="absolute";
pnl.style.left= tooltip.x + "px";
pnl.style.top= tooltip.y + "px";
},
HideToolTip:function()
{
var pnl=$get(this.get_PanelID());
pnl.style.visibility="hidden";
pnl.style.display="none";
},
OnError:function(result)
{
alert(result.get_message());
},
OnTimeOut:function(result)
{
alert(result);
}
}
Demo.ToolTip.registerClass( " Demo.ToolTip " );
</ script >
我們需要把上面的這段腳本放到ScriptManager标記之後。 一般來說，你應該把它放到</form>标簽之後。
這段代碼首先使用Type類的registerNamespace()方法注冊了一個名為Demo的命名空間。
然後建立了一個名為ToolTip的類。 這個ToolTip類的構造函數需要一個用來顯示提示框的Panel的ID作為參數。 這個Panel的ID存儲在一個名為_panelid的私有變量中。 另外，構造函數内還聲明兩個私有變量 – （x 和 y） – 它們用來儲存滑鼠的坐标。
在ToolTip類的原型中定義了一些屬性和方法。 getter和setter方法用來讀取和設定PanelID這個屬性。 PanelID這個屬性非常簡單，就是設定和傳回變量_panelid而已。
BeginShowToolTip()方法用來調用web service的GetToolTipText()方法。 它需要兩個參數 - （event和menuid）。 這兩個參數所提供的資訊分别是目前的JavaScript事件和需要顯示的提示框的菜單項的ID。 其内部會調用web service的GetToolTipText()方法。 注意，WebService會為真實的web service生成一個用戶端代理。 GetToolTipText()方法的第1個參數是menuid。 第2、3、4個參數分别是執行成功、失敗、逾時後所調用的方法。 最後，變量x和y被設定為滑鼠目前的位置。 為了確定彈出框不會顯示在滑鼠下面，是以給x和y坐标分别加上10個像素的偏移量。 你也可以根據不同的需求調整這個偏移量。 當使用者的滑鼠經過HyperLinkField列的超鍊上的時候，就會調用這個BeginShowToolTip()方法。
一旦web service傳回了提示框的文本就會調用EndShowToolTip()方法。 web service的傳回值就是該方法的result參數。 就下來的代碼通過設定Panel的visibility、position、left和top屬性來顯示它自己。 注意，為了使我們的這個類能在IE和FireFox中工作，必須要保證innerText屬性是有效的。
HideToolTip()方法會在滑鼠離開超鍊後被調用，它會通過設定Panel的CSS屬性來隐藏掉Panel。
OnError()和OnTimeout()方法會以彈出視窗的方式來顯示相應的錯誤資訊。
最後，用我們剛建立好的這個ToolTip類的registerClass()方法将ToolTip類注冊到ASP.NET AJAX的用戶端架構。
現在，将如下這段腳本添加到web form的<head>節點中。
< script type = " text/javascript " >
var tooltip = null ;
function pageLoad()
{
tooltip=new Demo.ToolTip("Panel1");
tooltip.HideToolTip();
}
</ script >
這段腳本中有一個名為pageLoad()的函數。 當該網頁在浏覽器中加載的時候，這個函數會被ASP.NET AJAX架構自動地調用。 在這個函數内部首先會建立一個ToolTip類的執行個體， 然後調用ToolTip類的HideToolTip()方法來隐藏掉Panel。
附加上JavaScript事件處理器
我們的GridView控件所包括的資料行是依靠于資料庫中的Menus表中的記錄的。 為了使使用者的滑鼠在經過任何超鍊上的時候都調用BeginShowToolTip()方法，我們需要在GridView的RowDataBound事件内寫一些代碼。 其全部内容如下：
protected void GridView1_RowDataBound( object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
HyperLink hl = e.Row.Cells[0].Controls[0] as HyperLink;
int menuid = Convert.ToInt32(GridView1.DataKeys[e.Row.RowIndex].Value);
hl.Attributes.Add("onmouseover", "tooltip.BeginShowToolTip(event," + menuid + ")");
hl.Attributes.Add("onmouseout", "tooltip.HideToolTip()");
}
}
GridView的每一行，包括HeaderRow和FooterRow都會觸發RowDataBound事件。 是以我們首先要檢查目前行是否是DataRow，也就是說，行中必須包括實際的資料值。 如果是資料行，那麼就使用Cell中的控件集合來得到HyperLink控件。 菜單ID可以通過GridView的DataKeys集合來擷取。 最後，使用HyperLink控件的Attributes集合來增加名為onmouseover和onmouseout的用戶端事件處理器。 onmouseover對應ToolTip類的BeginShowToolTip()方法，onmouseout對應ToolTip的HideToolTip()方法。
以上就是本文的全部内容。 你現在就可以運作一下這個web form，看看我們做的這個提示框的效果。
總結
ASP.NET AJAX允許你通過用戶端腳本調用web services。 這個特性可以帶給我們很多不同以往的實作。 在本例中，我們給GridView的資料行建立了一個動态的提示框。 ASP.NET AJAX extensions可以讓我們以面向對象的方式來編寫JavaScript，它将使我們的代碼變得更健壯、更清晰。
作者：Bipin Joshi
Email：http://www.dotnetbips.com/contact.aspx
簡介：Bipin Joshi是DotNetBips.com的管理者。他是http://www.binaryintellect.com/的發起人，這個公司提供.NET framwork的教育訓練和咨詢服務。他在印度孟買為開發者提供教育訓練。他也是微軟的MVP(ASP.Net)和ASPInsiders的會員。
webabcd 2007-05-13 20:22 發表評論
文章來源:http://www.cnblogs.com/webabcd/archive/2007/05/13/744902.html