JQuery Basic Use, Method Chaining, Ajax with ASP.NET Web Method

sanman chavan
Jan 22, 2016
6k
0
3
Article

Where and how to use it

JQuery is a JavaScript library which is lightweight, with the main purpose of "Write less. do more." Every developer uses JQuery normally for manipulation on Html, css, client side validation, Ajax, Rising event on controls, making the UI more attractive, etc. In the market there are so many libraries which allow you to use them, you just have to write a few lines of codes in your application which binds with your controls and needs implementation of those libraries.

As we know that JQuery is a JavaScript library, to use that you should first have basic knowledge about HTML and JavaScript. Whenever we use JavaScript we first include one CDN or we will download JQuery core library.

You can download it from here.

Or you can include one of the cdn:

Google cdn:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>

Microsoft cdn:

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
</head>

JQuery Syntax:

$(selector).action() //syntax.
$ is a function which specifies that you want to access JQuery.
(selector) is for finding html element //such as <Button id=”btnid” class=”btnclass”>ADD</Button>.
We can access html elements using there id or class name{for class (“.btnid”) for id (“#btnclass”) } . If you want to access all button with class name “btnclass” just use (“btnclass”), this will allow you to access all button.
action() is for performing any action on (selector) //action suppose hide()

E.g: $(“#btnid”).hide();

How we raise function or event in JavaScript

Function changeBackground(color) {
Document.body.style.background = color;
}
Onload=”changeBackground (‘red’);”

How we raise function or event in JQuery

$ (‘body’) .css (‘background’, ‘#ccc’);

Example

Code:

event in JQuery

Output:

Run

Method chaining concept in Jquery

There is a technique called chaining that allows us to run multiple JQuery command, one after other on the same element.

Important point:

It makes your code short and easy to manage.
It gives better performance.
The chain starts from left to right. So left most will be called first and so on.

Example:

<script>
$(document).ready(function(){
$('#dvContent').addClass('dummy'); //without method chaining
$('#dvContent').css('color', 'red');
$('#dvContent').fadeIn('slow');
});
</script>
<script>
$(document).ready(function(){
$('#dvContent').addClass('dummyclas').css('color','red') //with method chaining
});
</script>

Reset all the elements in the form using method chaining:

<script>
$('#form1').find('input:text, input:password, input:file, select, textarea').val('');
$('#form1').find('input:radio,input:checkbox').removeAttr('checked').removeAttr('selected')
</script>

The above lines will find from with id form1 after that find function will find the all element whose input type is text and password etc...Once it finds all element of the form, it will make there value equal to blank.

Simple example of Ajax with Web method in ASP.NET

Step 1: Open a new web empty project:

Step 2: Write basic html form for registration

HTML

Step 3: Write script which has Ajax functionality in it.

Working:

In insertProduct() function, we have created one variable with name mesg.
Mesg variable have key value pair of combination, for example, pcode is key and $(“txt_Product_Code”).val() have value.
In $.Ajax
- For “post” means the request is of type POST.
- We have written “url” ,where Ajax will find its desired web method.
- “data” means what data we are passing ,actual content.
Whenever two different technologies interaction are involved the data which are passed between them are only String. Its a standard set for interaction. Here we are using JavaScript and C#.
Write web method from which JavaScript find its desired web method.

Working: If we get true from web method as return value, in JavaScript it will check the response.