JQuery With ASP.NET

In this article you will come to know what is JQuery and how to use with selected ASP.NET controls.

JQuery is a JavaScript library. It is helpful and make easy to handle HTML DOM (Document Object Model), Events and Animation and Ajax functionalities. JQuery reduce code compared to JavaScript. Mostly we use JQuery or JavaScript for client side activities and make Ajax call to ASP.NET Web form/mvc, Web service and WCF.

JQuery VS JavaScript link:

There following ways to incorporate JQuery in your projects.

  1. NuGet: While you use this on your project

    Select Tools, Library Package Manager, then Manage NuGet packages for solution
    Search and Install: JQuery .



  2. Manually download JQuery of your selected version and attached to Visual Studio.
    1. <script src="Scripts/JQuery -?.?.?.min.js" type="text/javascript"></script>  
  3. CDN - Content Delivery Network.

    It is directly delivered from google or Microsoft server.

    For example,
    1. <script src="//ajax.googleapis.com/ajax/libs/JQuery /?.?.?/JQuery .min.js" type="text/javascript"> </script>  

Always use minified version: like JQuery -?.?.?.min.js because it is fast to load and lightweight.

The following are the commonly used server control in which mostly we want to set and get value from JQuery .

Control ID SET Value GET Value
Label $('#<%=lblSerialNo.ClientID%>').text("101"); $('#<%=lblSerialNo.ClientID%>').text();
TextBox $('#<%=txtFriendName.ClientID%>').val("Rajesh "); $('#<%=txtFriendName.ClientID%>').val();
DropDownList   $('#<%=ddlGender.ClientID%>').val();
CheckBox   $('#<%=chkIsMarried.ClientID%>').attr('checked');


Check the status:

  1. $('#<%=chkAdult.ClientID%>').attr('checked',true);  
Uncheck the Status:
  1. $('#<%=chkAdult.ClientID%>').attr('checked',false);  

Get Radiobutton status:
  1. $('#<%=rboSeatType.ClientID%>').attr('checked');  


  • Disable any server control:
    1. $('#<%=txtRemarks.ClientID%>').attr('disabled'true);  
  • Enable any server control:
    1. $('#<%=txtRemarks.ClientID%>').attr('disabled'false);