Boostrap模式沒有顯示ASP.NET GridView模板按鈕點擊

Question

我有ASP.NET項目與引導工作。我需要控制何時顯示或隱藏網頁中的模態。它適用於任何按鈕，但無法在GridView模板字段中的按鈕上使用。

這是我的網頁代碼：

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

這是我的後臺代碼：

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

爲什麼模態顯示良好的 「新」 項目，不是用於「編輯」項目？

Answer 1

您可以在aspx頁面使用此代碼：

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

正如你可以看到在GridView現在使用OnRowCommand。有了這個，你可以傳遞你想要編輯的ID這樣的參數。在您的代碼中，無法查看您想要編輯的項目。 CommandName也被更改，因爲如果使用「編輯」，則會觸發默認的RowEditing事件，而這不是您想要的。

而且在你後面的代碼處理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); 
     } 
    } 

和打開一個彈出了一個新的項目，不需要通過回傳做在後面的代碼。只需使用帶有onclick事件的普通按鈕即可。這節省了往返服務器的時間。

Answer 2

在您的gridview image button屬性onclick=btnModificarBanco_Click。但是你的代碼背後的代碼是btnEditItem_Click。所以裏面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>