ASP.net c# button click

Question

Given:

<button runat="server" id="btnNext">Next &gt;</button>

I need in my code behind the have the onclick event, but the onclick event in this case refers to clientonclick, I have to use the button HTML tag not ASP:button because ASP:Button renders as input which doesn't work with my CSS....

Any ideas?

For everyone saying change my CSS, here it is:

input[type=button], button {
    font-family: arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin: 0px;
    padding: 5px 20px 5px 20px;
    outline-width: 0;
    border: 1px solid #000;
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5),
        inset 0px 1px 0px rgba(255, 255, 255, 0.5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5),
        inset 0px 1px 0px rgba(255, 255, 255, 0.5);
    -webkit-transition: background-color 0.2s ease-in-out,
        color 0.2s ease-in-out,
        -webkit-box-shadow 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out,
        color 0.2s ease-in-out,
        -moz-box-shadow 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out,
        color 0.2s ease-in-out,
        box-shadow 0.2s ease-in-out;
    background-image: -webkit-gradient(linear, left top, left bottom,
        color-stop(0.0, rgba(255, 255, 255, 0.8)),
        color-stop(0.01, rgba(255, 255, 255, 0.6)),
        color-stop(0.4, rgba(255, 255, 255, 0.3)),
        color-stop(0.4, rgba(255, 255, 255, 0.2)),
        color-stop(1.0, rgba(255, 255, 255, 0.0)));
    background-image: -moz-linear-gradient(top,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.3) 40%,
        rgba(255, 255, 255, 0.2) 40%,
        rgba(255, 255, 255, 0.0) 100%);
    background-color: #444;
    color: #fff;
    text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0px;
}
input[type=button]:hover, input[type=button]:focus, button:hover, button:focus {
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);
    -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9),
        inset 0px 1px 0px rgba(255, 255, 255, 0.5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.9),
        inset 0px 1px 0px rgba(255, 255, 255, 0.5);
    background-color: #666;
    color: #fff;
}
input[type=button]:active, button:active {
    background-color: #222;
    color: #ccc;
    -webkit-transition-duration: 0.0s;
    -moz-transition-duration: 0.0s;
    -o-transition-duration: 0.0s;
}

If I assign this to an input it doesn't show all the effects.

You can't use CSSClass in your ASP button to define your CSS? — Matt
– Matt, Commented Jan 28, 2011 at 15:26
See edit, not all effects work unless it's styled to a button element — Tom Gullen
– Tom Gullen, Commented Jan 28, 2011 at 15:32

m.edmondson · Accepted Answer · 2011-01-28 15:26:31Z

4

Change your CSS - the problem isn't with asp.net but its with your stylesheet. Its really not that hard to stick 'input' after 'button' in your stylesheet

answered Jan 28, 2011 at 15:26

m.edmondson

30.9k29 gold badges129 silver badges212 bronze badges

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

4 Comments

Tom Gullen Over a year ago

The css I'm using doesn't work on input elements, only the button element.

Tom Gullen Over a year ago

Look at edit, a lot of those CSS effects don't work with a <input> tag

m.edmondson Over a year ago

That looks like a lot of nasty CSS, what does it actually do? Look here stackoverflow.com/questions/469059/… button seems to have a few problems of its own. Why go against the flow? Input is the way to go.

Tom Gullen Over a year ago

You are right, with much less CSS and <asp:button> I can style it 90% of what I want.

Frédéric Hamidi · Accepted Answer · 2011-01-28 15:26:50Z

1

The <button> element will be translated into an HtmlButton instance in your code-behind. That class exposes a server-side ServerClick event that you can use for your purposes:

<button runat="server" id="btnNext"
    OnServerClick="btnNext_Click">Next &gt;</button>

protected void btnNext_Click(object sender, EventArgs e)
{
    // Handle the click event...
}

answered Jan 28, 2011 at 15:26

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

Collectives™ on Stack Overflow

ASP.net c# button click

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related