We use jQuery a lot here at LavaBlast, but we also use ASP.NET webforms. We needed a simple reusable way to cause a postback on an asp.net managed Button or LinkButton.
Here is how it would be used for <asp:Button ID=”btShow” runat=”server” OnClick=”DoSomething” />
// Cause btShow to postback to the server
If you are not too familiar with jQuery, the selector [id$=”btShow”] search for any control with an id which ends with “btShow”.
Since ASP.NET 4.0, you could also use the new ClientIDMode=”Static” property on the server control to be able to have a static ID on the client and use a jQuery selector like this: $(‘#btShow’), but this is the matter of another discussion completely.
The postback() method is a jQuery plugin which I include here:
postback: function ()
return this.each(function ()
if (this && "undefined" != typeof this.click)
Feel free to use this and let us know if you find any problems with the code.
Here is our login form in FranchiseBlast
. We think it's a pretty cool login form and it was not that hard to do. It only requires basic CSS and some jQuery.
How we did it
The only things you need is an image like this one here:
Then we used the following CSS to define our text boxes style. The "Login" css class is applied to the ASP.NET Login control and the class "TextBox" are applied to both textboxes in the login control.
.Login .Textbox, .Login .Hover
background:transparent url(images/inputlogin.png) no-repeat top left;
background:transparent url(images/inputlogin.png) no-repeat bottom left;
Has you can see, the only difference for .Hover class is that we tell the background to show the bottom of the picture (the orange part) instead of the top of the image. If Internet Explorer supported the "focus" CSS pseudo class then it would be much simpler, but IE doesn't support it, so we have to use jQuery to achieve the effect.
Don't forget to add jQuery.js somewhere in the page and then you can add the following script to your page:
Basically the code above registers an event to all DOM elements which have the "Textbox" CSS class and are children of a control of the "Login" CSS class. The first call registers an event handler on the focus event of the text box which changes the class to Hover. We do the exact opposite for the blur event when we the text box loses it's focus. There may be a better way to do this why jQuery; if you know how, let us know.
Finally, as a special added touch, we use an AnimationExtender after a successful login:
<ajax:AnimationExtender ID="animLogin" runat="server" TargetControlID="LoginButton">
<FadeOut Duration=".5" Fps="20" AnimationTarget="pnlLogin" />
One last thing, if you use this AnimationExtender, you have to make sure your validators don't run on the client side. Validation must occur on the server otherwise the fade out animation will still occur and the login control will disappear. For example, we used a RequiredFieldValidator for both the username and password text boxes and we had to set the EnableClientScript property to false on both these validators.
This concludes how to do a skinned Login control à la LavaBlast.