0

How to call Asp.net WebServce using JQuery Ajax

In this article I am going to share how to call Asp.net WebService method using Jquery Ajax.

Step 1:- Create Empty Asp.net WebApplicatio.

 

Step 2:- Write click on the Project to Add service to your application(Add>New Item) and click on New Item option as shown in the below picture.

Step 3:- Select Web Service item (ASMX) and give the name as you want to give .I have left default name and clicked on add option as shown in the below picture .In my case name of service is WebService1.asmx.

 

Step 4:-Once you have added the service then you will get the following code as shown in the below code.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Services;

 

namespace WebServiceTut

{

/// <summary>

/// Summary description for WebService1

/// </summary>

[WebService(Namespace = “http://tempuri.org/”)]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.ComponentModel.ToolboxItem(false)]

// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.

// [System.Web.Script.Services.ScriptService]

public class WebService1 : System.Web.Services.WebService

{

 

[WebMethod]

public string HelloWorld()

{

return “Hello World” ;

}

}

}

 

 

 

 

 

Step 5:- Let us focus on the comment . The given comment is “To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line”. It means you will have to uncomment the below (// [System.Web.Script.Services.ScriptService]) code to be called from jQuery Ajax.

Step 6:- I have changes “HelloWorld” function parameter , I have passed one parameter named as myUserName and data type is string as you can see in the below code,and function is returning “HelloWorld” plus input parameter.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Services;

 

namespace WebServiceTut

{

/// <summary>

/// Summary description for WebService1

/// </summary>

[WebService(Namespace = “http://tempuri.org/”)]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.ComponentModel.ToolboxItem(false)]

// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.

[System.Web.Script.Services.ScriptService]

public class WebService1 : System.Web.Services.WebService

{

 

[WebMethod]

public string HelloWorld(string myUserName)

{

return “Hello World” + myUserName;

}

}

}

 

 

Step 7:- Now it is time to write jQuery Ajax code to call “HelloWorld ” Service  Method.

In order to write the code you will have to add one webpage where you can write JQuery Ajax code.I have added one webpage to my application as you can see in the below image .

 

Step 8:-Now add JQuery script to the .aspx page(Script is given below) as you can see in the given figure.

<script src=”https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js”></script>

 

Step 9:- write the following code inside the head section of .aspx page  to call HelloWorld Method of WebService.

<script type=”text/javascript”>

$(document).ready(function () {

$.ajax({

type: “POST”, url: “WebService1.asmx/HelloWorld”, data: “{‘myUserName’:’MyUserNameIsRaj’}”, contentType: “application/json”, datatype: “json”, success: function (responseFromServer) {

alert(responseFromServer.d)

}

});

 

});

 

</script>

 

Step 10:- Now see the final Output .

 

Remarks:- you can download this working application from the below link.

https://github.com/shreeshraj/GainCall/blob/master/WebServiceTut.zip

Admin

Leave a Reply

Your email address will not be published. Required fields are marked *