Boostrap modal nicht auf ASP.NET GridView Vorlage Schaltfläche klicken

Question

Ich habe ASP.NET-Projekt mit Bootstrap arbeiten. Ich muss steuern, wann die Modale auf einer Webseite angezeigt oder verborgen werden. Es funktioniert gut mit jeder Schaltfläche, aber es funktioniert nicht von Schaltflächen in einem GridView-Vorlagenfeld.

Dies ist meine Seite Code:

<script type="text/javascript"> 
      function ShowModItem() { 
       $('#modItem').modal('show'); 
      } 

      function HideModItem() { 
       $('#modItem').modal('hide'); 
       $('.modal-backdrop').remove(); 
      } 
</script> 

<asp:GridView ID="gvItems" runat="server" CssClass="table table-bordered table-hover" AutoGenerateColumns="False" UseAccessibleHeader="true" AllowSorting="true" DataKeyNames="ID">        
<Columns>            
    <asp:BoundField DataField="ID" HeaderText="ID" Visible="false" />            
    <asp:BoundField DataField="Name" HeaderText="Name" />            
    <asp:BoundField DataField="Description" HeaderText="Description" />            
    <asp:CheckBoxField DataField="Active" HeaderText="Active" />            
    <asp:TemplateField ShowHeader="False">                
    <ItemTemplate>                    
     <asp:ImageButton ID="btnEditItem" runat="server" CausesValidation="False" CommandName="Edit" ImageUrl="~/Images/edit-16.jpg" Text="Editar" OnClick="btnEditItem_Click"/>                
    </ItemTemplate>            
    </asp:TemplateField>        
</Columns>    
</asp:GridView>  
<asp:Button ID="btnNewItem" runat="server" Text="New" CssClass="btn btn-primary" OnClick="btnNew_Click" /> 
<div class="modal fade" id="modBanco" role="dialog"> 
    <%--...Form with controls to add or edit item...--%> 
</div> 

Und dies ist mein Code-Behind:

protected void btnNewItem_Click(object sender, EventArgs e) 
 
{ 
 
    ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "ShowModItem();", true); 
 
} 
 

 
protected void btnEditItem_Click(object sender, ImageClickEventArgs e) 
 
{  /*Code for setting current item values to controls*/ 
 
    ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "ShowModItem();", true);  
 
}

Warum das modale tut zeigt auch für "neue" Artikel und nicht für "bearbeiten" Artikel?

Answer 1

sein sollte, können Sie diesen Code in der ASPX-Seite verwenden:

<asp:GridView ID="gvItems" runat="server" CssClass="table table-bordered table-hover" AutoGenerateColumns="False" UseAccessibleHeader="true" AllowSorting="true" OnRowCommand="gvItems_RowCommand"> 
     <Columns> 
      <asp:BoundField DataField="ID" HeaderText="ID" Visible="false" /> 
      <asp:BoundField DataField="Name" HeaderText="Name" /> 
      <asp:BoundField DataField="Description" HeaderText="Description" /> 
      <asp:CheckBoxField DataField="Active" HeaderText="Active" /> 
      <asp:TemplateField ShowHeader="False"> 
       <ItemTemplate> 
        <asp:ImageButton ID="btnEditItem" runat="server" CausesValidation="False" CommandName="EditItem" ImageUrl="~/Images/edit-16.jpg" Text="Editar" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ID") %>' /> 
       </ItemTemplate> 
      </asp:TemplateField> 
     </Columns> 
    </asp:GridView> 

Wie Sie die Gridview verwendet nun OnRowCommand sehen können. Damit können Sie Argumente wie die ID übergeben, die Sie bearbeiten möchten. In Ihrem Code gab es keine Möglichkeit zu sehen, welches Element Sie bearbeiten wollten. Der CommandName wurde ebenfalls geändert, da bei Verwendung von "Edit" das standardmäßige RowEditing-Ereignis ausgelöst wird. Dies ist nicht das, was Sie möchten.

Und in Code hinter Ihnen behandeln den RowCommand:

protected void gvItems_RowCommand(object sender, GridViewCommandEventArgs e) 
    { 
     if (e.CommandName == "EditItem") 
     { 
      //get the ID of the item you want to edit 
      string ID = e.CommandArgument.ToString(); 
      //launch the popup 
      ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "ShowModItem(" + ID + ");", true); 
     } 
    } 

Und für ein Pop-up für ein neues Element zu öffnen gibt es keine Notwendigkeit, sie in Code durch einen Postback hinter zu tun ist. Verwenden Sie einfach eine normale Schaltfläche mit einem onclick-Ereignis. Dies spart eine Rundreise zum Server.

Answer 2

In Ihrem gridview image button Attribut onclick=btnModificarBanco_Click. Aber Ihr Code hinter dem Ereignis ist btnEditItem_Click. So innen gridview image button onclick

<ItemTemplate>      
    <asp:ImageButton ID="btnEditItem" runat="server" CausesValidation="False" CommandName="Edit" ImageUrl="~/Images/edit-16.jpg" Text="Editar" OnClick="btnEditItem_Click"/>     
</ItemTemplate>