CODEWITHSUNDEEP
asp.net
bflemi3
bflemi3

Reputation: 6790

How to have html in Text attribute of asp Button

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

Upvotes: 29

Views: 44862

Answers (8)

Chagai Wild
Chagai Wild

Reputation: 2163

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>';

Upvotes: 0

bflemi3
bflemi3

Reputation: 6790

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>

Upvotes: 24

Jack Ward
Jack Ward

Reputation: 61

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.

Upvotes: 2

dmowfo
dmowfo

Reputation: 71

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

Upvotes: 7

Aizzat Suhardi
Aizzat Suhardi

Reputation: 767

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.

Upvotes: 7

Cem
Cem

Reputation: 856

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

Upvotes: 32

swannee
swannee

Reputation: 3466

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.

Upvotes: 0

AverageMarcus
AverageMarcus

Reputation: 903

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/

Upvotes: 0

Related Questions