Repeater Itemcommand ne se déclenche pas avec modalpopupextender

Question

Je sais que cela a été demandé à plusieurs reprises, mais après avoir passé la meilleure partie de la journée à lire SO et d'autres sites, je suis toujours incapable de résoudre mon problème. J'ai essayé de jouer avec Viewstate,! IsPostback, Page_Load et Page_Init en vain.

J'ai un répéteur qui retourne une liste d'enregistrements et pour chaque enregistrement, il affiche également deux boutons ASP. Ces boutons affichent un modalpopupextender Ajax. Ce qui ne se passe pas, c'est que le Repeater ItemCommand n'est pas appelé, donc je ne peux pas afficher les informations correctes dans les zones de texte.

J'ai placé l'ajax modalpopupextender est-ce correct? Si ce n'est pas ce que je dois faire pour le faire fonctionner.

contrôle Repeater

<div class="container"> 
<h2>Current Groups</h2> 
<asp:Repeater ID="rptGroups" runat="server" OnItemCommand="rptGroups_ItemCommand" EnableViewState="false"> 
    <HeaderTemplate> 
     <table class="table table-striped table-bordered"> 
      <tr> 
       <td>GroupID</td> 
       <td>Group Name</td> 
       <td>Group Description</td> 
       <td></td> 
      </tr> 
    </HeaderTemplate> 
    <ItemTemplate> 
     <tr> 
      <td> 
       <%# DataBinder.Eval(Container.DataItem,"GroupID") %> 
      </td> 
      <td> 
       <%# DataBinder.Eval(Container.DataItem,"GroupName") %> 
      </td> 
      <td> 
       <%# DataBinder.Eval(Container.DataItem,"GroupDescription") %> 
      </td> 
      <td> 
       <asp:Button ID="btnEdit" runat="server" CssClass="btn btn-default" Text="Edit" CommandName="Edit" CommandArgument='<%#Eval("GroupID") %>' OnClick="btnEdit_Click" OnClientClick="return false" UseSubmitBehavior="false" /> 
       <asp:Button ID="btnDelete" runat="server" CssClass="btn btn-danger" Text="Delete" CommandName="Delete" CommandArgument='<%#Eval("GroupID") %>' OnClick="btnDelete_Click" OnClientClick="return false" UseSubmitBehavior="false" /> 
       <ajaxToolkit:ModalPopupExtender ID="mpeEdit" runat="server" PopupControlID="pnlEdit" TargetControlID="btnEdit" 
        CancelControlID="btnCloseEdit" BackgroundCssClass="modalBackground"></ajaxToolkit:ModalPopupExtender> 
       <ajaxToolkit:ModalPopupExtender ID="mpeDelete" runat="server" PopupControlID="pnlDelete" TargetControlID="btnDelete" 
        CancelControlID="btnCloseDelete" BackgroundCssClass="modalBackground"></ajaxToolkit:ModalPopupExtender> 

      </td> 
     </tr> 
    </ItemTemplate> 
    <FooterTemplate> 
     </table> 
    </FooterTemplate> 
</asp:Repeater> 

Code pour pop-up

 <asp:Panel ID="pnlDelete" runat="server" CssClass="modalPopup" align="center" Style="display: none"> 
    <div style="height: 60px"> 
     <asp:UpdatePanel ID="upnlDelete" runat="server"> 
      <ContentTemplate> 
       <h4>Do you wish to delete this Group?</h4> 
       <asp:Label ID="lblDeleteGroupName" runat="server" ></asp:Label> 
       <asp:Label ID="lblDeleteGroupDesc" runat="server" ></asp:Label> 
      </ContentTemplate> 
     </asp:UpdatePanel> 
    </div> 
    <asp:Button ID="btnCloseDelete" runat="server" Text="Close" /> 
    </asp:Panel> 

Code pour ItemCommand

 protected void rptGroups_ItemCommand(object source, RepeaterCommandEventArgs e) 
    { 
     if (e.CommandName == "Edit") 
     { 

     } 
     else if (e.CommandName == "Delete") 
     { 
      lblDeleteGroupName.Text = Convert.ToString(e.CommandArgument); 
      lblDeleteGroupDesc.Text = Convert.ToString(e.CommandArgument); 

     } 
    } 

Merci à l'avance

- EDIT -

Lorsque je supprime le ajaxToolkit: ModalPopupExtender du répéteur en dehors du panneau affichage sur la page tout le temps, le postback fonctionne si je Je pense que ça a quelque chose à voir avec ça, mais je ne sais pas où je pourrais le placer

Answer 1

