Normally the browser Ajax controls calls the ASP.NET code and the ASP.NET code consumes the web service, but there are scenarios where you would like to call the web services directly from the Ajax JavaScript functions rather than calling via the behind code.
Here, you can get the same following 4 steps-
Step 1: Create your Customer Class
The first step is to create the customer class as shown below. So the customer class has 4 properties on customer id, first name, address and designation.
public class Customers
{
// private properties
private int _intCustomerID;
private string _strFirstName;
private string _strAddress;
private string _strDesignation;
// Public property and
public int CustomerID
{
get
{
return _intCustomerID;
}
set
{
_intCustomerID = value;
}
}
public string FirstName
{
get
{
return _strFirstName;
}
set
{
_strFirstName = value;
}
}
Step 2: Create your Web Service
The next step is to create the web service which exposes the customer class to UI. Here is a simple web service which has encapsulated customer collection. In the constructor, we are loading some dummy data into the list of customers as shown in the below code snippet:
[System.Web.Script.Services.ScriptService]
public class Customer : System.Web.Services.WebService {
// Customer collection
List<Customers> listcust = new List<Customers>();
public Customer ()
{
//Load some dummy data in to customer collection.
listcust.Clear();
Customers cust = new Customers();
cust.CustomerID = 1;
cust.FirstName = “Dan”;
cust.Address = “Live in UK”;
cust.Designation = “Software Developer”;
listcust.Add(cust);
cust = new Customers();
cust.CustomerID = 2;
cust.FirstName = “Sheen”;
cust.Address = “Live in Austrailia”;
cust.Designation = “Web Designer”;
listcust.Add(cust);
cust = new Customers();
cust.CustomerID = 3;
cust.FirstName = “Koraine”;
cust.Address = “Live in London”;
cust.Designation = “Architect”;
listcust.Add(cust);
}
// This function exposes all customers to the end client’
[WebMethod]
public List<Customers> LoadCustomers()
{
return listcust;
}
// This function helps us to get customer object based in ID
[WebMethod]
public Customers LoadSingleCustomers(int _customerid)
{
return (Customers)listcust[_customerid-1];
}
Two functions have been exposed with the web service, one which gives out a list of customers and another which gives out individual customer data based on customer id.
Step 3: Reference your Web Service using the asp:servicereference
Using the ‘asp:ServiceReference’, the path to the ASMX file will be pointed as shown in the below code snippet. This will generate the JavaScript proxy which can be used to call the customer object.
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="Customer.asmx" />
</Services>
</asp:ScriptManager>
Step 4: Call the Webservice and the JavaScript Code
Once you have defined the proxy, you can now call the ‘Customer’ proxy directly to make method calls.
function LoadAll()
{
Customer.LoadCustomers(LoadCustomerToSelectOption, ErrorHandler, TimeOutHandler);
}
When you call the JavaScript proxy object, then you need to provide three functions; the first function (‘LoadCustomerToSelectOption’) will be called when the web service finishes and returns data. The data will be returned in the fill variable which will then be looped and added to the customer combo box.
function LoadCustomerToSelectOption(Fill)
{
var select = document.getElementById(”cmbCustomers“);
for (var i = 0; i < Fill.length; i++)
{
var value = new Option(Fill[i].FirstName, Fill[i].CustomerID);
select.options.add(value);
}
}
There are two more functions which are attached; one which handles error and the other which handles time out.
function ErrorHandler(result)
{
var msg = result.get_exceptionType() + “\r\n“;
msg += result.get_message() + “\r\n“;
msg += result.get_stackTrace();
alert(msg);
}
function TimeOutHandler(result)
{
alert(”Timeout :” + result);
}
