Learning jQuery

As this post is about "using jQuery with ASP.NET" so we will not be looking into "What is jQuery" and "How to use jQuery" assuming you know basics of jQuery. If not, then please read "Learn how to use jQuery?"

To begin with using jQuery with ASP.NET, first download the latest version the jQuery library from jQuery website and unzip or copy the file in your project or Visual studio solution. Microsoft Visual studio 2010 and 2012 include jQuery by default and provide intellisense to use jQuery. Assuming that you have placed the library in Script folder, add this in the head of your ASP.NET page (simple or master). (Its a good practice to keep your all js file under Script folder).

<script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>

Or you can directly refer them using various CDNs. Put this line of code in head section of ASP.NET Page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

In the above code, I have not used "http" protocol while referencing jQuery from Google CDN. Its not a mistake rather always use protocol less URL for referencing jQuery.

After this setup, you can use jQuery in your ASP.NET page. Let's see a demo.

Show alert window on click of ASP.NET Button.

Assuming a ASP.NET button with ID "btnSubmit " is placed on the page.

<asp:Button ID="btnSubmit" runat="server" Text="Button" />

And now bind the click event to ASP.NET Button in document.ready section.

<script type="text/javascript">
  $(document).ready(function() {
    $("#btnSubmit").click(function() {
         alert("Alert using jQuery");
    });
  });
</script>

In above jQuery code block, we have attached click event to the button using ID selectors. Read more about other jQuery selectors and how to use them.

Below is a list of useful jQuery code example for ASP.NET controls that we use on daily basis. One thing, while creating object of any ASP.NET control, always use ClientID. As when Master pages are used then the ID of the ASP.NET controls is changed at run time. Read more here. But with ASP.NET 4.0, this is changed and now you have control over the Client ID using ClientIDMode property.

Get label value:

$('#<%=Label1.ClientID%>').text();

Set label value:

$('#<%=Label1.ClientID%>').text("New Value");

Get Textbox value:

$('#<%=TextBox1.ClientID%>').val();

Set Textbox value:

$('#<%=TextBox1.ClientID%>').val("New Value");

Get Dropdown value:

$('#<%=DropDownList1.ClientID%>').val();

Set Dropdown value:

$('#<%=DropDownList1.ClientID%>').val("New Value");

Get text of selected item in dropdown:

$('#<%=DropDownList1.ClientID%> option:selected').text();

Get Checkbox Status:

$('#<%=CheckBox1.ClientID%>').attr('checked');

Check the Checkbox:

$('#<%=CheckBox1.ClientID%>').attr('checked',true);

Uncheck the Checkbox:

$('#<%=CheckBox1.ClientID%>').attr('checked',false);

Get Radiobutton Status:

$('#<%=RadioButton1.ClientID%>').attr('checked');

Check the RadioButton:

$('#<%=RadioButton1.ClientID%>').attr('checked',true);

Uncheck the RadioButton:

$('#<%=RadioButton1.ClientID%>').attr('checked',false);

Disable any control:

$('#<%=TextBox1.ClientID%>').attr('disabled', true);

Enable any control:

$('#<%=TextBox1.ClientID%>').attr('disabled', false);

Make textbox read only:

$('#<%=TextBox1.ClientID%>').attr('readonly', 'readonly');

I had already posted many ASP.NET related post and below you find links some useful posts.

• jQuery and ASP.NET DropDownList
• Call jQuery from ASP.NET server side
• Retrieve Server's current date and time with ASP.NET
• Mostly used and essential jQuery code examples
• jQuery Validation With ASP.NET Web Forms
• ASP.NET GridView + jQuery Tips and Tricks

Feel free to contact me for any help related to jQuery, I will gladly help you.