asp.net 2.0 ajax中使用PopupControlExtender
点击次数：63 次 发布日期：2008-11-26 11:01:22 作者：源代码网
|
源代码网推荐 （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()后返回的数据了 源代码网推荐 做人要厚道，请注明转自酷网动力(www.ASPCOOL.COM)。 源代码网推荐 源代码网供稿. |
