In this article I will explain with an example, how to call (consume) Web Service (ASMX) in HTML Page using jQuery AJAX in ASP.Net using C# and VB.Net.
The Web Method of Web Service (ASMX) in HTML Page 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) in HTML Page using jQuery AJAX in ASP.Net]()
Namespaces
You will need to import the following namespace.
C#
using System.Web.Services;
VB.Net
Imports System.Web.Services
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 Service
///</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) in HTML Page using jQuery AJAX in ASP.Net
The following HTML Markup consists of two HTML INPUT TextBoxes and an HTML INPUT 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><input type="text" id="txtName" /></td>
</tr>
<tr>
<td>Age:</td>
<td><input type="text" id="txtAge" /></td>
</tr>
<tr>
<td><input type="button" id="btnSubmit" value = "Submit" /></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 () {
$("#btnSubmit").click(function () {
var name = $.trim($("#txtName").val());
var age = $.trim($("#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) in HTML Page using jQuery AJAX in ASP.Net]()
Demo
Downloads
