Click here to download the source code for this lesson. 

In the previous lesson we explored how to create and ASP.NET C# web service that executes a database query and returns a list of data.  The data was returned as a string of XML.  In THIS lesson I am going to show you how to call a web service from an ASP.NET web application and display the return data in a GridView server control.  If you haven’t already done so, I recommend that you click here and read the previous lesson since this lesson basically builds on top of it and we will be calling the web service created in that lesson.

As it turns out, web services are very common these days for many reasons.  They provide a good way for different applications, languages and frameworks to interoperate with each other.  For example, a Java application can easily call a .NET application and a .NET application can easily call a Java application.  This is very powerful and it is implemented in many of the organizations that I have worked or consulted for, including government environments.

Before I get started with the lesson I want to do a quick recap of what the web service that we will be calling actually does.  In the previous lesson, I created a web service named CustomerData.  The CustomerData web service has a method named getCustomers().  The getCustomers method queries a database table named “customer” and then places the results of the query in an ADO.NET DataSet object.  I then take the data in DataSet object and transform it into an XML string that is returned to the caller of the web service method.  The DataSet object has a method named GetXml() that allows me to do this.  The XML is basically a list of customers that are in the database table.

Alright now lets talk about what has to happen on the client side.  On the client side, we are going to create an ASP.NET web application that will call the web service and display the customer data on a web form in a GridView.  In order to be able to call a web service from an ASP.NET web application, you have to Add a Web Reference to your web site project.  When you do this, Visual Web Developer creates some web service project files for you automatically.  These web service files are responsible for actually calling the web service and they are beneficial to you as the developer because they make it easy for you to integrate the web service into your ASP.NET application just like you are referencing any other class library or .NET class. 

You don’t need to be concerned about what is in those project files, you just have to know how to use them and that is what I’m going to cover in this lesson.  *Even though we are going to call a .NET web service in this lesson, the process to call a Java web service is pretty much identical.  That is why web services are so powerful and ASP.NET abstracts out all of the details behind the scenes from you as the developer so that you can concentrate on your application business logic.

Now let me walk you through how I called the web service from my ASP.NET web application and you can follow along.  I created a new web site named Lab17_csharpuniversity_webserviceclient.  Then I deleted the Default.aspx web form from the project.  Next I added another existing web form that I had previously created to the web site.  That web form is named GridView_SQLServer.aspx and I decided to re-use it for this lesson.  It basically contains a GridView that looks like this:

<asp:GridView ID="gvCustomers" runat="server"

AutoGenerateColumns="False">
            <Columns>
                <asp:BoundField DataField="first_name"

HeaderText="First Name" />
                <asp:BoundField DataField="last_name"

HeaderText="Last Name" />
            </Columns>
</asp:GridView>

Notice that it has two BoundField columns that map to my database table “customer”, which has the customer’s first and last name.  The form GridView_SQLServer.aspx also has a Button that will fetch the data for the GridView when it is clicked.  I am going to place the code that calls the web service in the event handler for that Button.

Next, I right clicked on the project name in the Solution Explorer and chose “Add Web Reference”.  The Add Web Reference window appeared.  In this window you have to put the URL for the web service that you want to call.  So how do we find that URL?  Here is how.  I opened up my other web service project Lab17_csharpuniversity_webservice in a separate instance of Visual Web Developer.  So I had two Visual Web Developers running simultaneously.  Then I clicked the play button in my web service project and it brought up the Internet browser with the web service page CustomerData.asmx.  I then copied the entire full URL from the top of the browser.  The full URL to my web service is:
http://localhost:1775/Lab17_csharpuniversity_webservice/CustomerData.asmx

Then I left the web service running (it is important to leave it running) and I went back to my web application project and pasted the URL into the Add Web Reference window.  Next I clicked the Go button and waited for a few seconds.  Visual Web Developer will automatically go and read your web service’s description file.  It will display a list of the methods available and it lists them as operations.

Following that I changed the Web reference name to “CustomerWebService”.and clicked Add Reference.  At that point Visual Web Developer will add some files to your web site project.  Now let’s go and put some code to actually call the web service.  I created a click event handler method for the Button on my web form GridView_SQLServer.  If you are looking at the source code for this example, take a look at the method btnCustomers_Click:

 //Call the web service to get the customer data
        CustomerWebService.CustomerData customerdata =
            new CustomerWebService.CustomerData();
        string dataXML = customerdata.getCustomers();

        //Convert the XML data into a DataSet object
        StringReader datasetReader = new StringReader(dataXML);
        DataSet displayDS = new DataSet();
        displayDS.ReadXml(datasetReader);

        //I assign the results of the query to the GridView control
        gvCustomers.DataSource = displayDS;
        //DataBind causes the data to display on the web form
        gvCustomers.DataBind();

In order to call a web service in your code, all you have to do is type “CustomerWebService” and then a period “.” and the intellisense window will come up.  I then chose the name of my web service class which is “CustomerData”.  Instantiated an instance of the CustomerData class and stored a reference to it in the variable “customerdata”.  You see that this is identical to how you normally would instantiate a regular C# class.

On the next line is where I actually called the web service method getCustomers() and saved the result in a variable named “dataXML”.  Then I used a StringReader object in order to pass the XML data to a DataSet method named ReadXml.  ReadXml will take an XML string and basically translate the data into a DataSet object.  This is necessary so that we can easily bind the data to the GridView, which happens on the line “gvCustomers.DataSource = displayDS;”.  Let me summarize the steps involved here so you can recap in your mind.

1. I added a web reference to my web service.
2. I instantiated an instance of the web service class CustomerData.
3. I added a web reference to my web service.
4. I passed the StringReader object to the DataSet ReadXml method.  The DataSet will then read the data and load it into its internal object structure.
5. I bound the DataSet object to the GridView gvCustomers just like I would normally do using the GridView DataSource property.

When I run the web application and click on the Show Customers button, it will make a call to my web service and display the results of the operation in a GridView list.  You can repeat this process with any other web services that you want to use in your ASP.NET web application.

*An important thing to note here is that I left my web service project running when I went to add my web reference and unit test my web application.  If you don’t do that, you will see an error message that looks like “Unable to connect to the remote server”.  This is because if you are developing with Visual Web Developer or Visual Studio, the web service isn’t really deployed anywhere yet.  If you deploy the web service into IIS either on the same machine or another machine, you would be able to reference that without running Visual Web Developer or Visual Studio, but when you are initially developing the web application client, you can do exactly as I did in this lesson.

*Another thing to pay attention to is that the port number that the web service will run on can change each time you close and open Visual Web Developer or Visual Studio.  In my example the port number was “localhost:1775″, but if I close Visual Web Developer and open it again later to run the web service, there is no guarantee that port 1775 will be used again.  In fact, when I recorded the video for this lesson you will see that a different port was used versus what I put in the text of this lesson.  If the port number for your web service changes, you can simply open the web.config file in the web site project and change it.  Look for a configuration in the appSettings part of the web.config that you can change.

Stay tuned for the next lesson where I will cover how you can update your web service client project files anytime the back-end web service changes.

Click here to watch a video where I show you how to perform all the steps involved with adding the reference to the web service and calling it in your web application source code.

So what do you intend to call web services for in your application?