jQuery and LinkButtons, or Regular Buttons and CSS

Question

I've got a small login control on my master page. On the login control, I'm using a LinkButton for the Submit button because I like the way it looks.

However, I'm also using jQuery to capture when the 'enter' key is pressed in any of the login control text boxes. It's difficult to trigger the click event of a link button with jQuery in every browser. I've even tried hard-coding _doPostBack, but the LinkButton ID is just a tiny bit different from what's in the built-in href="_doPostBack" attribute on the control. It's not responding to .trigger(), click(), etc.

On the other hand, a regular Button control works just fine with jQuery click(). But I'm not a big fan of the way buttons look, and my CSS skills are limited. Is there an easy way to style a normal ASP.NET button control to look like a link? Or is there an easy way to make the LinkButton behave with jQuery? I'll choose whichever method requires less effort. :)

Thanks in advance.

Answer 1

Sure, it's not a problem to style <input type="submit"> and <button> elements with CSS:

input.button,
button {   
    margin: 0;
    padding: 0;   

    color: blue;
    background: none;
    border: 0;   

    cursor: pointer;
}

You can see how it looks here.

One thing to be aware of though is that button styling is not always consistently applied cross-browser. Here's a post showing the difference in rendering in different browsers and OS. In other words, make sure your target browsers apply the above correctly.

Answer 2

You can get the exact JavaScript that the LinkButton fires by using the ClientScriptManager:

string postbackFunction = this.Page.ScriptManager.GetPostBackEventReference(myLinkButton, "");

string jQueryBlock = @"$('#loginbox').keypress(function(e){
    if(e.which == 13) {" + postbackFunction + ";}});

//print the jQueryBlock to the page

It will output a JS function call that looks something like this:

__doPostBack('linkButtonID','', 0);