Introduction: In this article I
am going to explain with simple example how to call Asp.net C# or VB server side
functions or page methods from client side using jQuery AJAX call without
reloading/refreshing page.
In previous examples i explained how to Call Asp.net server side function using Javascript and AJAX PageMethods without any PostBack and jQuery AJAX example to insert data into sql server database without postback and calculate and show Running Total in asp.net using jQuery and Validate,upload,crop and store image in folder in asp.net using jQuery and Load more records in Asp.Net Gridview on button click from sql server table and Ajax AutoCompleteExtender control example without using web service and Show image preview before uploading through fileupload control using jQuery
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
jQuery AJAX calls 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.
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 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: "MyPage.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>
<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>
</div>
</form>
</body>
Asp.Net C# Code to call server side methods using jQuery Ajax calls
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 using jQuery Ajax calls
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:
2 comments
Click here for commentsI'm getting an error here. Unkown web method [myWebMethod]
ReplyHi..please don't alter [WebMethod]..Keep it as it is.
ReplyIf 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..