Je trouve l'Ajax ToolKit un peu pénible et j'ai arrêté de l'utiliser (si possible) il y a quelque temps.

Une partie du problème est btnEdit et btnDelete sont uniquement mis en place pour gérer l'affichage du modal, il est inutile d'avoir le OnClick, CommandName et CommandArgument là-dedans. Ils ne déclenchent pas toute forme de publication automatique:

<asp:Button ID="btnEdit" runat="server" CssClass="btn btn-default" Text="Edit" OnClientClick="return false" UseSubmitBehavior="false" /> 
<asp:Button ID="btnDelete" runat="server" CssClass="btn btn-danger" Text="Delete" OnClientClick="return false" UseSubmitBehavior="false" /> 
<ajaxToolkit:ModalPopupExtender ID="mpeEdit" runat="server" PopupControlID="pnlEdit" TargetControlID="btnEdit" 
       CancelControlID="btnCloseEdit" BackgroundCssClass="modalBackground"></ajaxToolkit:ModalPopupExtender> 
<ajaxToolkit:ModalPopupExtender ID="mpeDelete" runat="server" PopupControlID="pnlDelete" TargetControlID="btnDelete" 
       CancelControlID="btnCloseDelete" BackgroundCssClass="modalBackground"></ajaxToolkit:ModalPopupExtender> 

Cependant, vous voulez passer quelques variables à ces modaux pour eux d'afficher, deux options, vous pouvez soit le faire au moyen d'un processus de publication automatique ou vous configurez quelque chose via JavaScript. Aucun d'entre eux ne correspond très bien à ce que vous cherchez à obtenir avec le code que vous avez publié.

moi avons deux options pour vous (mais à la fois fossé le ajaxToolkit: ModalPopupExtender):

Option One (Basic)
Vous pouvez obtenir le même résultat avec:

<asp:Button ID="btnEdit" runat="server" CssClass="btn btn-default" Text="Edit" OnCommand="rptGroups_ItemCommand" CommandName="Edit" CommandArgument='<%#Eval("GroupID") %>' OnClientClick="return confirm('Do you wish to Edit this?')" /> 
<asp:Button ID="btnDelete" runat="server" CssClass="btn btn-default" Text="Delete" OnCommand="rptGroups_ItemCommand" CommandName="Delete" CommandArgument='<%#Eval("GroupID") %>' OnClientClick="return confirm('Do you wish to Delete this?')" /> 

Pas aussi fantaisie mais dès que l'utilisateur clique sur le bouton OK de la popup, il va PostBack. Vous pourriez essayer de vous faire plaisir et de passer les variables dans le pop-up, mais cela devient très compliqué et tout devis simple ou double devra être pris en compte, il vaudrait mieux rester clair.

Option Deux
Pour obtenir un résultat similaire avec les Bootstrap composants que vous avez déjà, il aura besoin de raffinement, mais la bonne chose est qu'il est très extensible et peut être personnalisé de toute façon vous le souhaitez:

<asp:Repeater ID="DataRepeater" runat="server"> 
    <ItemTemplate> 
     <br /> 
     <br /> 
     <%# Eval("GroupID") %><br /> 
     <%# Eval("GroupName") %><br /> 
     <%# Eval("GroupDescription") %><br /> 
     <asp:Button ID="btnEdit" runat="server" CssClass="btn btn-default" Text="Edit" OnCommand="DataRepeater_ItemCommand" CommandName="Edit" ValidateRequestMode="Enabled" CommandArgument='<%#Eval("GroupID") +"|"+ Eval("GroupName") +"|"+ Eval("GroupDescription") %>' /> 
     <asp:Button ID="btnDelete" runat="server" CssClass="btn btn-default" Text="Delete" OnCommand="DataRepeater_ItemCommand" CommandName="Delete" CommandArgument='<%#Eval("GroupID") +"|"+ Eval("GroupName") +"|"+ Eval("GroupDescription") %>' /> 
    </ItemTemplate> 
</asp:Repeater> 

<asp:Panel ID="EditPanel" runat="server" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-body"> 
       <div class="row"> 
        <div class="col-md-12"> 
         <h1 style="color: #ff0000;"><i class="glyphicon glyphicon-cog"></i>&nbsp;Edit:</h1> 
         <asp:HiddenField ID="IdOfItemToEditHiddenField" runat="server" /> 
         Name: <asp:TextBox ID="NameTextBox" runat="server" /> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-md-12"> 
         <asp:Button ID="btnSaveEdit" runat="server" Text="Save" OnClick="btnSaveEdit_Click" OnClientClick="HideEditModal();" CssClass="btn btn-success" /> 
         <asp:Button ID="btnCancelEdit" runat="server" Text="Cancel" OnClientClick="HideEditModal(); return false;" CssClass="btn btn-primary" /> 
        </div> 
       </div> 

      </div> 
     </div> 
    </div> 
