How to call asp.net page methods from JSON or JQuery

Introduction:

In this article I will explain how to use JQuery and JSON to call asp.net page methods.

Description:
  
Now I am using Json concept to create web methods and call those methods in our page using JQuery.
Generally we will create static web methods in webservice and we will use those methods to call it from JQuery instead of that directly we can create static methods with [WebMethod] attribute in our code behind file and use those methods from JQuery.
 
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: “yourpage.aspx/yourmethod”,
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
 
<head id=”Head1″ runat=”server”>
<title>JQuery Call asp.net page methods</title>
<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();
}
VB.NET Code:
  
 
Imports System.Web.Services
Partial Class Default2
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
End Sub
<WebMethod()> _
Public Shared Function DisplayData() As String
Return DateTime.Now.ToString()
End Function
End Class
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: