Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

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

0.00/5 (No votes)
22 Aug 2014 1  
Calling Server Side Method inside an aspx file and Web Service(asmx) 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",

   

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here