Home AJAX Call Server-side Function Using jQuery Ajax Call

Call Server-side Function Using jQuery Ajax Call

4
0

In my previous tutorials, I’d explained ajax introduction with example, how to call server-side method from javascript, how to call javascript function from code-behind and more cracking tutorials on Ajax, Asp.net, JavaScript and jQuery here.

Now here in this tutorial, I’ll explain how to call server-side function using jquery ajax call from .aspx page as well as how to call code-behind method in c# or vb.net with example code.

To call code-behind function or method with parameters from jquery ajax, we need to use following function on and bind it on button click event using jquery:

<script type=”text/javascript”>
$(document).ready(function () {
$(“#btnSubmit”).click(function () {
//first get all parameters if any
var FirstName = $(‘#txtFirstName’).val(),
LastName = $(‘#txtLastName’).val();
$.ajax({
type: “POST”,
dataType: “json”,
contentType: “application/json; charset=utf-8”,
//url: “yourpagename.aspx/yourmethodnamewithoutbracesandparameters”
url: “CallMethodUsingJson.aspx/callFunction”,
//Be carefull about single quotation marks while parsing parameters
//If function have no parameters, parse blank “data” for eg, data: “{ }”,
data: “{‘FirstName’:'” + FirstName + “‘, ‘LastName’:'” + LastName + “‘}”,
success: function (success) {
//called on ajax call success
alert(“Success: “ + success.d);
},
//call on ajax call failure
error: function (xhr, textStatus, error) {
//called on ajax call error
alert(“Error: “ + error);
}
});
});
});
</script>

Call Server-side Function using jQuery Ajax Call – [.aspx]

Following is the complete HTML Markup code that I used to call server-side function using jquery ajax call for my .aspx page:

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head id=”Head1″ runat=”server”>
<title>Call code-behind methods using json jquery example</title>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”>
</script>
<script type=”text/javascript”>
$(document).ready(function () {
$(“#btnSubmit”).click(function () {
//first get all parameters if any
var FirstName = $(‘#txtFirstName’).val(),
LastName = $(‘#txtLastName’).val();
$.ajax({
type: “POST”,
dataType: “json”,
contentType: “application/json; charset=utf-8”,
//url: “yourpagename.aspx/yourmethodnamewithoutbracesandparameters”
url: “CallMethodUsingJson.aspx/callFunction”,
//Be carefull about single quotation marks while parsing parameters
//If function have no parameters, parse blank “data” for eg, data: “{ }”,
data: “{‘FirstName’:'” + FirstName + “‘, ‘LastName’:'” + LastName + “‘}”,
success: function (success) {
//called on ajax call success
alert(“Success: “ + success.d);
},
//call on ajax call failure
error: function (xhr, textStatus, error) {
//called on ajax call error
alert(“Error: “ + error);
}
});
});
});
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<h4>
Call code-behind methods using json</h4>
FirstName:
<asp:TextBox ID=”txtFirstName” runat=”server” ClientIDMode=”Static” />
LastName:
<asp:TextBox ID=”txtLastName” runat=”server” ClientIDMode=”Static” />
<asp:Button ID=”btnSubmit” Text=”Submit” runat=”server” ClientIDMode=”Static”
OnClientClick=”return false;” />
</div>
</form>
</body>
</html>

Call Code-behind Function Using jQuery Ajax Call – [C#]

First add following namespace:

using System.Web.Services;

then add the following method to your aspx.cs page:

[WebMethod]
public static string callFunction(string FirstName, string LastName)
{
return “Your name is “ + FirstName + ” “ + LastName + “”;
}

Call Code-behind Function Using jQuery Ajax Call – [Vb.net]

First add following namespace:

Imports System.Web.Services

then add the following method to your aspx.vb page:

<WebMethod()>
Public Shared Function callFunction(ByVal FirstName As String, ByVal LastName
As String) As String
Return “Your name is “ & FirstName & ” “ & LastName & “”
End Function
Note: You must need to make server method as static [WebMethod] as shown in above example code.

Example Result

How to call server-side function or method using jquery ajax in asp.net?

Download Example

[wpdm_file id=28]

Git Repo

LEAVE A REPLY

Please enter your comment!
Please enter your name here
Captcha verification failed!
CAPTCHA user score failed. Please contact us!