PopUpExtender在ImageButton裏面的GridView問題

Question

我在我的asp.net頁面上有GridView，那個網格中的一列是ImageButton（ID爲「imbReserve」的TemplateField）。點擊那個按鈕，我想顯示彈出窗口，但是當我把TargetControlId =「imbReserve」，我得到錯誤信息「無法找到帶ID的控件'imbReserve'」。如何實現這一點，點擊Grid Display PopUp中的按鈕？

Answer 1

該問題與頁面呈現給客戶端時真實ID發生更改有關。

在瀏覽器中打開頁面源並查看從asp.net生成的ID。然後使用該ID的TargetControlID物業內

這種問題存在，在ASP.NET所有的模板控件

一個更清潔的方式將是在那裏你可以到ModalPopupExtendr的TargetControlID屬性綁定頁面加載使用dinamically產生

modalPopupExtender.TargetControlID = myTemplateControl.ClientID; 

Answer 2

看一看這2篇文章的ClientID財產，只是幫我走出這個問題

第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被包裹在一個更新面板還對於目標控制ID Modal Extender與Pop Up Control 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> 

請再次注意，模式彈出式擴展器的目標控制ID與彈出控制ID相同。還要注意模板字段中按鈕上的OnClientClick屬性，確保包含「return false;」。

所有在它後面的代碼中需要的onClick（或onCommand）事件處理程序來完成你需要做的事情。

我已經成功地嘗試了這兩種方法。

希望這兩個作品中的一個適合你。