前台代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="论文成果展示.aspx.cs" Inherits="论文成果展示" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> .style1 { 33px; } </style> </head> </head> <body> <form id="form1" runat="server"> <div class="titlebar"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Panel ID="pan5" runat="server" Style="display: none"> <asp:Panel ID="Panel1" runat="server"> <table border="0" cellpadding="0" cellspacing="0" style=" 550px; height: 230px; border: #dcdcdc 1px solid; background-color: #ffffff; margin: 10px auto;"> <tr style="height: 26px"> <td style="height: 26px; vertical-align: top; background: url(../images/pupop_bg.png) repeat-x 0 0;"> <span style="float: left; margin-top: 2px; color: White"> 添加诊断</span> <span style="float: right; margin-right: 1px; margin-top: 5px;" onmouseover="this.src='../images/c2.gif'" onmouseout="this.src='../images/c1.gif'"> <asp:ImageButton ID="imgbtnCancel" runat="server" ImageUrl="~/images/add.gif"/> </span> </td> </tr> <tr> <td valign="top"> <table width="100%" style="margin: 10px auto;"> <tr align="center"> <td style=" 100px; text-align: right; height: 40px"> 诊断编码： <asp:Label ID="lblOrderTypeId" runat="server" Visible="false"></asp:Label> </td> <td style="text-align: left;"> <asp:TextBox ID="txtCode" runat="server" CssClass="txt"></asp:TextBox> </td> <td style="text-align: right; height: 40px"> 诊断名称： </td> <td style="text-align: left;"> <asp:TextBox ID="txtName" runat="server" CssClass="txt"></asp:TextBox> </td> </tr> <tr align="center"> <td style="text-align: right;"> 创建时间： </td> <td style="text-align: left;"> <asp:TextBox ID="txtTime" runat="server" CssClass="txt"></asp:TextBox> </td> <td style=" 80px; text-align: right;"> </td> <td style="text-align: left;"> </td> </tr> <tr align="center"> <td style="text-align: right; height: 40px"> 备注： </td> <td style="text-align: left; vertical-align: top;" colspan="3" rowspan="3"> <asp:TextBox ID="txtRemarks" runat="server" CssClass="txt" TextMode="MultiLine" Height="106px" Width="402px"></asp:TextBox> </td> </tr> <tr align="center"> <td style="text-align: right; height: 40px"> </td> </tr> <tr align="center"> <td style="text-align: right; height: 40px"> </td> </tr> <tr> <td colspan="4" align="center" style="height: 40px"> </td> </tr> </table> </td> </tr> </table> </asp:Panel> </asp:Panel> <input id="hidMesg" type="hidden" runat="server" /> <cc:ModalPopupExtender ID="MsgShow" runat="server" BackgroundCssClass="modalBackground" TargetControlID="hidMesg" PopupControlID="pan5" CancelControlID="imgbtnCancel" DropShadow="false"> </cc:ModalPopupExtender> </ContentTemplate> </asp:UpdatePanel> </div> <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /> </td> </tr> <tr> <td align="right"> <webdiyer:AspNetPager ID="AspNetPager1" runat="server" AlwaysShow="True" CustomInfoSectionWidth="20%" CustomInfoTextAlign="Right" FirstPageText="第一页" HorizontalAlign="Left" LastPageText="末一页" NavigationButtonType="Image" NextPageText="后一页" PageIndexBoxType="TextBox" PagingButtonSpacing="8px" PrevPageText="前一页" ShowCustomInfoSection="Right" ShowPageIndexBox="Always" TextAfterPageIndexBox="页" UrlPaging="false" TextBeforePageIndexBox="跳到第" Width="600px" OnPageChanged="AspNetPager1_PageChanged" CustomInfoHTML="共%PageCount%页，当前为第%CurrentPageIndex%页"> </webdiyer:AspNetPager> </td> </tr> </table> </div> </form> <p> </p> </body> </html>
后台界面
protected void Button1_Click(object sender, EventArgs e) { MsgShow.Show(); }
首先使用ajax的时候 首先先加入 <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
然后加入
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Panel ID="pan6" runat="server" Style="display: none" >
<asp:Panel ID="pan7" runat="server">
<asp:Button ID="Button2" runat="server" Text="Button" />
此处加上 需要 的模板html代码
</asp:Panel>
</asp:Panel>
<input id="Hidden1" type="hidden" runat="server" />
<cc:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modalBackground"
TargetControlID="hidMesg" PopupControlID="pan6" CancelControlID="Button2" DropShadow="false">
</cc:ModalPopupExtender>
</ContentTemplate>
</asp:UpdatePanel>
这里说明一下 ModalPopupExtender的所的一些属性
ModalPopupExtenderr控件属性描述
TargetControlID : 控制是否弹出的控件的ID.
PopupDragHandleControlID : 允许拖拽的控件的ID.
PopupControlID: 指定要弹出的控件的ID.
BackgroundCssClass: 指定弹出控件后其它内容的样式.
DropShadow: 弹出的控件是否有阴影效果.
OkControlID:确认按钮的ID.
OnOkScript : 单击［确认］按钮时要执行的脚本方法
CancelControlID :取消按钮的ID.
OnCancelScript : 单击［取消］按钮时要执行的脚本方法. X,Y :指定弹出层的位置.
RepositionMode : 指示当页面窗口调整大小或滚动时,弹出层是否要进行位置移动