Introduction: In this article I
am going to explain with simple example to call Asp.net C# or VB server side
functions or page methods at client side from JavaScript with the help of AJAX PageMethods without reloading/refreshing page.
In previous articles i explained jQuery AJAX JSON example to call Asp.net server side function or method without any post back and jQuery AJAX example to insert data into sql server database without postback and Upload multiple files or images through one fileupload control using jQuery plugin and Ajax CascadingDropDown example to Fill DropDownList with Countries,states and cities and jQuery to limit and display number of characters left in multiline textbox and jQuery to Check Uncheck all items in CheckBoxList on click of Select All CheckBox and Ajax ModalPopupExtender example to open login form in popup window in asp.net
Description: By default asp.net web page gets post back
when we click on Asp.Net button. For example: Let's consider a very basic
example for the sake of simplicity as shown in image above, if we have
two textbox controls to enter two numbers and on button click we want to
calculate sum of these two numbers. The page will be posted back to server by
default to process the request, thus causing slow and annoying page refresh.
But through AJAX pagemethods we can call the
same server side functions i.e. the functions created in the code behind file (.aspx.cs
or .aspx.vb) at client side without reloading the page to process the request.
Asp.Net AJAX ScriptManager allows
us to call server-side Asp.Net web methods from client side without any postback
using PageMethods. AJAX PageMethods is a way to expose server side page's
method in JavaScript.
By setting the EnablePageMethods property
of the ScriptManager Control to true, the methods/functions declared as WebMethod
in Asp.Net code behind file can be called from client script.
Implementation: Let’s create an
example to the concept in action
HTML Source Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Call asp.net server side functions from JavaScript using AJAX PageMethods</title>
<script
type="text/javascript">
function MyFunction() {
//Get
values from textboxes that wiil be passed to function
var num1 = document.getElementById('<%=txtFirstNumber.ClientID
%>').value;
var num2 = document.getElementById('<%=txtSecondNumber.ClientID
%>').value;
PageMethods.CalculateSum(num1,
num2, onSucess, onError);
function onSucess(result) {
$get('dvMsg').innerHTML
="Sum of " + num1 + " and " + num2 + " = " +
result;
}
function onError(error) {
alert("Error: " + error.get_message());
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<table>
<tr>
<td>Enter First Number:</td>
<td>
<asp:TextBox ID="txtFirstNumber" runat="server" /></td>
</tr>
<tr>
<td>Enter Second Number:</td>
<td>
<asp:TextBox ID="txtSecondNumber" runat="server" /></td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="btnCalculate" runat="server" Text="Calculate" OnClientClick="MyFunction();return false;" />
<div id="dvMsg"></div>
</td>
</tr>
</table>
</div>
</form>
</body>
Asp.Net C# Code to call server side
methods from javascript using Ajax PageMethods
In the .aspx.cs file first add following required namespace:
using System.Web.Services;
and
then add the following method
[WebMethod]
public static string CalculateSum(Int32
Num1, Int32 Num2)
{
Int32 Result = Num1 + Num2;
return Result.ToString();
}
Asp.Net VB Code to call server
side methods from javascript using Ajax PageMethods
In the .aspx.vb file first add following required namespace:
Imports System.Web.Services
and
then add the following method
<WebMethod> _
Public Shared Function CalculateSum(Num1 As Int32,
Num2 As Int32) As String
Dim Result As Int32 = Num1 + Num2
Return Result.ToString()
End Function
Now over to you:
If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..