December 2017 : Online courses in ASP.NET MVC and Angular 4. Conducted by Bipin Joshi. Read more...
Registration for December 2017 batches of ASP.NET MVC / Core and Angular 4 online courses have already started. Conducted by Bipin Joshi. Book your seat today ! Click here for more details.

Using AJAX with ASP

Using AJAX with ASP.NET - Calling ASP.NET Web Service (Part 4)

Introduction

In Part 2 we discussed how to work with DataSet returned by the web form. The disadvantage of using web forms as data suppliers is that one web form typically returns only one DataSet. You need to put all the code in the Page_Load. It would be much more organized and useful if you can call Web Service using AJAX. You can then neatly organize your code in various web methods and call the required one from the JavaScript code. In this article I will illustrate how web services can be called from client side JavaScript using HTTP POST method.

Simple Example

As an example we will first build a web service called Service1.asmx and add the following web method to it:

<WebMethod()> _
Public Function GetOrders(ByVal custid As String) As DataSet
Dim ds As New DataSet
Dim da As New SqlDataAdapter
("select orderid from orders where customerid='" 
& custid & "'", "data source=.\vsdotnet;
initial catalog=northwind;user id=sa")
da.Fill(ds, "custoemrs")
Return ds
End Function

This web method accepts the Customer ID and returns a DataSet containing the relevant OrderIDs.

We are going to use the same web form that we created in Part 2. The web form has a DropDownList and a ListBox. The DropDownList displays list of all the Customers from Customers table. When user selects a specific CustomerID we call the web method through AJAX and populate the ListBox with the DataSet returned.

Below is the client side JavaScript code that you need to place in the <head> section of the web form:

var obj;
function GetDataViaAJAX()
{
try
{
obj = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
obj = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e1)
{
obj = null;
}
}
if(obj!=null)
{
obj.onreadystatechange = ProcessResponse;
obj.open("POST", "http://localhost/Service1.asmx/GetOrders");
obj.setRequestHeader("Host","localhost");
obj.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
obj.setRequestHeader("Content-Length","12");
obj.send("custid=" + 
document.getElementById("DropDownList1").value);
}
return false;
}
function ProcessResponse()
{
if(obj.readyState == 4)
{
if(obj.status == 200)
{
var dsRoot=obj.responseXML.documentElement;  
var ddlOrders = document.getElementById("ListBox1");
for (var count = ddlOrders.options.length-1; count >-1; count--)
{
ddlOrders.options[count] = null;
}
var orders = dsRoot.getElementsByTagName('orderid');
var text; 
var listItem;
for (var count = 0; count < orders.length; count++)
{
text = (orders[count].textContent || 
orders[count].innerText || orders[count].text);
listItem = new Option(text, text,  false, false);
ddlOrders.options[ddlOrders.length] = listItem;
}
}
else
{
alert("Error retrieving data!" + obj.status);
}
}
}
function SetValue()
{
var selectedvalue=document.getElementById("ListBox1").value;
document.getElementById("Hidden1").value=selectedvalue;
return true;
}

The above code is almost the same as in Part 2 except the one marked in bold. Here, we will be sending a POST request to the web service. You also need to send HTTP headers using setRequestHeaders() method. We are hardcoding the content length header but you may calculate it depending on your actual content. This step is necessary while calling a web service via POST method. Note the URL of the web service. The web method that you want to call is included after the web service file name. This is how you call a web method via POST method. When you call a web service using POST method the web method parameters need to be sent as request body. Hence we created key-value pair - custid=<selected_cust_id>.

Code Download

The complete source code of above sample is available for download along with the article. Please see top of the article for download link.

Summary

Using AJAX one can call any web resource including web forms and web services. Using web forms, though simple, makes your code bit unorganized and you may end having many web forms supplying data to various AJAX functions. Web service on the other hand is a nice way to keep all your data supplier functions together. It also makes maintaining the application easy.


Bipin Joshi is a software consultant, an author and a yoga mentor having 22+ years of experience in software development. He also conducts online courses in ASP.NET MVC / Core and Design Patterns. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced the Yoga way of life he also teaches Meditation and Mindfulness to interested individuals. To know more about him click here.

Get connected : Twitter  Facebook  Google+  LinkedIn

Posted On : 23 October 2005


Tags : ASP.NET AJAX