Jquery introduction and How to use jquery with Asp.net Masterpage and Simplepage

Jquery introduction and How to use jquery with Asp.net Masterpage and Simplepage

  12:24    Sarvesh Kushwaha

---

jquery is javascript library developed to simplify the client-side scripting of HTML,event handling and animation on client side. Jquery power making its slogan is very true "Write less do more".

Why we should use Jquery ? 

before reading anything i always raise above question to Google :) .

In Case of Jquery , i am giving the answer -
jquery simplifies javascript programming and ensures us to run on Every Browser available on the internet.we can do javascript code with Jquery. Jquery use chaining mechanism while writing codes which makes it  more easy to write and understandable.

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 including jquery by default and providing intellisense to use jquery.

After downloading jquery you can add this in 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 advantage decreased latency ,increased parallelism and provide better caching.

You can add this into head

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

and missing http: is'nt a mistake ,that’s a helpful trick which allows you to use a single reference that works on both HTTP and HTTPS pages.and protocol less fetch jquery library directly from disk to browser which increase the speed bit as well ;).below images will prove the speed test.

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

i have added 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 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 you content page .

because while rendering in browser asp master page and content page gets merged and 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've used to get jquery to find .net controls. because its hard to find the controls due to dynamic nature and asp.net controls such as Master page, login control and Grid view elements.

Solution1 :

You can use a wild card CSS selector.Its works always ;) :).
input[id$=TextBox]
The above line matches all HTML input elements with an id attribute that ends with "MyTextBox".
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();

 });

Solution2:

Using client ID For Asp.net Page-

The client ID of the control won't be known until the page is produced, So you can use 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);

 });

Solution3:

finding it with 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 slow performance issues.

you can download the working code from Here .