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.

Advertisements

3 thoughts on “How to call server side method by jquery or java script in asp.net.

  1. Pingback: How to Parse JSON Date on client side by java script. | [Code Destination]

  2. Hi,

    I want to call server side method from client side code,i saw your methods in post but my problem is My methods is binding dropdown list so we are unable to use server controls of page inside the static block. Do you have any solution,If yes please let me know at nitin.jaine@gmail.com ASAP. If you have any option to call code behind non static methods on client side please favor me.

    Regards
    Nitin Jain

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