引导模式未显示在 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>