Exercise 1: Exploring an ASP.NET Web Forms Application

Estimated Time: 45 minutes

In this exercise you'll open an existing Visual Studio 2010 solution and walk through code found in a WCF and ASP.NET project. The main goal of the exercise is to get acquainted with an existing ASP.NET application and supporting code to better understand what code can be re-used during the migration to Silverlight. Throughout the exercise you'll view data access code that relies on Entity Framework 4, examine a WCF service contract and run the ASP.NET project to explore the functionality it offers. To get started, follow the steps below.

1. Open Visual Studio 2010 and then select File Open Project/Solution from the menu.
2. Open the following Visual Studio solution file:

   Language	Lab Files Location
   C#	/MigratingToSilverlight/Starting Point/C#/CustomerViewer/CustomerViewer.sln
   Visual Basic	/MigratingToSilverlight/Starting Point/VB/CustomerViewer/CustomerViewer.sln

3. The following projects are available in the solution:

   • CustomerService.Model – Contains entities and data repository classes used to access an AdventureWorks LT database.
   • CustomersService – A WCF service application that exposes entities to various applications.
   • CustomerViewer – A Windows Forms project that consumes data from a WCF service.
   • CustomerViewer.Web – An ASP.NET Web Forms project that uses jQuery to make RESTful calls to a WCF service.
   Figure 2

   Solution Explorer

4. Right-click on CustomerService.svc in the CustomersService project and select View in Browser from the menu. This will start a local WCF server and show a test page.
5. Back in Visual Studio, right-click on the CustomerViewer.Web project and select Set as StartUp Project from the menu.
6. Run the application by pressing F5. The first time the application runs there will be short delay before data is loaded.
7. Once data loads, notice that customers appear in the DropDownList control. Once a customer is selected the details are shown in the form allowing customer data to be updated or deleted using AJAX techniques.
8. Close the application and locate the CustomerService.Model project. Double-click the AdventureWorksLT.edmx file to see the Entity Framework 4 model that's exposed. The entity model contains a Customer object that is used by the ASP.NET application.
9. Open CustomerRepository file in the Repository folder and take a moment to look through the code that interacts with the entity model (you might also want to look at the base class named RepositoryBase). This class is responsible for all communication with Entity Framework and acts as a re-useable repository layer in the application.
10. Locate the CustomerService project and view ICustomerService in the editor to see the operations it exposes. The operations are used to load Customer objects and handle update and delete operations. Some of the operations support RESTful calls. The ASP.NET project currently uses a WCF service proxy object as well as jQuery to communicate with the different service operations. Service calls are forwarded from the service to the CustomerRepository class examined earlier.
    Note:

    Note: WCF services work well in environments where data must be exposed to different types of clients without requiring a specific technology or framework. The application shown in this lab uses WCF services to promote data re-use, allow different types of clients to consume data including ASP.NET and jQuery, and provide a standards-compliant way to access data.
11. Locate the CustomerViewer.Web project, right-click on Default.aspx and select View Code from the menu. Take a moment to explore the code and note the following:
    • A WCF service proxy is used to call a service that supplies customer data
    • If an error occurs loading customer data, a script is sent to the client and used to display an alert
12. Open Default.aspx and note the following features:
    • A stylesheet named Default.css is used to add CSS styles into the page
    • A script named Default.js is loaded by the page
    • div tags are used to arrange HTML controls in the page
13. Open Scripts/Default.js and take a moment to look through the jQuery code (note that the jQuery script is defined in Site.master). You'll see the following features:
    • jQuery selectors are used to locate controls in the DOM and access their values
    • jQueryAJAX functions such as getJSON are used to communicate with a cross-domain WCF service (JSONP is used in this application since the cross-domain service is trusted)