How to have html in Text attribute of asp Button

Question

I'm trying to include an <i> for the Text attribute for an asp button but it's just rendering the html as text...

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

I've got to be over thinking this...

EDIT: I'm using the twitter bootstrap framework. That's why the <i> tag. Here's an example: http://twitter.github.com/bootstrap/base-css.html#icons

Why do you have an italics tag with a class of icon-edit in the text value of a button in the first place? Are you sure you're not looking for an asp:ImageButton? http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.imagebutton.aspx — Brandon, Jul 13 '12 at 21:03
Maybe a little more clarifying. Are you wanting the text to be italicized or are you trying to get the html code to literally show up as the button text? — JerseyMike, Jul 13 '12 at 21:04
Don't really think you are overthinking this, I don't think it's possible to put HTML into the text of the asp:Button as it treats this as a literal. What is it your are trying to accomplish? I think you need a differnt approach. — swannee, Jul 13 '12 at 21:06

score 32 · Answer 1 · edited Aug 22 '13 at 22:19

32

You can use <asp:LinkButton. Bootstrap renders anchor tags (asp:LinkButton) like input type submit buttons (asp:Button).

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

edited Aug 22 '13 at 22:19

nairdo

81
6

answered Jan 11 '13 at 19:12

Cem

846
1
8
13

6

Link Button is different from asp button. Link button would raise a postback but will not submit the form. So say if you have some HTML5 validations, they will not work natively with Link Button. – Ashutosh Vyas Apr 29 '16 at 20:14
I opted for the approach in the answer from @bflemi3 - but when triggering the .click() mtehod, the HTML5 error code runs - but continues to issue the postback without waiting for the HTML5 error hander. – qxotk Sep 09 '20 at 02:14

bflemi3 · Accepted Answer · 2017-12-21T13:47:29.580

23

What I ended up doing was going with an html button, runat=server and putting the <i> inside of that.

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

edited Dec 21 '17 at 13:47

answered Jul 14 '12 at 17:00

bflemi3

6,698
20
88
155

but how to trigger the server-side event, the onclick of such button doesn't do it!! The only way I see to do so is to put a hidden control and trigger it using javascript or jquery, is that true or is there a better way to do it?? – MA9H Mar 05 '13 at 12:27
4

M009 use `onserverclick="function_name"` – Zorgarath Aug 21 '15 at 15:54
don't use this way, it makes problems while using Jquery functions – reaz Apr 12 '16 at 19:34
Don't you just love incomplete answers; +1 Zorgarath, and what is the signature of the on click function name? – Paul Zahra Dec 20 '17 at 16:39

score 7 · Answer 3 · edited May 23 '17 at 12:25

7

You would do it like this

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

Take a look at this example (however if you are using sitefinity CMS this won't work) Font awesome inside asp button

edited May 23 '17 at 12:25

Community

1
1

answered Jun 27 '13 at 07:54

dmowfo

71
1
2

score 7 · Answer 4 · answered Nov 12 '13 at 09:44

7

You can exploit the <label> tag's for attribute. Basically any click on <label> will also fire the click event of a html element with an id same as <label>'s for attribute

For example:

<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='' />

clicking the <label> element here(which clicks the <i> element too), will fire the <asp:button>'s click event.

answered Nov 12 '13 at 09:44

Aizzat Suhardi

753
11
19

I found this helpful enough to give a vote up - even it does not solve the problem at all – JonSnow Jan 28 '15 at 15:12
This was perfect for me when using Zurb Foundation as its button classes can be applied to a label for same display as if it were an actual button. – Eric Dec 18 '17 at 14:24
Exactly what I was looking for! – iwantwin Mar 27 '19 at 10:56

score 2 · Answer 5 · answered Jun 30 '16 at 11:05

2

If you change your button to an:

<asp:LinkButton />

it works perfectly fine within the text attribute. I don't believe there will be any loss in functionality.

answered Jun 30 '16 at 11:05

Jack Ward

61
1
7

1

As Cem said in their answer approx. three years ago. – Paul Zahra Dec 20 '17 at 16:37

score 0 · Answer 6 · answered Jul 13 '12 at 21:22

0

If it renders as a <input type="submit"> you cannot display HTML as the label. It will render as a literal string.

See this example: http://jsfiddle.net/vkNuX/

answered Jul 13 '12 at 21:22

AverageMarcus

903
1
9
26

swannee · Answer 7 · 2012-07-13T21:38:10.447

You could probably do something where you render an html link that has the "i" tag inside of it (if you look at the source of the link you provided, that's what they do) and then make it postback on click using the ClientScriptManager.GetPostBackEventReference() to get a reference to the postback script. http://msdn.microsoft.com/en-us/library/system.web.ui.clientscriptmanager.getpostbackeventreference.aspx

So for example:

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

This is just out of my head, so you might need to tweak it a bit. You could then just roll this into your own custom asp.net control.

score 0 · Answer 8 · answered Feb 06 '19 at 14:40

0

I've tried to render html inside a button on the client side, I didn't want it to be using runat="server" so what I did was using javascript:

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

answered Feb 06 '19 at 14:40

Hagai Wild

1,904
11
19

How to have html in Text attribute of asp Button

8 Answers8