How to call asp.net page methods from JSON
Here I will explain how to use JQuery and JSON to call asp.net page methods.
If we want to call our page methods with JQuery then we need to use JQuery.ajax method and our JQuery declaration will be like this
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "default.aspx/test",
data: "{}",
dataType: "json",
success: function(data) {
//Write functionality to display data
},
error: function(result) {
alert("Error");
}
});
This is the function declaration of JSON format we are using this JSON function to call web methods using JQuery $.ajax() whenever we need to make Ajax call with JQuery then we will use JSON functions like as we mentioned in above format. Here type, ContentType and dataType are same for all functions only url, data and success and error parameters will vary based on our requirement.
url: This is the path of our Webmethods
data: we will pass parameters using this parameter if no parameters then we need to use data: "{}"
success: Once our web method execution completed then success function will execute and return required data
error: This parameter is used to display required error message whenever we get problem.
(Note: JSON is a case sensitive please be careful before write JSON format of data)
Now create new website and write the following code in your aspx page
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>JQuery Call asp.net page methods</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "default.aspx/DisplayData",
data: "{}",
dataType: "json",
success: function(data) {
$("#lbltxt").text(data.d);
},
error: function(result) {
alert("Error");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<label id="lbltxt" runat="server"></label>
</form>
</body>
</html>
If you observe above code in header section I added script file link by using that file we have a chance to interact with JQuery.
Now open code behind file and add the following namespaces
using System;
using System.Web.Services;
After that write the following code
C#.NET Code
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string DisplayData()
{
return DateTime.Now.ToString("dd/MM/yyyy");
}
Here I will explain how to use JQuery and JSON to call asp.net page methods.
If we want to call our page methods with JQuery then we need to use JQuery.ajax method and our JQuery declaration will be like this
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "default.aspx/test",
data: "{}",
dataType: "json",
success: function(data) {
//Write functionality to display data
},
error: function(result) {
alert("Error");
}
});
This is the function declaration of JSON format we are using this JSON function to call web methods using JQuery $.ajax() whenever we need to make Ajax call with JQuery then we will use JSON functions like as we mentioned in above format. Here type, ContentType and dataType are same for all functions only url, data and success and error parameters will vary based on our requirement.
url: This is the path of our Webmethods
data: we will pass parameters using this parameter if no parameters then we need to use data: "{}"
success: Once our web method execution completed then success function will execute and return required data
error: This parameter is used to display required error message whenever we get problem.
(Note: JSON is a case sensitive please be careful before write JSON format of data)
Now create new website and write the following code in your aspx page
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>JQuery Call asp.net page methods</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "default.aspx/DisplayData",
data: "{}",
dataType: "json",
success: function(data) {
$("#lbltxt").text(data.d);
},
error: function(result) {
alert("Error");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<label id="lbltxt" runat="server"></label>
</form>
</body>
</html>
If you observe above code in header section I added script file link by using that file we have a chance to interact with JQuery.
Now open code behind file and add the following namespaces
using System;
using System.Web.Services;
After that write the following code
C#.NET Code
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string DisplayData()
{
return DateTime.Now.ToString("dd/MM/yyyy");
}
