In this article I will explain with an example, how to call (consume) Web Service (ASMX) using ScriptManager in ASP.Net using C# and VB.Net.
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.
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
Call (Consume) Web Service (ASMX) using ScriptManager in ASP.Net
The following HTML Markup consists of two ASP.Net TextBoxes and an ASP.Net Button assigned with a JavaScript click event handler.
When the Button is clicked, an 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 function and displayed using JavaScript Alert Message Box.
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/Service.asmx" />
</Services>
</asp:ScriptManager>
<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" OnClientClick="return Submit();" />
</td>
</tr>
</table>
<script type="text/javascript">
function Submit() {
var name = $get("<%=txtName.ClientID %>").value;
var age = parseInt($get("<%=txtAge.ClientID %>").value);
Service.GetDetails(name, age, OnSuccess, OnError);
return false;
};
function OnSuccess(response) {
alert(response);
};
function OnError(r) {
alert(response);
};
</script>
Screenshot
Browser Compatibility
The above code has been tested in the following browsers.
* All browser logos displayed above are property of their respective owners.
Demo
Downloads