Click here to Skip to main content
11,813,557 members (43,673 online)
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 232.5K 6.9K 33
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 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="" 

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="" type="text/javascript"></script>


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:


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=.


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"/>


$(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 %>')


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

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


Solution 3

Finding it with an attribute 


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. 


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


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

You may also be interested in...

Comments and Discussions

QuestionHelp Pin
jinksk21-Aug-14 11:27
memberjinksk21-Aug-14 11:27 
GeneralMy vote of 5 Pin
Member 1100920112-Aug-14 17:57
memberMember 1100920112-Aug-14 17:57 
GeneralMy vote of 2 Pin
Member 1100639811-Aug-14 14:23
memberMember 1100639811-Aug-14 14:23 
GeneralMy vote of 4 Pin
Member 1100637511-Aug-14 14:13
memberMember 1100637511-Aug-14 14:13 
GeneralRe: My vote of 4 Pin
Sarvesh Kushwaha11-Aug-14 15:20
memberSarvesh Kushwaha11-Aug-14 15:20 
GeneralRe: My vote of 4 Pin
Member 1100637512-Aug-14 4:31
memberMember 1100637512-Aug-14 4:31 
GeneralRe: My vote of 4 Pin
Sarvesh Kushwaha12-Aug-14 6:45
memberSarvesh Kushwaha12-Aug-14 6:45 
GeneralMy vote of 1 Pin
Member 1100637511-Aug-14 14:00
memberMember 1100637511-Aug-14 14:00 
GeneralMy vote of 1 Pin
Member 1063947230-Jun-14 1:17
memberMember 1063947230-Jun-14 1:17 
Questionthanx Pin
Mahdi Ghafoorian21-Apr-14 19:27
memberMahdi Ghafoorian21-Apr-14 19:27 
AnswerRe: thanx Pin
Sarvesh Kushwaha21-Apr-14 19:27
memberSarvesh Kushwaha21-Apr-14 19:27 
QuestionI'm new to Jquery Pin
rahul prajapati20-Feb-14 11:37
memberrahul prajapati20-Feb-14 11:37 
AnswerRe: I'm new to Jquery Pin
Sarvesh Kushwaha22-Feb-14 14:49
memberSarvesh Kushwaha22-Feb-14 14:49 
QuestionThank you!! Pin
Member 1041393729-Dec-13 22:51
memberMember 1041393729-Dec-13 22:51 
AnswerRe: Thank you!! Pin
Sarvesh Kushwaha30-Dec-13 0:37
memberSarvesh Kushwaha30-Dec-13 0:37 
QuestionSpeed test Pin
Pierre Grassin11-Sep-13 4:23
memberPierre Grassin11-Sep-13 4:23 
AnswerRe: Speed test Pin
Sarvesh Kushwaha11-Sep-13 18:43
memberSarvesh Kushwaha11-Sep-13 18:43 
GeneralRe: Speed test Pin
Pierre Grassin11-Sep-13 20:37
memberPierre Grassin11-Sep-13 20:37 
Questionjquery steps Pin
Prathameshpisat29-Aug-13 1:41
memberPrathameshpisat29-Aug-13 1:41 
AnswerRe: jquery steps Pin
Sarvesh Kushwaha29-Aug-13 18:41
memberSarvesh Kushwaha29-Aug-13 18:41 
QuestionThx Pin
lim wei han9-May-13 21:30
memberlim wei han9-May-13 21:30 
AnswerRe: Thx Pin
Sarvesh Kushwaha14-May-13 18:29
memberSarvesh Kushwaha14-May-13 18:29 
GeneralMy vote of 4 Pin
Jayanta Chatterjee16-Apr-13 5:31
memberJayanta Chatterjee16-Apr-13 5:31 
GeneralRe: My vote of 4 Pin
Sarvesh Kushwaha16-Apr-13 5:49
memberSarvesh Kushwaha16-Apr-13 5:49 
QuestionAccess ASP.NET master page control with jQuery Pin
Sanooj VS5-Feb-13 20:21
memberSanooj VS5-Feb-13 20:21 
AnswerRe: Access ASP.NET master page control with jQuery Pin
Sarvesh Kushwaha9-Feb-13 3:30
memberSarvesh Kushwaha9-Feb-13 3:30 
GeneralMy vote of 1 Pin
SChristmas29-Oct-12 10:45
memberSChristmas29-Oct-12 10:45 
GeneralRe: My vote of 1 Pin
Sarvesh Kushwaha29-Oct-12 15:39
memberSarvesh Kushwaha29-Oct-12 15:39 
GeneralRe: My vote of 1 Pin
SChristmas29-Oct-12 22:26
memberSChristmas29-Oct-12 22:26 
Its not beginners, its for kids

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
Web02 | 2.8.151002.1 | Last Updated 22 Jan 2013
Article Copyright 2012 by Sarvesh Kushwaha
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid