Calling Server Side Method and Web Service method using JavaScript and Ajax

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",