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()后返回的数据了