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="https://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
Example Result
