In
this article I will explain how to use JQuery and JSON to call asp.net page
methods.
Description:
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: "{}",
//Write
dataType to Json
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>
//drag
and drop your Jquery script file here
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/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();
}
This is the bug free code.
ReplyDelete