眾所周知，由社區開發的AjaxControlToolkit，為asp.net展現富用戶端效果和提高web程式效能帶來了很大的協助。裡面有大量的實現各種功能的控制項可供直接使用。
PopupControlExtender就是其中的一個。我們稱呼其為“彈出控制項”。它主要的功能是讓asp.net控制項開啟一個彈出對話方塊，來顯示其他額外的資訊或選項。彈出控制項可以包含任何內容。特別值得一提的是，彈出控制項具備通過Web服務或頁面方法取得資料的功能。
根據PopupControlExtender的主要作用和其能取得頁面資料的特性，下面我們用它來實現顯示詳情對話方塊的功能。（在這之前，我們通常的做法是使用一個Gridview+一個FormView或一個GridView+一個DetailsView）。現在我們只需要一個GridView即可。相關實現如下：
這裡一個簡單的樣本是正在做的一個許可權管理中的一個顯示資源的頁面：
.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Module.aspx.cs" Inherits="Privilege_Module" %></p><p><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %><br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head runat="server"><br /> <title></title><br /> <mce:style type="text/css"><!--<br /> .imgs<br /> {<br /> visibility: hidden;<br /> }<br /> table.result<br /> {<br /> font-family: 標楷體, 楷體;<br /> width: 800px;<br /> }<br /> td.result<br /> {<br /> border-bottom: 1px dotted #00f;<br /> padding: 4px 0px 4px 8px;<br /> }<br /> .col1<br /> {<br /> width: 100px;<br /> text-align: center;<br /> }<br /> .col2<br /> {<br /> width: 180px;<br /> text-align: center;<br /> }<br /> .col3<br /> {<br /> width: 50px;<br /> text-align: center;<br /> }<br /> .col4<br /> {<br /> text-align: right;<br /> }<br /> .col5<br /> {<br /> text-align: right;<br /> }<br /> .col6<br /> {<br /> text-align: right;<br /> }<br /> .col7<br /> {<br /> text-align: right;<br /> }</p><p>--></mce:style><style type="text/css" mce_bogus="1"> .imgs<br /> {<br /> visibility: hidden;<br /> }<br /> table.result<br /> {<br /> font-family: 標楷體, 楷體;<br /> width: 800px;<br /> }<br /> td.result<br /> {<br /> border-bottom: 1px dotted #00f;<br /> padding: 4px 0px 4px 8px;<br /> }<br /> .col1<br /> {<br /> width: 100px;<br /> text-align: center;<br /> }<br /> .col2<br /> {<br /> width: 180px;<br /> text-align: center;<br /> }<br /> .col3<br /> {<br /> width: 50px;<br /> text-align: center;<br /> }<br /> .col4<br /> {<br /> text-align: right;<br /> }<br /> .col5<br /> {<br /> text-align: right;<br /> }<br /> .col6<br /> {<br /> text-align: right;<br /> }<br /> .col7<br /> {<br /> text-align: right;<br /> }<br /> </style><br /></head><br /><body><br /> <form id="form1" runat="server"><br /> <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"><br /> </ajaxToolkit:ToolkitScriptManager><br /> <div><br /> <asp:MultiView ID="mv_Module" runat="server" ActiveViewIndex="0"><br /> <asp:View ID="View1" runat="server"><br /> <table width="100%"><br /> <tr><br /> <td align="right"><br /> <asp:Button ID="btnNew" runat="server" Text="新增" Width="80px" OnClick="btnNew_Click" /><br /> </td><br /> </tr><br /> </table><br /> <asp:GridView ID="GridView1" runat="server" Width="100%" AutoGenerateColumns="False"<br /> DataSourceID="lds_Module" OnRowCommand="GridView1_RowCommand" OnRowCreated="GridView1_RowCreated"<br /> DataKeyNames="moduleCode"><br /> <Columns><br /> <asp:TemplateField><br /> <ItemTemplate><br /> <asp:Image ID="Image1" runat="server" ImageUrl="~/Magnifier.gif" /><br /> <ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server" TargetControlID="Image1"<br /> PopupControlID="Panel2" Position="Right" DynamicServiceMethod="GetDetials" DynamicContextKey='<%# Eval("moduleCode") %>'<br /> OffsetY="50" DynamicControlID="Panel2"><br /> <Animations><br /> <OnHide><br /> <Sequence><br /> <FadeOut duration="0.2" fps="20" minimumOpacity="0" /><br /> <HideAction Visible="false" /><br /> <StyleAction Attribute="display" Value="none"/><br /> </Sequence><br /> </OnHide><br /> <OnShow><br /> <Sequence><br /> <StyleAction Attribute="display" Value="block"/><br /> <HideAction Visible="true" /><br /> <FadeIn duration="0.2" fps="20" /><br /> </Sequence><br /> </OnShow><br /> </Animations><br /> </ajaxToolkit:PopupControlExtender><br /> </ItemTemplate><br /> <ItemStyle HorizontalAlign="Center" /><br /> </asp:TemplateField><br /> <asp:BoundField DataField="moduleCode" HeaderText="moduleCode" ReadOnly="True" SortExpression="moduleCode" /><br /> <asp:BoundField DataField="name" HeaderText="name" ReadOnly="True" SortExpression="name" /><br /> <asp:CheckBoxField DataField="isMaster" HeaderText="isMaster" ReadOnly="True" SortExpression="isMaster" /><br /> <asp:TemplateField HeaderText="操作"><br /> <ItemTemplate><br /> <asp:LinkButton ID="lbtnDetail" runat="server" CommandName="MyDetail">詳情</asp:LinkButton> <br /> <asp:LinkButton ID="lbtnModify" runat="server" CommandName="MyModify">修改</asp:LinkButton> <br /> <asp:LinkButton ID="lbtnDelete" runat="server" CommandName="MyDelete">刪除</asp:LinkButton><br /> </ItemTemplate><br /> </asp:TemplateField><br /> </Columns><br /> </asp:GridView><br /> <asp:LinqDataSource ID="lds_Module" runat="server" ContextTypeName="DTMS.DTMS_PrivilegeDataContext"<br /> Select="new (moduleCode, name, linkUrl, isMaster, parentModule, moduleLevel, remark)"<br /> TableName="Module"><br /> </asp:LinqDataSource><br /> <asp:Panel ID="Panel2" runat="server" BorderStyle="Solid" BorderColor="#060F40" BorderWidth="2px"<br /> BackColor="#ffffcc" ForeColor="#060F40" Width="800px"><br /> kajsdhfkjasf</asp:Panel><br /> </asp:View>
幾個關鍵的屬性解釋：
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方法，用來從後台擷取資料：
[WebMethod(Description="返回詳情列表")]<br /> public static string GetDetials(string contextKey)<br /> {<br /> try<br /> {<br /> int mid = Convert.ToInt32(contextKey);<br /> StringBuilder strHTML = new StringBuilder();<br /> strHTML.Append("<table border='1' class='result'>");<br /> strHTML.Append("<tr class='result'><td class='col1'>模組編號</td><td class='col2'>模組名稱</td><td class='col3'>資源連結</td><td class='col4'>是否首頁</td><td class='col5'>父模組編號</td><td class='col6'>模組層級別</td><td class='col7'>備忘</td></tr>");<br /> DTMS.Module module = DTMS.BLL.PrivilegeManage_BLL.Module_BLL.GetModuleById(mid);<br /> strHTML.AppendFormat("<tr class='result'><td class='col1'>{0}</td><td class='col2'>{1}</td><td class='col3'>{2}</td><td class='col4'>{3}</td><td class='col5'>{4}</td><td class='col6'>{5}</td><td class='col7'>{6}</td></tr>",<br /> module.moduleCode, module.name, module.linkUrl, module.isMaster, module.parentModule, module.moduleLevel, module.remark);<br /> strHTML.Append("</table>");<br /> return strHTML.ToString();<br /> }<br /> catch (Exception)<br /> {<br /> return "";<br /> }<br /> }
如下：(放大鏡圖片是在GridView中的一個模板列中放置的，因為為其設定了滑鼠移入移除屬性，所以當滑鼠移入編號為17的放大鏡上時會調用以上GetDetails方法，取得詳細資料呈現出來)
注意：如果不設定table的width和用於呈現的Panel2的width可能會顯示不出詳情，所以，務必設定其寬度。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
