Introduction
In this Article we will see how to call a server side method(a method in our aspx file) and a Web Service method using Ajax and JQuery in ASP.Net.
Using the code
1. Calling A Server Side Method Using Ajax and JavaScript
First let us see how to call a Server side method inside an aspx file using Ajax and JavaScript.
Create a new asp.net project. In the project add a page called 'One.aspx'. Include 'jquery-1.7.1.min.js' in the page as shown below
<script src="<%: ResolveUrl("~/Scripts/jquery-1.7.1.min.js") %>"></script>
Now Add a Button called 'btnOne' to Our page
<asp:Button ID="btnOne" runat="server" Text="Get Data From Page" OnClientClick="GetDataPage(); return false;" />
On button click we are calling a JavaScript method calle 'GetDataPage'.
<script type="text/javascript">
function GetDataPage() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
cache: false,
url: "One.aspx/GetData",
data: "{}",
dataType: "json",
success: function (data) {
alert(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus + "," + errorThrown.toString());
}
});
}
</script>
From this JavaScript Method we are calling a method called 'GetData'. Now we need to add this method to our 'One.aspx.cs' file.
Note : This method should be a web method. For that we need to include System.Web.Services. Also note that this method should be static method.
[WebMethod]
public static string GetData()
{
return "Welcome";
}
Now Run the application and click on 'Get Data From Page' button. We will get an alert message 'Welcome'
2. Calling A Web Service Method Using Ajax and JavaScript
Now let us see how to call a Web Service method using Ajax and JavaScript.
Add a new Web Service file called 'ServiceOne.asmx' to our project. Now add a method 'GetData' to our asmx file.
Note : This method is not a static method.
[WebMethod]
public string GetData()
{
return "Welcome";
}
Now Add a Button called 'btnTwo' to Our page
<asp:Button ID="btnTwo" runat="server" Text="Get Data From Service" OnClientClick="GetDataService(); return false;" />
On button click we are calling a JavaScript method calle 'GetDataService'. This method will call GetaData method of 'ServiceOne.asmx' file
<script type="text/javascript">
function GetDataService() {
$.ajax({
type: "POST",
cache: false,
url: "ServiceOne.asmx/GetData",
data: "{}",
dataType: "text",
success: function (data) {
alert(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus + "," + errorThrown.toString());
}
});
}
</script>
Now Run the application and click on 'Get Data From Service' button. We will get an alert message
'<?xml version="1.0" encoding="utf-8"?><string xmlns="http://tempuri.org/">Welcome</string>'
Points of Interest
When we are calling a method inside an aspx file we are specifying contentType and specifying datatype as Json
contentType: "application/json; charset=utf-8",
dataType: "json",
When we are calling a WebService Method we are not specifying contentType and specifying datatype as Text. Webservice method is returing data in XML format.
dataType: "text",