使用asp.net Ajax控件PopupControlExtender与GridView联合显示详情列表

简介:

众所周知,由社区开发的AjaxControlToolkit,为asp.net展现富客户端效果和提高web程序性能带来了很大的帮助。里面有大量的实现各种功能的控件可供直接使用。

PopupControlExtender就是其中的一个。我们称呼其为“弹出控件”。它主要的功能是让asp.net控件打开一个弹出对话框,来显示其他额外的信息或选项。弹出控件可以包含任何内容。特别值得一提的是,弹出控件具备通过Web服务或页面方法取得数据的功能。

根据PopupControlExtender的主要作用和其能取得页面数据的特性,下面我们用它来实现显示详情对话框的功能。(在这之前,我们通常的做法是使用一个Gridview+一个FormView或一个GridView+一个DetailsView)。现在我们只需要一个GridView即可。相关实现如下:


这里一个简单的示例是正在做的一个权限管理中的一个显示资源的页面:

.aspx:

几个关键的属性解释:

TargetControlID:要被弹出控件 扩转的控件ID;

DynamicContextKey:要传递给Web服务或页面方法的任意字符串值,这里绑定给他资源的编号:moduleCode;

DynamicControlID:需要执行了Web服务或页面方法后所回的结果的控件的ID,比如上例,我们将该属性值设为Panel2,因为其根据moduleCode提取完成数据后,显示在表格中,而表格是嵌入在Panel2中的,所以Panel2是数据的接收者。

DynamicServiceMethod:要调用的Web服务方法或页面方法。

如果使用的C#,此方法必须符合下列签名格式:

[System.Web.Services.WebMethod]

[System.Web.Script.Services.ScriptMethod]

public string DynamicServiceMethod(string contextKey) {....}

如果使用的VB.net,此方法必须符合下列签名格式:

<System.Web.Services.WebMethod>_

<System.Web.Script.Services.ScriptMethod>_

public Function DynamicServiceMethod(ByVal contextKey As String) As String

.....

End Function

备注:Web服务方法的名称不一定叫做:DynamicServiceMethod,您可以使用任意的名称作为此方法的名称,但请记住,参数的名称与类型以及返回值的类型,务必与上述格式完全相同,其他相关属性,不作详细说明(都是易于理解的)

.cs:


导入Web服务的命名空间:


为“放大镜”图片设置鼠标移入和鼠标移除属性


WebServices方法,用来从后台获取数据:


效果图如下:(放大镜图片是在GridView中的一个模板列中放置的,因为为其设置了鼠标移入移除属性,所以当鼠标移入编号为17的放大镜上时会调用以上GetDetails方法,取得详细数据呈现出来)

注意:如果不设置table的width和用于呈现的Panel2的width可能会显示不出详情,所以,务必设置其宽度。




原文发布时间为:2010-06-13


本文作者:vinoYang


本文来自云栖社区合作伙伴CSDN博客,了解相关信息可以关注CSDN博客。

目录
相关文章
|
6月前
|
前端开发 JavaScript
js + ajax实现商品列表页到详情页的跳转
js + ajax实现商品列表页到详情页的跳转
|
SQL 开发框架 前端开发
AJAX之四 Ajax控件工具集(下)
AJAX之四 Ajax控件工具集(下)
47 0
|
开发框架 前端开发 .NET
AJAX之四 Ajax控件工具集(中)
AJAX之四 Ajax控件工具集(中)
64 0
|
开发框架 前端开发 .NET
AJAX之四 Ajax控件工具集(上)
AJAX之四 Ajax控件工具集(上)
69 0
|
开发框架 前端开发 .NET
Ajax之三 Ajax服务器端控件(下)
Ajax之三 Ajax服务器端控件(下)
63 0
|
3月前
|
开发框架 JavaScript 前端开发
震撼!破解 ASP.NET 服务器控件 Button 执行顺序之谜,颠覆你的开发认知!
【8月更文挑战第16天】在ASP.NET开发中,通过Button控件实现先执行JavaScript再触后台处理的需求十分常见。例如,在用户点击按钮前需前端验证或提示,确保操作无误后再传递数据至后台深度处理。此过程可通过设置Button的`OnClientClick`属性调用自定义JavaScript函数完成验证;若验证通过,则继续触发后台事件。此外,结合jQuery也能达到相同效果,利用`__doPostBack`手动触发服务器端事件。这种方式增强了应用的交互性和用户体验。
45 8
|
6月前
|
开发框架 前端开发 JavaScript
ASP.NET AJAX使用方法概述(三)
ASP.NET AJAX使用方法概述(三)
51 1
|
2月前
|
开发框架 JavaScript 前端开发
|
6月前
|
开发框架 缓存 前端开发
安装ASP.NET AJAX (一安装)
安装ASP.NET AJAX (一安装)
99 0
|
6月前
|
SQL 开发框架 JavaScript
分享33个ASP.NET电子商务源码和40个ASP.NET控件组件源码,总有一款适合您
分享33个ASP.NET电子商务源码和40个ASP.NET控件组件源码,总有一款适合您
84 0