In this article I will explain with simple example how to
use ajax method and javascript in asp.net to call Web-Method to avoid page post back
(without reloading/refreshing page).
By default asp.net web page gets post back when we
click on Asp.Net button. For example: Let's consider a example: 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.
But through AJAX calls using javascript we can call the server side web method i.e. the functions in the code behind
file at client side without reloading the page to process the request.
Source
Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" 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>
<fieldset style="width:400px;">
<legend><strong>Call server side functions using JavaScript &
AJAX</strong></legend>
<table>
<tr>
<td> </td>
<td>
</td>
</tr>
<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>
</fieldset>
</div>
</form>
</body>
</html>
Asp.Net
C# Code to call server
side methods using Javascript Ajax calls
Add following required namespace:
using System.Web.Services;
then Add following web 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 using javascriptAjax calls
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
0 comments:
Post a Comment