Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>

like image 627
Tony Avatar asked Oct 10 '22 09:10

Tony


2 Answers

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.

like image 162
jwheron Avatar answered Oct 13 '22 10:10

jwheron


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

like image 45
Kris van der Mast Avatar answered Oct 13 '22 10:10

Kris van der Mast