我的asp.net页面上有GridView,该网格中的一列是ImageButton(TemplateField,ID =“imbReserve”).单击该按钮我想显示PopUp,但是当我把TargetControlId =“imbReserve”时,我收到错误消息“无法找到ID为’imbReserve’的控件”.如何实现这一点,点击Grid里面的按钮显示PopUp?
解决方法
看看这两篇文章,只是帮我解决了这个问题
第1条:A More Traditional approach
页码:
<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" Width="95%"> <Columns> <asp:TemplateField > <ItemTemplate> <asp:Button ID="btnViewDetails" runat="server" Text="Details" OnClick="BtnViewDetails_Click" /> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="customerid" HeaderText="ID" /> <asp:BoundField DataField="companyname" HeaderText="Company" /> <asp:BoundField DataField="contactname" HeaderText="Name" /> <asp:BoundField DataField="contacttitle" HeaderText="Title" /> </Columns> </asp:GridView> </ContentTemplate> </asp:UpdatePanel> <ajaxToolKit:ModalPopupExtender ID="mdlPopup" runat="server" TargetControlID="pnlPopup" PopupControlID="pnlPopup" CancelControlID="btnClose" BackgroundCssClass="modalBackground" /> <asp:Panel ID="pnlPopup" runat="server" Width="500px" style="display:none"> <asp:UpdatePanel ID="updpnlCustomerDetail" runat="server" UpdateMode="Conditional"> <ContentTemplate> [Your Content Here] </ContentTemplate> </asp:UpdatePanel> <div align="right" style="width:95%"> <asp:Button ID="btnSave" runat="server" Text="Save" /> <asp:Button ID="btnClose" runat="server" Text="Close" Width="50px" /> </div> </asp:Panel>
请注意,GridView包含在更新面板中,Modal Extender的目标控件ID与弹出控件ID相同.这是因为ModalPopUp Extender需要一个目标控件ID,我认为这个解决方案比使用隐藏按钮更好.
现在为代码背后:
protected void BtnViewDetails_Click(object sender,EventArgs e) { // Do Anything you need to the contents of the update panel // update the contents in the detail panel this.updpnlCustomerDetail.Update(); // show the modal popup this.mdlPopup.Show(); }
第2条:Uses Clientside Javascript
客户端Javascript
<script type="text/javascript"> // keeps track of the delete button for the row // that is going to be removed var _source; // keep track of the popup div var _popup; function showConfirm(source){ this._source = source; this._popup = $find('mdlPopup'); // find the confirm ModalPopup and show it this._popup.show(); } function okClick(){ // find the confirm ModalPopup and hide it this._popup.hide(); // use the cached button as the postback source __doPostBack(this._source.name,''); } function cancelClick(){ // find the confirm ModalPopup and hide it this._popup.hide(); // clear the event source this._source = null; this._popup = null; }
页码:
<asp:GridView ID="gvToDoList" runat="server" AutoGenerateColumns="false" > <Columns> <asp:BoundField DataField="ID" HeaderText="ID" /> <asp:BoundField DataField="Item" HeaderText="Description" /> <asp:BoundField DataField="IsCompleted" HeaderText="Complete?" /> <asp:TemplateField ControlStyle-Width="50px" HeaderStyle-Width="60px" > <ItemTemplate> <asp:Button ID="btnDelete" runat="server" OnClientClick="showConfirm(this); return false;" OnClick="BtnDelete_Click" Text="Delete" /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> <ajaxToolKit:ModalPopupExtender BehaviorID="mdlPopup" runat="server" TargetControlID="div" PopupControlID="div" OkControlID="btnOk" OnOkScript="okClick();" CancelControlID="btnNo" OnCancelScript="cancelClick();" BackgroundCssClass="modalBackground" /> <div id="div" runat="server" align="center" class="confirm" style="display:none"> <img align="absmiddle" src="Img/warning.jpg" />Are you sure you want to delete this item? <asp:Button ID="btnOk" runat="server" Text="Yes" Width="50px" /> <asp:Button ID="btnNo" runat="server" Text="No" Width="50px" /> </div>
再次注意,Modal Pop Up Extender的目标控件ID与弹出控件ID相同.还要注意模板字段中按钮的OnClientClick属性,确保包含“return false;”.
在其后面的代码中需要使用onClick(或onCommand)事件处理程序来执行您需要执行的操作.
我成功地尝试了这两种方法.
希望这两个中的一个适合你.