Incorporate JQuery in ASP.NET

No.of Views1594
Bookmarked0 times
Downloads 
Votes0
By  RRaveen   On  15 Feb 2010 22:02:47
Tag : ASP.NET , How to
Incorporate JQuery in ASP.NET
emailbookmarkadd commentsprint

Images in this article missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at info@codegain.com

 

Introduction

The JQuery is most popular word in this days in web development. Acutlly this is open source JAVA Script libaray. The advantage in JQuery , first is light weight size of the linaray file just 56KB in unzip format.

You can download latest JQuery file from JQuery official web site http://jquery.com/. Next we need access JQuery script in our asp.net web project. To this we can add script file to project in different ways

1. Copy the file and paste on your project.

2.Right click on your porject and then select add existing item menu then point to that file , finaly click OK button to add in your project.

Now we have script within project, but we can't access the method or property within the code. to this we need ad the script like followings ways

HTML Code

1. Select Jquery Script file, then drag and drop to the Web page Head.

{codecitation class="brush: html; gutter: true;" width="650px"}

<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.3.2.min.js">
</script>
</head>

{/codecitation}

2. You we can add using server side code with RegisterClientscriptInclude method.

{codecitation class="brush: c#; gutter: true;" width="650px"}

protected override void OnPreRender(EventArgs e)
{

ClientScript.RegisterClientScriptInclude("jQuery", "http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js");
base.OnPreRender(e);
}

{/codecitation}

Now we have JQuery library in our page. Then start to play with Jquery in your page.

Implementation

First we need to welcome JQuery to the ASP.NET web applicationSmile


{codecitation class="brush: html; gutter: true;" width="650px"}

<form id="form1" runat="server">
<div id="Test">
<input id="Button1" type="button" onclick="javascript:Welcome();" value="button" />
</div>
<div id="Welcome">
</div>
</form>

<script language="javascript" type="text/javascript">

function Welcome() {
$("#Welcome").append('Welcome To QJuery');
}
</script>

{/codecitation}

Look at above line. It is new to ones who are learning JQuery. $ is the symbol to access JQuery peroperties, method and etc.


Note:$ is imporant in Jquery and simply we can say that is the Jquery entry point.

What I have done in above line was, try to find the Div element which ID equal to "Welcome" then append welcome message to the element. You can understand how simple it is. One more thing is new here "#", before dev ID; this is for access the div only.

Here more details and keywords to access elements and set CSS to html elements.http://docs.jquery.com/Main_Page

Conclusion

This tutorial focused on how to Incorporate JQuery in ASP.NET. Next article will explain how to set CSS control using JQuery in asp.net.

Thank you

About the Author


RRaveen(Bsc,MCTS,MCPD,MCP)
- B.Sc. degree in Computer Science.
- 4+ years experience in Visual C#.net and VB.net
- Obsessed in OOP style design and programming.
- Designing and developing Network security tools.
- Designing and developing a client/server application for sharing files among users in a way other than FTP protocol.
- Designing and implementing GSM gateway applications and bulk messaging.
- Windows Mobile and Symbian Programming
- Having knowledge with ERP solutions

The summary of my skills:
C#, VB.Net#,ASP.net, VC++, Java, WPF,WCF, Oracle, SQL Server, MS Access, Windows NT administration
Occupation: Tech Lead
Company: TGS Solutions


 
Sign Up to vote for this article
 
About Author
 
RRaveen
Occupation-Software Engineer
Company-TGS
Member Type-Gold
Location-Singapore
Joined date-03 Jun 2009
Home Page-codegain.com
Blog Page-www.codegain.com
- B.Sc. degree in Computer Science. - 4+ years experience in Visual C#.net and VB.net - Obsessed in OOP style design and programming. - Designing and developing Network security tools. - Designing and developing a client/server application for sharing files among users in a way other than FTP protocol. - Designing and implementing GSM gateway applications and bulk messaging. - Windows Mobile and Symbian Programming - Having knowledge with ERP solutions
 
 
Other popularSectionarticles
Comments
There is no comments for this articles.
Leave a Reply
Title:
Display Name:
Email:
(not display in page for the security purphase)
Website:
Message:
Please refresh your screen using Ctrl+F5
If you can't read this number refresh your screen
Please input the anti-spam code that you can read in the image.
^ Scroll to Top