asp中的引导字形图标：gridview排序后按钮消失答案

【问题标题】：bootstrap glyphicons inside asp:buttons disapear after gridview sortingasp中的引导字形图标：gridview排序后按钮消失
【发布时间】：2015-01-18 14:14:15
【问题描述】：

我应该怎么做才能解决这个问题？ asp:button 中的 html 需要显示修复，我使用此方法（除非我单击任何列的标题对 gridview 进行排序，否则它有效）：

private void FixGlyph(PlaceHolder ph, Button btn, string iconClass, string customLabelStye = "")
    {
        if (btn.Visible)
        {
            var g = new HtmlGenericControl();
            g.ID = "labelFor_" + btn.ID;
            g.TagName = "label";
            g.Attributes.Add("for", btn.ClientID);
            g.Attributes.Add("class", "" + btn.CssClass + "");
            if (customLabelStye != "")
            {
                g.Attributes.Add("style", customLabelStye);
            }
            g.InnerHtml = "<i class='" + iconClass + "'></i> " + btn.Text;
            ph.Controls.Add(g);
            btn.Attributes.Add("style", "display:none;");
        }
    }

我的网格视图是这样的：

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
    <ContentTemplate>
        <asp:GridView ID="GridView1" AllowPaging="True" AutoGenerateColumns="false" DataSourceID="AccessDataSource1" DataKeyNames="FICHA" runat="server" GridLines="None" OnSorted="GridViewFix" AllowSorting="true" CssClass="table table-hover table-striped" ShowFooter="true" PagerStyle-CssClass="bs-pagination text-center">
            <Columns>
                    <%-- Ficha del empleado --%>
                    <asp:TemplateField HeaderText="Ficha" SortExpression="FICHA">
                        <ItemTemplate>
                            <asp:Label ID="lblFicha" Text='<%# Eval("FICHA") %>' runat="server"></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                            <%-- columna de eliminar --%>
                    <asp:TemplateField HeaderText="<span class='glyphicon glyphicon-remove'></span>">
                        <ItemStyle Width="20" />
                        <ItemTemplate>
                            <asp:PlaceHolder ID="delPh" runat="server"></asp:PlaceHolder>
                            <asp:Button ID="delBtn" CssClass="btn btn-link " data-toggle="modal" ToolTip="Modify" data-target="#deleteModal" runat="server" autopostback="false" OnClick="delBtn_Click" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </ContentTemplate> 
    <Triggers>
    </Triggers>
</asp:UpdatePanel>

我的Page_Load是这样的

protected void Page_Load(object sender, EventArgs e)
    {
        foreach (GridViewRow row in GridView1.Rows)
        {
            Button dbtn = row.FindControl("delBtn") as Button;
            PlaceHolder dPH = row.FindControl("delPh") as PlaceHolder;
            FixGlyph(dPH, dbtn, "glyphicon glyphicon-remove", "padding:0 !important;");
        }
    }

我什至尝试对 gridview 使用 onSorted 事件：

protected void GridViewFix(object sender, EventArgs e)
    {
        foreach (GridViewRow row in GridView1.Rows)
        {
            Button dbtn = row.FindControl("delBtn") as Button;
            PlaceHolder dPH = row.FindControl("delPh") as PlaceHolder;
            FixGlyph(dPH, dbtn, "glyphicon glyphicon-remove", "padding:0 !important;");
        }
    }

它被触发，显然找到了控件并修复了标签，但是......然后在 GridViewFix 并重新加载组件之后发生了一些事情，再次没有字形图标

【问题讨论】：

您在代码中这样做有什么特别的原因吗？似乎您可以添加一点点标记并删除您发布的所有代码。
你好 Ben 首先我需要 glyphicons ，如果你在 asp:button 中使用它们不会出现，我需要 asp:button 出于其他原因。是的，我可以使用 asp:Linkbutton 但后面的代码将不起作用
您似乎正在为字形图标动态添加<label<i></i><label>。我看不出你为什么要在代码中这样做，只需将其添加到标记中即可。此外，asp:Button 也没有您无法使用 asp:LinkButton 做的事情。
你是对的.. 已经找到了解决方案，检查一下

标签： c# asp.net twitter-bootstrap gridview glyphicons

【解决方案1】：

我会将您的代码用于在 Page_PreRender 方法中添加字形。可能在 page_load 之后 Gridview 有一个事件正在触发并重新创建按钮控件。

【讨论】：

【解决方案2】：

嗯，这个问题并不完全清楚。按钮具有数据切换和数据目标属性，而 LinkButtons 没有，这就是为什么希望它们如此糟糕。我需要在触发代码背后的事件的同时打开一个模式。所以这解决了这个问题：只需使用 javascript 自己触发模态。

<asp:LinkButton ID="AddAreaBtn" runat="server" autopostback="false" OnClientClick="javascript:$('#BorrarAreaModal').modal('show');" OnClick="BorraArea_Click">
    <i aria-hidden="true" class="glyphicon glyphicon-remove"></i>
</asp:LinkButton>

【讨论】：