Site Search

CS 352: Lab 3 - Ajax & Web Services

Student Learning Objectives

After completing Lab Assignment 3, students should be able to

Lab 3 Pair Programming Teams

Team 1Team 2Team 3Team 4Team 5
LiamBrockSamwiseTomPaul
GaryKevinBenGeneTrevor

You may wish to review the basic pair programming guidelines before you begin.

You should change roles with each iteration

Iteration 1

  1. Create a Lab3 ASP.NET Web Site
  2. Add a new Web Service item named CarService.asmx
    • You Web Service will provide information about the cars available in the XML file Cars.xml through Ajax asynchronous calls
    • Rather than returning XML nodes, your Web Methods will return names as lists of strings
    • The starter code for your CarService class is available to copy and paste into your CarService.asmx file
  3. Add the code to implement the Web Methods GetMakes() and GetModels(string)

Functional Tests

Test and debug your service.asmx service by running it with the VS debugger. Add breakpoints in your Web Methods to help with debugging.

Test 1: test your GetColors Web method with make = "Audi" and model = "S4". Expected return value is

<?xml version="1.0" encoding="utf-8"?>
<ArrayOfString xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http: ... ">
  <string>Silver</string>
  <string>Metallic</string>
</ArrayOfString>

Test 2: test your GetModels Web method with make = "BMW". Expected return value is

<?xml version="1.0" encoding="utf-8"?>
<ArrayOfString xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http: ... ">
  <string>3 series</string>
  <string>5 series</string>
  <string>7 series</string>
</ArrayOfString>

Test 3: test your GetMakes Web method. Expected return value is

<?xml version="1.0" encoding="utf-8" ?> 
- <ArrayOfString xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http: ... ">
  <string>Acura</string> 
  <string>Audi</string> 
  <string>BMW</string> 
  </ArrayOfString>

Iteration 2

Before beginning these Iteration 2, switch roles between driver and navigator.

  1. Add the HTML controls to Default.aspx to duplicate the screen snapshots provided below
    • Use only HTML controls (fieldset, legend, p, label, textbox, select, option, and input)
  2. Add an asp:ScriptManager to reference your Web service
  3. Add an onButtonClick JavaScript function to fill the car's color select options list with the available colors based on make and model

lab3a snapshot lab3b snapshot

Functional Tests

Test and debug your Web Page

Iteration 3

Before beginning Iteration 3, switch roles between driver and navigator.

lab3c snapshot lab3d snapshot

Iteration 4

Before beginning Iteration 4, switch roles between driver and navigator.

  1. Add JavaScript event handlers to handle the car's Model select element's onchange so that when the user changes the car's model, the correct colors appear
  2. Test this in the browser and get it working
  3. Add JavaScript event handlers to handle to handle the car's Make select element's so that when the user changes the car's make, the correct models and colors appear
  4. Test this in the browser and get it working

To Receive Credit

Lab 3 is due by the start of class on Monday