ASP.NET GridView上でBoostrapモーダルが表示されないテンプレートボタン

Question

私はASP.NETプロジェクトをブートストラップで処理しています。 Webページでモーダルを表示するか非表示にするかを制御する必要があります。任意のボタンでうまく動作しますが、GridViewテンプレートフィールドのボタンからは機能しません。

これは私のページのコードです：モーダルは "新しい" 項目についても示してないのはなぜ

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

と：

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

そして、これは私のコードビハインドであります「編集」項目ではない？

Answer 1

をする必要がありますgridview image button onclick内部ですから、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のような引数を渡すことができます。あなたのコードでは、編集したいアイテムを確認する方法がありませんでした。 「編集」を使用すると、デフォルトのRowEditingイベントが発生し、これはあなたが望むものではないため、CommandNameも変更されています。

そして、あなたは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です。

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