Click here to Skip to main content
Click here to Skip to main content

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

, 22 Jan 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
How to access elements of a master page in jQuery.

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 Smile | <img src=. 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 Wink | <img src=.

<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 Smile | <img src=

Now below you will see their speed:

sppedtest

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 Wink | <img src= Smile | <img src=.

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. 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Sarvesh Kushwaha
Software Developer
India India
I do believe life is to help others ... So here i am .. in my spare time i learn new things of programming and try to help people with my knowledge .
I'm an energetic, self-motivated and hard-working Developer and Information Technology Professional with experience in projects, website design and development.
 
Visit My Technical Blog
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
QuestionHelp Pinmemberjinksk21-Aug-14 12:27 
GeneralMy vote of 5 PinmemberMember 1100920112-Aug-14 18:57 
GeneralMy vote of 4 PinmemberMember 1100637511-Aug-14 15:13 
GeneralRe: My vote of 4 PinmemberSarvesh Kushwaha11-Aug-14 16:20 
GeneralRe: My vote of 4 PinmemberMember 1100637512-Aug-14 5:31 
GeneralRe: My vote of 4 PinmemberSarvesh Kushwaha12-Aug-14 7:45 
GeneralMy vote of 1 PinmemberMember 1100637511-Aug-14 15:00 
GeneralMy vote of 1 PinmemberMember 1063947230-Jun-14 2:17 
Questionthanx PinmemberMahdi Ghafoorian21-Apr-14 20:27 
AnswerRe: thanx PinmemberSarvesh Kushwaha21-Apr-14 20:27 
QuestionI'm new to Jquery Pinmemberrahul prajapati20-Feb-14 12:37 
AnswerRe: I'm new to Jquery PinmemberSarvesh Kushwaha22-Feb-14 15:49 
QuestionThank you!! PinmemberMember 1041393729-Dec-13 23:51 
AnswerRe: Thank you!! PinmemberSarvesh Kushwaha30-Dec-13 1:37 
QuestionSpeed test PinmemberPierre Grassin11-Sep-13 5:23 
AnswerRe: Speed test PinmemberSarvesh Kushwaha11-Sep-13 19:43 
GeneralRe: Speed test PinmemberPierre Grassin11-Sep-13 21:37 
Questionjquery steps PinmemberPrathameshpisat29-Aug-13 2:41 
AnswerRe: jquery steps PinmemberSarvesh Kushwaha29-Aug-13 19:41 
QuestionThx Pinmemberlim wei han9-May-13 22:30 
AnswerRe: Thx PinmemberSarvesh Kushwaha14-May-13 19:29 
GeneralMy vote of 4 PinmemberJayanta Chatterjee16-Apr-13 6:31 
GeneralRe: My vote of 4 PinmemberSarvesh Kushwaha16-Apr-13 6:49 
QuestionAccess ASP.NET master page control with jQuery PinmemberSanooj VS5-Feb-13 21:21 
AnswerRe: Access ASP.NET master page control with jQuery PinmemberSarvesh Kushwaha9-Feb-13 4:30 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141223.1 | Last Updated 22 Jan 2013
Article Copyright 2012 by Sarvesh Kushwaha
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid