Working with JQuery and Asp.Net


Here i would like to talk about JQuery, what is JQuery, how to use it with asp.net

 

We all know what is Javascript and the importance of Javascript while building Dynamic web forms.

JQuery is Javascript library, it contains all predefined code includes animation, UI, and some useful code functionality.

The advantage of JQuery is, it will support almost all browsers(IE,Chrome,Firefox,Safari,Opera..)

we can download JQuery library from here.

and also some CDNs are also available for Jquery, Google and Microsoft are Providing CDNs for JQuery

Google CDN: <script src=”//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js”></script>

Microsoft CDN:

<script src=”http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js”></script&gt;

after completing downloading JQuery Library, start working with asp.net by adding JQuery library to Asp.Net Website.

JQueryINVS

VisualStudio2010 By default include JQuery-1.4.1 in asp.net website and also includes jquery-1.4.1-vsdoc.js file.

This file is for VisualStudio2010 Intellisense. if open this file you can find following content as commented.

/*
* This file has been commented to support Visual Studio Intellisense.
* You should not use this file at runtime inside the browser–it is only
* intended to be used only for design-time IntelliSense.  Please use the
* standard jQuery library for all production use.
*
* Comment version: 1.4.1a
*/

Intellisense works as follows:

VSI

 VSI2

We can use jquery-1.4.1.js file for production use.

Example:

Open VisualStudio and select File –> New –> Website –> ASP.NET Empty Website –> Enter Some name of website—> Ok.

Now Add New folder and name it as Scripts, and add scripts to this folder and add one webform Default.aspx as follows.

JqueryWebsite

open Default.aspx file and add JQuery-1.7.js file to it and write following code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            alert("Welcome to JQuery");
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

Explanation:

ready function will rise when DOM is ready to use

in that ready function we can write our code.

Output:

Welcome to Jquery

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s