Introduction: In this article I will explain with simple
example how to use ajax method of jquery 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 jQuery AJAX calls 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.
But through jQuery AJAX calls 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 page methods using
jQuery AJAX & json</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
type="text/javascript">
$(document).ready(function () {
$("#btnCalculate").click(function () {
//Get
values from textboxes that will be passed to function
var
num1 = $('#txtFirstNumber').val();
var
num2 = $('#txtSecondNumber').val();
$.ajax({
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
//Url
is the path of our web method (Page name/function name)
url: "HIdejquery.aspx/CalculateSum",
//Pass
values to parameters. If function have no parameters, then we need to use data:
"{ }",
data: "{'Num1':'" + num1 + "', 'Num2':'" + num2 + "'}",
//called
on ajax call success
success: function (result) {
$('#dvMsg').text("Sum
of " + num1 + " and " +
num2 + " = " + result.d);
},
//called
on ajax call failure
error: function (xhr, textStatus, error) {
$('#dvMsg').text("Error:"
+ error);
}
});
});
});
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<fieldset style="width:350px;">
<legend><strong>Calculate Values Using Jquery & Web-Method</strong></legend>
<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" Text="Calculate" runat="server" OnClientClick="return false;" />
<div id="dvMsg"></div>
</td>
</tr>
</table>
</fieldset>
</div>
</form>
</body>
</html>
Asp.Net C# Code to call
server side methods using jQuery 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 jQuery Ajax 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