Is it possible to replace an asp:button with a HTML element

Question

I'm using asp forms and wanted to know if it's possible to replace the standard buttons with HTML elements that are styled using CSS.

My login page uses a standard button

<asp:Button ID="LoginButton" runat="server" Text="Login" 
    onclick="LoginButton_Click" />

linked to code behind (C#) which performs the login check.

I've seen some nice buttons implemented using the HTML <button> element and styled with CSS which can have features such as images and roll over highlighting. The basic HTML looks like this

<button type="submit" class="positive" onclick ="...">
    <img src="/icons/tick.png" alt=""/> 
    Login
</button>

I've seen another question discussing the Difference between asp:button and html's button so I understand the <button> element is not a drop-in replacement but I'd like to know if the asp:button can be replaced and still call the LoginButton_Click C# code behind?

EDIT:
Although I'm using ASP I don't mind using some client side javascript if necessary.

The buttons I saw which got me thinking about this were found here: Rediscovering the Button Element

EDIT 2: I tried the answer from XIII using the LinkButton asp control and that worked, rendering the button as I wanted and activating the C# when clicked

<asp:LinkButton ID="LoginBtn" CssClass="button positive"
        OnClick="LoginButton_Click" runat="server">
    <img src="/icons/tick.png" alt=""/> 
    Login
</asp:LinkButton>

Javascript is inserted in to the page (as mentioned by Curt) which was not a problem for me but may be for other people; but since the asp:loginview and other controls associated with forms authentication already need javascript I'm not sure this is a problem with the solution.

I decided to accept jwiscarson's answer as this is a cleaner implementation and, despite what I thought, <button> can be a drop-in replacement for <asp:button>

jwheron · Accepted Answer · 2011-11-23 15:51:30Z

3

The answer to your question:

if the asp:button can be replaced and still call the LoginButton_Click C# code behind?

is yes. If you have a button like:

<button type="submit" id="submit" class="positive" runat="server">Submit</button>

The attribute you need to set is not onclick, but onserverclick. You could also do something like:

protected override OnInit(EventArgs e)
{
    submit.ServerClick += new EventHandler(submit_ServerClick);
}

If you need to do styling on that button, I think the best way to tackle that is via CSS classes like you have in your example.

answered Nov 23, 2011 at 15:51

jwheron

2,5722 gold badges30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

KV Prajapati · Accepted Answer · 2011-11-23 14:51:48Z

2

You may set CSS class via cssClass property of <asp:Button/>. However you may set runat="server" and onserverclick="LoginButton_Click" attribute to <button/>.

edited Nov 23, 2011 at 14:51

answered Nov 23, 2011 at 14:43

KV Prajapati

94.8k20 gold badges151 silver badges188 bronze badges

1 Comment

Chris Shouts Over a year ago

Styling options for an <input type="button" /> are pretty limited though.

Kris van der Mast · Accepted Answer · 2011-11-23 14:44:40Z

1

An alternative approach would be to make use the LinkButton control and style that completely with CSS. We used to do so for a certain project in the past. Worked out pretty great for our customer.

The property of interest if CssClass

answered Nov 23, 2011 at 14:44

Kris van der Mast

16.6k8 gold badges41 silver badges65 bronze badges

2 Comments

Curtis Over a year ago

Only problem with this is that LinkButtons don't work without javascript. OP hasn't specified this, but its worth taking into account.

Tony Over a year ago

@Curt - I don't mind using javascript, I'm mainly interested in achieving a nice looking button.

Hanlet Escaño · Accepted Answer · 2011-11-23 14:45:35Z

0

You could use HTML button if you desire, and learn how to call the __doPostBack() method with the proper arguments. Asp.Net buttons and HTML buttons are pretty much the same when it comes to the way they are rendered in the client.

answered Nov 23, 2011 at 14:45

Hanlet Escaño

17.4k10 gold badges54 silver badges76 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:45:51Z

0

As had been posted here already you could style the HTML rendered by your asp:button or use another asp control. Your asp:button will be rendered as a <input type="submit"> with possibly more limited CSS options than a <button> tag.

From some googling I think it is possible to get a <button> tag rendered but it looks like a non trivial excercise see How can I use the button tag with ASP.NET?

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Nov 23, 2011 at 14:54

Alan Stephens

5795 silver badges14 bronze badges

1 Comment

Tony Over a year ago

Interesting link, for all my searching of SO before posting my question I didn't manage to find that one! Thanks, I'll take a look.

Collectives™ on Stack Overflow

Is it possible to replace an asp:button with a HTML element

5 Answers 5

Comments

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related