PopUpExtender sur ImageButton à l'intérieur du problème GridView

Question

J'ai GridView sur ma page asp.net, une colonne dans cette grille est ImageButton (TemplateField avec ID = "imbReserve"). En cliquant sur ce bouton, je veux afficher PopUp, mais quand je mets TargetControlId = "imbReserve", je reçois un message d'erreur "Un contrôle avec l'ID 'imbReserve' n'a pas pu être trouvé". Comment y parvenir, cliquez sur le bouton à l'intérieur de Grid show PopUp?

Answer 1

Le problème est lié au fait que l'ID réel est modifié lorsque la page est rendue au client.

Ouvrez votre source de page dans le navigateur et examinez l'ID généré à partir de asp.net. Utilisez ensuite cet ID dans la propriété TargetControlID

Ce genre de problème est présent avec tous les contrôles ASP.NET dans templated

Une façon plus propre sera de lier la propriété TargetControlID de la ModalPopupExtendr sur chargement de la page où vous pouvez utiliser la propriété ClientID dinamically généré

modalPopupExtender.TargetControlID = myTemplateControl.ClientID; 

Answer 2

Jetez un oeil à ces 2 articles, qui vient m'a aidé avec ce problème

Article 1:A More Traditional approach

Ce qui suit est une paraphrase de l'article ci-dessus

Le Code Page:

<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> 

Notez que le GridView est enveloppé dans un panneau de mise à jour que l'ID de contrôle cible pour le Modal Extender est le même que le Pop Up Control ID. C'est parce que ModalPopUp Extender a besoin d'un ID de contrôle cible et je pense que cette solution est un meilleur plan que d'utiliser un bouton caché.

Maintenant Pour le Code Derrière:

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(); 
} 

Article 2:Uses Clientside Javascript

Ce qui suit est une paraphrase de l'article ci-dessus

Le Javascript côté client

<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; 
    } 

Page Code:

<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> 

noter encore une fois que l'ID de contrôle cible pour le Modal Pop Up Extender est le même que le Pop Up ID Control. Notez également l'attribut OnClientClick sur le bouton dans le champ de modèle, assurez-vous que votre include "return false;". Tout ce qui est nécessaire dans le code derrière le gestionnaire d'événements onClick (ou onCommand) est nécessaire pour faire ce que vous devez faire.

J'ai essayé ces deux approches avec succès.

Espérons qu'un de ces deux travaux pour vous.