In this article I will explain with example, how to call (consume) Web Service (ASMX) using jQuery AJAX in ASP.Net using C# and VB.Net.
The Web Method of Web Service (ASMX) will be called using jQuery AJAX Post Method.
Adding Web Service
You will need to add a new Web Service (ASMX) file using Add New Item Dialog of Visual Studio as shown below.
![Call (Consume) Web Service (ASMX) using jQuery AJAX in ASP.Net]()
Configuring Web Service to handle jQuery AJAX calls
By default the Web Service will not accept requests from client side sent using jQuery AJAX. In order to allow a Web Service handle jQuery AJAX calls, the ScriptService attribute needs to be specified to the Web Service class.
The following Web Service consists of a Web Method GetDetails, which accepts Name and Age parameters and returns the Name and Age values along with Current DateTime as string.
C#
///<summary>
/// Summary description for ServiceCS
///</summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// 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 Service : System.Web.Services.WebService
{
public Service()
{
//Uncomment the following line if using designed components
//InitializeComponent();
}
[WebMethod]
public string GetDetails(string name, int age)
{
return string.Format("Name: {0}{2}Age: {1}{2}TimeStamp: {3}", name, age, Environment.NewLine, DateTime.Now.ToString());
}
}
VB.Net
' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class Service
Inherits System.Web.Services.WebService
<WebMethod()> _
Public Function GetDetails(name As String, age As Integer) As String
Return String.Format("Name: {0}{2}Age: {1}{2}TimeStamp: {3}", name, age, Environment.NewLine, DateTime.Now.ToString())
End Function
End Class
Calling (Consuming) Web Service (ASMX) using jQuery AJAX in ASP.Net
The following HTML Markup consists of two ASP.Net TextBoxes and an ASP.Net Button assigned with a jQuery click event handler.
When the Button is clicked, a jQuery AJAX call to the Web Service is made and the Name and Age values are fetched from the TextBoxes and are passed as parameters to the Web Method GetDetails.
The value returned from the Web Service’s Web Method is fetched inside the Success event handler of the jQuery AJAX function and displayed using JavaScript Alert Message Box.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
Name:
</td>
<td>
<asp:TextBox ID="txtName" runat="server" Text="" />
</td>
</tr>
<tr>
<td>
Age:
</td>
<td>
<asp:TextBox ID="txtAge" runat="server" Text="" />
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnSubmit" Text="Submit" runat="server" />
</td>
</tr>
</table>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=btnSubmit]").click(function () {
var name = $.trim($("[id*=txtName]").val());
var age = $.trim($("[id*=txtAge]").val());
$.ajax({
type: "POST",
url: "Service.asmx/GetDetails",
data: "{ name: '" + name + "', age: " + age + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.responseText);
},
failure: function (r) {
alert(r.responseText);
}
});
return false;
});
});
</script>
Screenshot
![Call (Consume) Web Service (ASMX) using jQuery AJAX in ASP.Net]()
Demo
Downloads
