带有 Bootstrap Glyphicon 的 ASP.NET 按钮

Posted 2023-03-06

【中文标题】带有 Bootstrap Glyphicon 的 ASP.NET 按钮

【英文标题】：ASP.NET Button with Bootstrap Glyphicon

【发布时间】：2016-09-16 22:32:00

【问题描述】：

我正在尝试使用 glyphicons 作为 ASP Button 的图标。

我知道您可以通过为 <i> 元素提供正确的 glyphicon CSS 轻松做到这一点，然后在所需按钮下将其作为父项。

但是，我想从 C# 端而不是 html 中执行此操作。我该怎么做？

我尝试了以下方法，但无济于事：

HtmlGenericControl i1 = new HtmlGenericControl("i");
i1.Attributes["class"] = "glyphicon glyphicon-backward";
i1.Attributes["aria-hidden"] = "true";

Button btnFirst = new Button();
btnFirst.ID = "btnFirst";
btnFirst.CommandName = "FirstPage";
btnFirst.CssClass = "btn btn-default pageButton";
btnFirst.Click += new EventHandler(btnFirst_Click);
btnFirst.Controls.Add(i1);
container.Controls.Add(btnFirst);

如果我按上述方式运行，则会显示按钮，但没有图标。 在 HTML 中，按钮下方没有嵌套 <i> 元素。事实上，它似乎不存在。

【问题讨论】：

您的 CSS 中的所有设置是否正确？您能否包括您正在使用的与此相关的任何 CSS？另外，您想如何使i 标记成为Button 控件的子控件？其输出可能类似于<button><i/></button>...

使用上面的方法你最终会得到什么 HTML 输出？

什么是“我”？使用按钮标签，然后为其应用类。

我在上面添加了更多信息！我基本上是想让它看起来像这样：<button><i class="glyphicon glyphicon-backward"></i></button> 我不能简单地将 glyphicon 类应用于按钮本身，因为它什么都不做。

【参考方案1】：

基本上你不能将<asp:Button> 与字形图标一起使用，因为<asp:Button> 会变成不支持任何子元素的<input type='button'>。

两种可能的解决方案：

---

使用<asp:LinkButton> 代替<asp:Button>：

<asp:LinkButton runat="server" ID="lbFoo" OnClick="lbFoo_Click" CssClass="btn btn-default">
    <i class="glyphicon glyphicon-backward" aria-hidden="true"></i>Back
</asp:LinkButton>

这是常见的解决方案。

---

或者使用<button>提交隐藏的<asp:Button>

<button type="button" class="btn btn-default" onclick="<%=btnHidden.ClientID %>.click()">
    <i class="glyphicon glyphicon-backward" aria-hidden="true"></i>
    Click
</button>

<asp:Button runat="server" style="display:none;" ID="btnHidden"
    OnClick="btnHidden_Click"></asp:Button>

如果您坚持使用<asp:Button> 而不是<asp:LinkButton>，这是一种解决方法。还有其他一些解决方法，但这是最合法的。