Introduction to Web Development; Silverlight and SQL

In the fourth in a series of five articles exploring Microsoft Web technologies we'll look at implementing a Silverlight front end for our SQL database/WCF Web Service.

Prerequisites

For this tutorial you will need Visual Studio 2008 Standard or above and the Silverlight 2 Beta 1 Tools for Visual Studio 2008. Both items are available for free for students (see links).

Getting started

Last month we looked at building a simple ASP.NET Web App that connected to a SQL database to add and retrieve data. This month we will build on that example and create a Silverlight frontend for the database. Because Silverlight is a client side technology and we want to retrieve data from the server side we need to implement a Web Service that will retrieve the data on the server side and then provide that data to our Silverlight application.

The Web Service

We will start by building a WCF web service that will retrieve data from our database (using the principles demonstrated last month) and allow us to access this data in our Silverlight application.

1. Open Visual Studio and select 'File'>'New'>'Project...'>'Web'>'WCF Service Application'
2. Firstly we need to reset the default binding in the Web.config file to Basic HttpBinging:
   • Open the Web.config file
   • Find <System.serviceModel> <service> <endpoint>
   • Set the 'binding' property to 'basicHttpBinding'
3. Now lets implement our database and dataset - follow the instructions in last months article.

   • If you get stuck take a look at the below code which implements retrieval of data using our dataset and returns an int specifying the number of rows in our table:

      public int CountUsers()
     

              {
     

                  DataSet1TableAdapters.addressesTableAdapter addressAdapter = new CustomerService.DataSet1TableAdapters.addressesTableAdapter();
     

                  DataSet1.addressesDataTable addresses = addressAdapter.GetData();
     

                  ArrayList addressList = new ArrayList();
     

                  foreach (DataSet1.addressesRow addressRow in addresses)
     

                  {
     

                      addressList.Add(addressRow.Name + " - " + addressRow.Phone);
     

                  }
     

                  int rows = addressList.Count;
     

                  return rows;
     

              }
     

That's our service implemented!

The Silverlight Frontend

Once you have your WCF Web Service up and running you can move onto implementing your Silverlight frontend. I will now show you how to consume data from your service using Silverlight.

1. First we need to add a Silverlight Project to our solution:

   • Right click the solution in the Solution Explorer and select 'Add'>'New Project...'>'Silverlight'>'Silverlight Application'
   • In the following dialog box leave the default settings intact and click OK.

2. Now you should see your page.xaml file in design/code view

3. Add '<TextBox Height="50" Width="200" x:Name="userCountResult"/>' within the '<Grid>' tags to create a TextBox we can manipulate in code.

4. Now we need to create a reference to the service we created in the previous section:

   • In the Solution Explorer right click the references folder under the Silverlight project and select 'Add service reference...'>'Discover'
   • You should now see the Web service you created so just click OK to create the reference.

5. Next we're going to write the code to connect to the Web service, download the data and when the data is fully downloaded fire an event that will update out TextBox:

   • You need to insert the below code into your Page() class (NB: you may have to change some of the reference names depending on the naming conventions you have used)

    public Page()
   

            {
   

                InitializeComponent();
   

                Binding binding = new BasicHttpBinding();
   

                EndpointAddress address = new EndpointAddress("https://localhost:54580/service1.svc");
   

                ServiceReference.Service1Client proxy = new ServiceReference.Service1Client(binding, address);  
   

                proxy.CountUsersCompleted += new EventHandler<CustomerClient.ServiceReference.CountUsersCompletedEventArgs>(proxy_CountUsersCompleted);
   

                proxy.CountUsersAsync();
   

            }
   

   • This code will connect with the service running on the same domain, set up a proxy, initiate data retrieval and create an event that will be fired when data retrieval is complete.
   • So now we need to handle the event:

    void proxy_CountUsersCompleted(object sender, CustomerClient.ServiceReference.CountUsersCompletedEventArgs e)
   

            {
   

                userCountResult.Text = "Number of users: " + e.Result;
   

            }
   

Hit F5 and it should all work. If you find it throws an unhandled exception related to http error codes the chances are that the dev server provided by VS2008 is not using port 54580 as in the above example. The port used is dynamic and you just need to check in your IE address bar and update the code accordingly. If you come up against any other problems take a look at the zip file below - it contains my working sln file which you can download and play with.

Also why not check out these excellent tutorials on MSDN:

• How to: Build a Service for Silverlight Clients
• How to: Access a Service from Silverlight using Visual Studio

Next Month

Next month will be the final article in this series and will investigate implementing our Web Service as a Block in Popfly to allow us to rapidly build Web Apps and share our data in new ways.

Technorati Tags: Silverlight,SQL,Visual Studio 2008,Popfly,Web Service,Web Application,ASP.NET

CustomerService.zip