</asp:Panel> 

<asp:Panel ID="DeletePanel" runat="server" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-body"> 
       <div class="row"> 
        <div class="col-md-12"> 
         <h1 style="color: #ff0000;"><i class="glyphicon glyphicon-warning-sign"></i>&nbsp;Delete?</h1> 
         <asp:HiddenField ID="IdOfItemToDeleteHiddenField" runat="server" /> 
         <asp:Label ID="DeleteMessageLabel" runat="server" /> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-md-12"> 
         <asp:Button ID="btnDelete" runat="server" Text="Delete" OnClick="btnDelete_Click" OnClientClick="HideDeleteModal();" CssClass="btn btn-success" /> 
         <asp:Button ID="btnCancelDelete" runat="server" Text="Cancel" OnClientClick="HideDeleteModal(); return false;" CssClass="btn btn-primary" /> 
        </div> 
       </div> 

      </div> 
     </div> 
    </div> 
</asp:Panel> 

<script type="text/javascript"> 
    function DisplayEditModal() { 
     $('#<%=EditPanel.ClientID%>').modal('show'); 
    } 
    function HideEditModal() { 
     $('#<%=EditPanel.ClientID%>').modal('hide'); 
    } 

    function DisplayDeleteModal() { 
     $('#<%=DeletePanel.ClientID%>').modal('show'); 
    } 
    function HideDeleteModal() { 
     $('#<%=DeletePanel.ClientID%>').modal('hide'); 
    } 
</script> 

code derrière:

private Control _parentControl; 
protected void Page_Load(object sender, EventArgs e) 
{ 
    _parentControl = this; //if using an UpdatePanel use the ID of that instead of 'this' 
    DataForRepeater(); 
} 

private void DataForRepeater() 
{ 
    //just example data to load the repeater 
    var dt = new DataTable(); 
    dt.Columns.Add("GroupID", typeof(int)); 
    dt.Columns.Add("GroupName", typeof(string)); 
    dt.Columns.Add("GroupDescription", typeof(string)); 

    for (int i = 1; i <= 10; i++) 
    { 
     var nr = dt.NewRow(); 
     nr["GroupID"] = i; 
     nr["GroupName"] = "SomeName" + i.ToString(); 
     nr["GroupDescription"] = "Description of " + i.ToString() + " item"; 
     dt.Rows.Add(nr); 
    } 
    DataRepeater.DataSource = dt; 
    DataRepeater.DataBind(); 
} 

protected void DataRepeater_ItemCommand(object sender, CommandEventArgs e) 
{ 
    string command = e.CommandName; 
    string[] arguments = e.CommandArgument.ToString().Split('|'); 

    switch (command) 
    { 
     case ("Edit"): 
      //edit operation 
      IdOfItemToEditHiddenField.Value = arguments[0]; 
      NameTextBox.Text = arguments[1]; 
      ScriptManager.RegisterStartupScript(_parentControl, _parentControl.GetType(), "Modal", " DisplayEditModal()", true); 
      break; 
     case ("Delete"): 
      //delete operation 
      IdOfItemToDeleteHiddenField.Value = arguments[0]; 
      DeleteMessageLabel.Text = arguments[1] + "<br/>" + arguments[2]; 
      ScriptManager.RegisterStartupScript(_parentControl, _parentControl.GetType(), "Modal", " DisplayDeleteModal()", true); 
      break; 
     default: 
      throw new InvalidOperationException(); 
    } 
} 

protected void btnSaveEdit_Click(object sender, EventArgs e) 
{ 
    int idToSave = int.Parse(IdOfItemToEditHiddenField.Value); 
    string newName = NameTextBox.Text; 

    //do something to save it 
    ScriptManager.RegisterStartupScript(_parentControl, _parentControl.GetType(), "Msg", string.Format("alert('Save item {0}: {1}');", idToSave, newName), true); 
} 


protected void btnDelete_Click(object sender, EventArgs e) 
{ 
    int idToDelete = int.Parse(IdOfItemToDeleteHiddenField.Value); 

    //do something to delete it 
    ScriptManager.RegisterStartupScript(_parentControl, _parentControl.GetType(), "Msg", string.Format("alert('Delete item {0}');", idToDelete), true); 
} 

ce sont les bases de lui, comme je l'ai dit avait besoin d'amélioration definitly en particulier sur pas chantez les cordes, vous devrez faire attention aux guillemets.