asp.net 2.0 ajax中使用PopupControlExtender

 最近在著名的4guysfromrolla.com(http://www.4guysfromrolla.com)上，有篇不錯的文章
（http://aspnet.4guysfromrolla.com/articles/070407-1.aspx)
，講的是如何使用aspajx中的controltookit中的
PopupControlExtender控制項來實現一些特殊的效果，比如文中舉了如何在一個GRIDVIEW中，當滑鼠移動到某條記錄
上時，可以顯示這條記錄的detail資訊，這樣就不用象以前那樣，又要重新開啟一個新的視窗去看detail的資訊了.下面是實現的
要點，筆記之
 
 首先，添加controltoolkit控制項中的popupcontrolextender控制項，然後點選右上方的智能標記，在彈出的視窗中，選擇
“Add Dynamic Populate Page Method”，之後會自動產生相關的事件，是AJAX在POSTBACK後觸發的事件，但奇怪的事，我裝的
最新版本的controltookit中，並沒有發現這個可以功能，只能在代碼中寫入如下了
 [System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
public static string GetDynamicContent(string contextKey)
{
   return default(string);
}
其中注意的是，contextKey這個不能改變。這個方法中的代碼等下再寫
   之後再設定popupcontrolextender控制項的一些

<ajaxToolkit:PopupControlExtender    ID="PopupControlExtender1"    runat="server"    DynamicServiceMethod="GetDynamicContent"    DynamicContextKey='<%# Eval("EmployeeID") %>'    DynamicControlID="Panel1"    TargetControlID="Image1"    PopupControlID="Panel1"    Position="right"> </ajaxToolkit:PopupControlExtender>

   其中dynamicservicemethod指定了剛才用來處理postback的方法，dynamiccontextkey這裡就是每一條記錄的ID了（這裡是employeeID，因為使用者將滑鼠移動到這記錄時，要根據這條記錄的ID去取相應的detail記錄，一對多關聯性嘛）
 而dynamiccontrolID是指定了用一個panel控制項來顯示這些detail的資訊，targetcontrolid則是當使用者移動到某個圖片時，再旁邊彈出一個PANNEL來顯示其detail資訊，詳細的用法為

TargetControlID：要和它結合在一起完成一定功能的目標控制項ID.
    PopupControlID：顯示快顯視窗的控制項ID
    Position：是一個可選項設定，指快顯視窗相對於目標控制項的位置，它的取值有：Left、Right、Top、Bottom、Center。
    CommitProperty：是一個可選項設定，用於把彈出框的返回結果賦給控制項相應屬性的屬性名稱。
    CommitScript：是一個可選項設定，在設定彈出框返回的結果後執行的附加指令碼。
    OffsetX/OffsetY：相對於快顯視窗預設位置再位移一定像素點數作為它的彈出位置，這個位移量由該屬性設定，單位是像素點數。
 
接下來，我們完成postback的方法，
[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
public static string GetDynamicContent(string contextKey)
{
   StringBuilder sTemp = new StringBuilder();
   TerritoriesBLL oTerritories = new TerritoriesBLL();
   Northwind.EmployeeTerritoriesDataTable ts = oTerritories.SelectTerritories(Convert.ToInt32(contextKey));

   if (dt.Rows.Count > 0)
   {
      sTemp.Append("<table>");
      sTemp.Append("<tr><td><b>Territories:</b></td></tr>");

      foreach (Northwind.EmployeeTerritoriesRow t in ts)
      {
         sTemp.Append("<tr><td>" + t.Territory + "</td></tr>");
      }

      sTemp.Append("</table>");
   }
   else
      sTemp.Append("<i>This employee covers no territories...</i>");

   return sTemp.ToString();
}

  在文中，只不過用將detail的資訊資料返回，然後組織成簡單的字串的形式而已了
 最後，由於我們是想實現當滑鼠移動到某一條記錄旁邊的一個圖時，用一個pannel顯示出其詳細資料框，因此要在gridview的
row_created事件中寫入
protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
   if (e.Row.RowType == DataControlRowType.DataRow)
   {
      Image i = (Image)e.Row.Cells[1].FindControl("Image1");
      i.Attributes.Add("onmouseover", "Panel1.style.display='inline';this.click();");
      i.Attributes.Add("onmouseout", "Panel1.style.display='none';");
   }
}
表示如果是datarow的話，則往其中每一行記錄旁的圖形（文中每行的記錄，都有個圖片image1)的onmouseover,onmouseout事件裡添加相關的javascript事件，這裡會把要顯示detail記錄的panel框顯示出來，同時會調用image1的click()事件，而click（）事件的調用則會回調GetDynamicContent方法，取得ajax postback()後返回的資料了