How to call server side method by jquery or java script in asp.net.

Introduction:

Many time we come across situation to get data or perform some logic or execute function on server side by java script or j-query, so to accomplish this task on client side without posting entire page (entire page post back).

For easy understanding
Suppose you have created a login register page and you have put restriction on login name I mean login name should be unique so checking for uniqueness you must need entered login name on client side and  then you will search in database and if that login name exist it means  entered login name already exist but for doing this you have some option.

1) By Entire page post back:  After value entered in login name you need to submit user input data to perform searching by login name but this is not seems ok..isn’t it. first user will enter login name then he will check whether it is exist or not by
waiting some time so we must go for another alternative solution

2) By Ajax call: Hmmm this is what alternative method which we will look in detail here.

ASP.NET Code:

<input id="<span class=" type="text" />loginNameBox" type="text" onchange  = "GetLoginInfo()" />
<div id="<span class=">divSuccessBar"></div>
// After AJx call data will written here.
</div>

Ajax Call in js file by Java  script:

function GetLoginInfo()
{
var enteredloginName = document.getElementById("#loginNameBox").value;

$.ajax({
type: "POST",
url: "GetLoginInfo.aspx/LoginExist",
data: "{'parameter:'enteredloginName}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function (msg) {
$("#divSuccessBar").html(msg.d);
}
});
}

Ajax Call in js file by J-query:

$(document).ready(function () {
var enteredloginName = document.getElementById("#loginNameBox").value;
$.ajax({
type: "POST",
url: "GetLoginInfo.aspx/LoginExist",
data:"{'parameter:'enteredloginName}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function (msg) {
$("#divMainContentBar").html(msg.d);
}
});
});

url:   In ajax method url contains aspx page and webmethod which you have defined.
date : Data in ajax call in which we paas value to webmethod in server side in above
I am sending entered user name.and “parameter” which I have define in web method.

[WebMethod]
public static string IsloginExist( string parameter)
{

String isloginExist  = string.Empty;

// Check here whether entered login name exist or not.
if( //loginname exist)
{
isloginExist = "Allready Exist"
}
else
{
isloginExist = "Not Exist"
}

return isloginExist;
}

Note: You must have to reference System.Web.Services dll and place it in top like this “using System.Web.Services;”

Feel free to comment if you find any difficulty.

Another Article

C#: How to Serialize JSON Array data by c# on server side.
How to Create Drag and Drop By J query.
How to get Dragable or Dropable element ID or attribute value in J-Query.
How to call server side method by jquery or java script in asp.net.
How to add javascript file by c# code in asp.net page.
Java Script: How to Get asp.net hidden or input field value by java script/ j-Query.