如何在asp Button的Text属性中有html答案

【问题标题】：How to have html in Text attribute of asp Button如何在asp Button的Text属性中有html
【发布时间】：2012-07-13 21:00:08
【问题描述】：

我正在尝试为 asp 按钮的 Text 属性包含 <i>，但它只是将 html 呈现为文本...

<asp:Button runat="server" ID="modify" ToolTip="Modify" CssClass="btn btn-mini" OnClick="modify_Onclick" Text='<i class="icon-edit"></i>' />

我想太多了……

编辑： 我正在使用 twitter 引导框架。这就是<i> 标签的原因。这是一个例子：http://twitter.github.com/bootstrap/base-css.html#icons

【问题讨论】：

为什么首先在按钮的文本值中有一个带有 icon-edit 类的斜体标签？你确定你不是在寻找一个 asp:ImageButton 吗？ msdn.microsoft.com/en-us/library/…
也许更清楚一点。您是希望文本为斜体还是试图让 html 代码字面上显示为按钮文本？
不要真的认为你想太多了，我认为不可能将 HTML 放入 asp:Button 的文本中，因为它会将其视为文字。你想要完成什么？我认为您需要一种不同的方法。

标签： asp.net

【解决方案1】：

您可以使用<asp:LinkButton。 Bootstrap 像输入类型提交按钮（asp:Button）一样呈现锚标签（asp:LinkButton）。

<asp:LinkButton runat="server" ID="modify" ToolTip="Modify" CssClass="btn btn-mini" OnClick="modify_Onclick" Text='<i class="icon-edit"></i>' />

【讨论】：

链接按钮与asp按钮不同。链接按钮会引发回发，但不会提交表单。所以说，如果你有一些 HTML5 验证，它们将无法与 Link Button 一起使用。
我在@bflemi3 的答案中选择了该方法-但是在触发 .click() mtehod 时，HTML5 错误代码运行-但继续发出回发而不等待 HTML5 错误处理程序。

【解决方案2】：

我最终做的是使用一个 html 按钮 runat=server 并将 <i> 放入其中。

<button runat="server" id="modify" class="btn btn-mini" title="Modify" onserverclick="modify_Onclick">
    <i class="icon-edit"></i>
</button>

【讨论】：

但是如何触发服务器端事件，这样的按钮的onclick不做！！我看到这样做的唯一方法是放置一个隐藏控件并使用 javascript 或 jquery 触发它，这是真的还是有更好的方法来做到这一点？？
M009 使用onserverclick="function_name"
不要这样用，用jquery函数会出问题
你不只是喜欢不完整的答案吗？ +1 Zorgarath，点击函数名称的签名是什么？

【解决方案3】：

你会这样做

    <button runat="server" id="btnRun" onserverclick="functionName" class="btn btn-mini" title="Search">
    <i class="icon-camera-retro"></i> Search
    </button>

看看这个例子（但是，如果您使用的是 sitefinity CMS，这将不起作用） Font awesome inside asp button

【讨论】：

【解决方案4】：

您可以利用<label> 标签的for 属性。基本上，对<label> 的任何点击也会触发一个 id 与<label> 的for 属性相同的html 元素的点击事件

例如：

<label for="modify"><i class="icon-edit"></i></label>
<asp:Button style="display:none;" runat="server" ID="modify" ToolTip="Modify" CssClass="btn btn-mini" OnClick="modify_Onclick" Text='' />

在此处单击<label> 元素（也单击<i> 元素）将触发<asp:button> 的单击事件。

【讨论】：

我发现这很有帮助，可以投票 - 即使它根本不能解决问题
当我使用 Zurb Foundation 时，这对我来说是完美的，因为它的按钮类可以应用于标签，以实现与实际按钮相同的显示。
正是我想要的！

【解决方案5】：

如果您将按钮更改为：

<asp:LinkButton />

它在 text 属性中工作得非常好。我认为不会有任何功能损失。

【讨论】：

正如 Cem 在他们的回答中所说的那样。三年前。

【解决方案6】：

如果它呈现为<input type="submit">，则无法将 HTML 显示为标签。它将呈现为文字字符串。

请参阅此示例：http://jsfiddle.net/vkNuX/

【讨论】：

【解决方案7】：

您可能会做一些事情，在其中呈现包含“i”标签的 html 链接（如果您查看您提供的链接的来源，这就是他们所做的），然后在点击时使用ClientScriptManager.GetPostBackEventReference() 以获取对回发脚本的引用。 http://msdn.microsoft.com/en-us/library/system.web.ui.clientscriptmanager.getpostbackeventreference.aspx

例如：

<a class="btn btn-mini" href="javascript:<% ClientScriptManager.GetPostBackEventReference()%>"><i class="icon-refresh"></i> Refresh</a>

这只是我的想法，所以你可能需要稍微调整一下。然后，您可以将其滚动到您自己的自定义 asp.net 控件中。

【讨论】：

【解决方案8】：

我尝试在客户端的按钮内呈现 html，但我不希望它使用 runat="server"，所以我所做的是使用 javascript：

document.getElementById('button_<%= this.id %>').innerHtml = '<i class="fa fa-edit"></i>';

【讨论】：