|
 |
栏目导栏 |
|
| |
|
|
|
|
|
资料搜索 |
|
| |
|
|
|
|
|
热门文章 |
|
| |
|
|
|
|
|
最新文章 |
|
| |
|
|
|
| |
| |
|
|
|
| |
| asp.net 2.0 ajax中使用PopupControlExtender |
|
如何使用aspajx中的controltookit中的 mv5Linux联盟
PopupControlExtender控件来实现一些特殊的效果，比如文中举了如何在一个GRIDVIEW中，当鼠标移动到某条记录 mv5Linux联盟
上时，可以显示这条记录的detail信息，这样就不用象以前那样，又要重新打开一个新的窗口去看detail的信息了.下面是实现的 mv5Linux联盟
要点，笔记之 mv5Linux联盟
mv5Linux联盟
首先，添加controltoolkit控件中的popupcontrolextender控件，然后点选右上角的智能标记，在弹出的窗口中，选择 mv5Linux联盟
“Add Dynamic Populate Page Method”，之后会自动生成相关的事件，是AJAX在POSTBACK后触发的事件，但奇怪的事，我装的 mv5Linux联盟
最新版本的controltookit中，并没有发现这个可以功能，只能在代码中写入如下了 mv5Linux联盟
[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()] mv5Linux联盟
public static string GetDynamicContent(string contextKey) mv5Linux联盟
{ mv5Linux联盟
return default(string); mv5Linux联盟
} mv5Linux联盟
其中注意的是，contextKey这个不能改变。这个方法中的代码等下再写 mv5Linux联盟
之后再设置popupcontrolextender控件的一些 mv5Linux联盟
<ajaxToolkit:PopupControlExtender mv5Linux联盟
ID="PopupControlExtender1" mv5Linux联盟
runat="server" mv5Linux联盟
DynamicServiceMethod="GetDynamicContent" mv5Linux联盟
DynamicContextKey='<%# Eval("EmployeeID") %>' mv5Linux联盟
DynamicControlID="Panel1" mv5Linux联盟
TargetControlID="Image1" mv5Linux联盟
PopupControlID="Panel1" mv5Linux联盟
Position="right"> mv5Linux联盟
</ajaxToolkit:PopupControlExtender> mv5Linux联盟
mv5Linux联盟
其中dynamicservicemethod指定了刚才用来处理postback的方法，dynamiccontextkey这里就是每一条记录的ID了（这里是employeeID，因为用户将鼠标移动到这记录时，要根据这条记录的ID去取相应的detail记录，一对多关系嘛） mv5Linux联盟
而dynamiccontrolID是指定了用一个panel控件来显示这些detail的信息，targetcontrolid则是当用户移动到某个图片时，再旁边弹出一个PANNEL来显示其detail信息，详细的用法为 mv5Linux联盟
mv5Linux联盟
TargetControlID：要和它结合在一起完成一定功能的目标控件ID. mv5Linux联盟
PopupControlID：显示弹出窗口的控件ID mv5Linux联盟
Position：是一个可选项设置，指弹出窗口相对于目标控件的位置，它的取值有：Left、Right、Top、Bottom、Center。 mv5Linux联盟
CommitProperty：是一个可选项设置，用于把弹出框的返回结果赋给控件相应属性的属性名称。 mv5Linux联盟
CommitScript：是一个可选项设置，在设置弹出框返回的结果后执行的附加脚本。 mv5Linux联盟
OffsetX/OffsetY：相对于弹出窗口默认位置再偏移一定像素点数作为它的弹出位置，这个偏移量由该属性设置，单位是像素点数。 mv5Linux联盟
mv5Linux联盟
接下来，我们完成postback的方法， mv5Linux联盟
[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()] mv5Linux联盟
public static string GetDynamicContent(string contextKey) mv5Linux联盟
{ mv5Linux联盟
StringBuilder sTemp = new StringBuilder(); mv5Linux联盟
TerritoriesBLL oTerritories = new TerritoriesBLL(); mv5Linux联盟
Northwind.EmployeeTerritoriesDataTable ts = oTerritories.SelectTerritories(Convert.ToInt32(contextKey)); mv5Linux联盟
mv5Linux联盟
if (dt.Rows.Count > 0) mv5Linux联盟
{ mv5Linux联盟
sTemp.Append("<table>"); mv5Linux联盟
sTemp.Append("<tr><td><b>Territories:</b></td></tr>"); mv5Linux联盟
mv5Linux联盟
foreach (Northwind.EmployeeTerritoriesRow t in ts) mv5Linux联盟
{ mv5Linux联盟
sTemp.Append("<tr><td>" + t.Territory + "</td></tr>"); mv5Linux联盟
} mv5Linux联盟
mv5Linux联盟
sTemp.Append("</table>"); mv5Linux联盟
} mv5Linux联盟
else mv5Linux联盟
sTemp.Append("<i>This employee covers no territories...</i>"); mv5Linux联盟
mv5Linux联盟
return sTemp.ToString(); mv5Linux联盟
} mv5Linux联盟
mv5Linux联盟
在文中，只不过用将detail的信息数据返回，然后组织成简单的字符串的形式而已了 mv5Linux联盟
最后，由于我们是想实现当鼠标移动到某一条记录旁边的一个图时，用一个pannel显示出其详细信息框，因此要在gridview的 mv5Linux联盟
row_created事件中写入 mv5Linux联盟
protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) mv5Linux联盟
{ mv5Linux联盟
if (e.Row.RowType == DataControlRowType.DataRow) mv5Linux联盟
{ mv5Linux联盟
Image i = (Image)e.Row.Cells[1].FindControl("Image1"); mv5Linux联盟
i.Attributes.Add("onmouseover", "Panel1.style.display='inline';this.click();"); mv5Linux联盟
i.Attributes.Add("onmouseout", "Panel1.style.display='none';"); mv5Linux联盟
} mv5Linux联盟
} mv5Linux联盟
表示如果是datarow的话，则往其中每一行记录旁的图形（文中每行的记录，都有个图片image1)的onmouseover,onmouseout事件里添加相关的javascript事件，这里会把要显示detail记录的panel框显示出来，同时会调用image1的click()事件，而click（）事件的调用则会回调GetDynamicContent方法，取得ajax postback()后返回的数据了 mv5Linux联盟
Linux联盟收集整理 ,转贴请标明原始链接,如有任何疑问欢迎来本站Linux论坛讨论 |
|
|
|
|
|
