jQuery introduction and how to use jQuery with ASP.NET Master page and simple pages

• Download source code - 131 KB

jQuery Introduction

jQuery is a JavaScript library developed to simplify client-side scripting, event handling, and animation on client side. jQuery is very powerful making its slogan very true "Write less do more".

Why we should use jQuery

Before reading anything I always raise this question to Google . In the case of jQuery, I am giving the answer- jQuery simplifies JavaScript programming and ensures the code runs on every browser available. We can do most JavaScript code with jQuery. jQuery uses a chaining mechanism while writing code which makes it more easy to write and understand.

Including jQuery in ASP.NET

To include jQuery, first download the latest version at www.jquery.com and unzip or copy the file to the root directory of your website project (in other words, where your default.aspx, index.html, or index.php file is). Microsoft Visual studio 2010 and 2012 include jQuery by default and provide intellisense to use jQuery.

After downloading jQuery you can add this in the head of your ASP.NET page (simple or master):

<script src = 'jquery-1.7.1.min.js' type = 'text/javascript'></script>

Tip: using Google AJAX libraries to add jQuery has several advantages: decreased latency, increased parallelism, and better caching.  

You can add this in head section: 

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

and missing http: isn't a mistake, that’s a helpful trick which allows using a single reference that works on both HTTP and HTTPS pages. And protocol less fetch in the jQuery library is directly from disk to browser which increases the speed bit as well .

<script src="http://www.codeproject.com/ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

SpeedTest

I have added the above three links in our ASP.NET page and tested the speed of their timeline

Now below you will see their speed:

You can see the timeline of link without the protocol is 14ms which is the fastest in comparison to others.

Access ASP.NET master page control with jQuery

Ensure that if you have already included jQuery in your master page, don't include this in your content page because while rendering in browser the ASP master page and content page gets merged and the browser always executes from top to bottom.

How to access elements in master page using jQuery

Below I've put some code sample which I have used to get jQuery to find .NET controls because it is hard to find the controls due to dynamic nature and .NET controls such as Master page, login control, and GridView elements.

Solution 1 :

You can use a wild card CSS selector. It works always .

input[id$=TextBox]

The above line matches all HTML input elements with an ID attribute that ends with "TextBox". It will match:

<asp:TextBox ID="ctl00$TextBox" runat="server"/> <asp:TextBox ID="LaLaLaTextBox" runat="server"/> <asp:TextBox ID="HehahaTextBox" runat="server"/>

Example:

$(document).ready(function () {
     //write your code here
     var  txt =$('input[id$=TextBox2]').val();
});

Solution 2

Using clientID for an ASP.NET page. The client ID of the control won't be known until the page is produced. So you can use a predictable client id using jQuery # and ID given by you.

$('#' + '<%=label1.ClientID %>')

or:

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

//example -
$(document).ready(function () {
     //write your code here
     var lbltext = $('#' + '<%=lbl.ClientID %>').text();

        $('#' + '<%=TextBox4.ClientID %>').val(lbltext);

 });

Solution 3

Finding it with an attribute 

$("[id$=_txtSymbol]").attr("id")

Also realize that doing attribute selector searches are fairly slow (but then ‘slow’ is relative). If you have very large documents with lots of elements and you’re doing many look ups using this function, you may run into performance issues.