Question

我有ASP.NET项目使用bootstrap。我需要控制何时在网页中显示或隐藏模态。它适用于任何按钮，但它不能从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>

这是我的代码隐藏：

＆＃13;

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

＆＃13;

为什么模态适用于＆＃34; new＆＃34;项目而不是＆＃34;编辑＆＃34;项目

Answer 1

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

Answer 2

您可以在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事件的普通按钮即可。这样可以节省往返服务器的时间。

Boostrap模式未显示在ASP.NET GridView模板按钮上单击

2 个答案: