Wednesday, November 3, 2010

Simple jquery manipulation (Asp.Net)

I started learning jquery recently. This is a simple tutorial using asp.net website to show alert message and to change background color of label control. Add a label control, an asp.net button control, and input html button. Make sure to reference the jQuery library in your asp.net website.

jQuery Script:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
$(document).ready(function() {
    $('#btnAlert').click(function() {
        alert('my first jquery app!');
    });
    $('#btnChangeBackColorLabel').click(function() {
        $('span').css("background-color", "blue");
    });
    $("span").click(function() {
        $(this).css("background-color", "yellow");
    });
});

HTML CODE:
1
2
3
4
5
6
7
<div>  
     <asp:Button ID="btnAlert" runat="server" Text="Show Alert" /> <br />  
      Click Change Me label itself to change background color to yellow<br />  
     <input id="btnChangeBackColorLabel" type="button" value="ChangeColorToBlue" />   
      <asp:Label ID="lblHi" runat="server" Text="Change Me" BorderStyle="Solid">  
    </ asp:Label>  
 </div>  

During page render,labels are rendered as span elements.

Cheers

0 comments:

Post a Comment