ASP.NET Gridview上的Bootstrap样式按钮组

时间:2018-11-10 01:08:12

标签: c# asp.net twitter-bootstrap-3 webforms

我在ASP.NET GridView的最左列上有这三个按钮。

<asp:ButtonField ButtonType="Button" Text="E" CommandName="EditTimeRecord" ControlStyle-CssClass="btn btn-default" >
<ControlStyle CssClass="btn btn-default" />
<ItemStyle Width="5%" />
</asp:ButtonField>

<asp:ButtonField ButtonType="Button" Text="C" CommandName="CopyTimeRecord" ControlStyle-CssClass="btn btn-default" >
<ControlStyle CssClass="btn btn-default" />
<ItemStyle Width="5%" />
</asp:ButtonField>

<asp:ButtonField ButtonType="Button" Text="D" CommandName="DeleteTimeRecord" ControlStyle-CssClass="btn btn-default" >
<ControlStyle CssClass="btn btn-default" />
<ItemStyle Width="5%" />
</asp:ButtonField>

我想将它们组合在一起,就像下拉菜单和一系列按钮一样。 我还考虑过这样做:

<asp:TemplateField>
                        <ItemTemplate>
                            <div class="dropdown">
                              <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Action
                              </button>
                              <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                                    <button class="dropdown-item" type="button" onclick="EditRow">Edit</button>
                                    <button class="dropdown-item" type="button" onclick="CopyRow">Copy</button>
                                    <button class="dropdown-item" type="button" onclick="DeleteRow">Delete</button>
                              </div>
                            </div>
                        </ItemTemplate>
                    </asp:TemplateField>

但是那样我会丢失ASP网格和按钮事件。

我宁愿使用ASP.NET按钮控件,因为它更易于使用和操纵网格并连接到我的后端代码。

有人解决了这个问题吗?

1 个答案:

答案 0 :(得分:0)

您可以尝试

<asp:TemplateField>
    <ItemTemplate>
        <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action</button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                <asp:Button Text="Edit" CssClass="dropdown-item" CommandName="EditTimeRecord" runat="server" />
                <asp:Button Text="Copy" CssClass="dropdown-item" CommandName="CopyTimeRecord" runat="server" />
                <asp:Button Text="Delete" CssClass="dropdown-item" CommandName="DeleteTimeRecord" runat="server" />
            </div>
        </div>
    </ItemTemplate>
</asp:TemplateField>