Description:
We can call server side methods
using JQuery Ajax.
Ajax allows you to load
data in the background and updates on the webpage without refreshing the page.
Ajax used to create fast
and dynamic web pages.
The user can continue to
interact with the web page while the page requests information from the server
with Ajax in the background.
Syntax
for Ajax Call:
$.ajax({
type: "POST",
url: "AjaxCall.aspx/CallServerSideMethod",
data: "{'args': '" + arguments + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
},
error: function() {
}
});
Type - Type of the
request. Default is GET. Possible types are GET, POST, and PUT.
Url - Redirecting the
page to which the request is sent
Data - Passing
parameters for the methods. It should be key/value pairs.
DataType - Type of data
which is returned from the server. Possible data types are xml, json, script,
text and html.
Success - This function
will call if the request succeeds.
Error - This function
will call if the request fails.
AJAX
– Example Program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Sample Ajax Call</title>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script
type="text/javascript">
$(document).ready(function () {
$('#btnAjaxCall').click(function () {
var
arguments = "www.jqueryjohn.com";
$.ajax({
type: "POST",
url: "Ajaxcall.aspx/CallServerSideMethod",
data: "{'args': '" + arguments + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
alert(response.d);
return false;
},
error: function () {
alert("error");
}
});
return
false;
});
});
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<asp:Label ID="lbltext" runat="server" Text="Click the button to make Ajax Call"></asp:Label>
<asp:Button ID="btnAjaxCall" runat="server" Text="Make Ajax Call" />
<br />
</div>
</form>
</body>
</html>
Code Behind:
Two things are very important while
we creating ajax call
1. Method should be declared as WebMethod
2. Method should be static
[System.Web.Services.WebMethod]
public static
string CallServerSideMethod(string args)
{
return "Welcome to " + args + " ";
}
Calling server side method with AJAX, Invoke Server
Methods From Client Side Using jQuery AJAX in ASP.NET, How to make Ajax Call
using Jquery, Simple Ajax Call using Jquery, Calling server side method from
client side using Jquery, Syntax for Ajax Call in Jquery.
Useful Article...
ReplyDeletesuper...useful website.....
ReplyDeleteExcellent article john.
ReplyDelete