Home > 2010 Fall DPS907 > DPS907 WSA500 Lab 3 (due Mon Nov 8)

DPS907 WSA500 Lab 3 (due Mon Nov 8)

October 20, 2010 Leave a comment Go to comments

Lab 3 enables you to get experience with Ajax (using JavaScript and jQuery) and JSON, while using a WCF Data Service. It is due on Monday, November 8.


DPS907 WSA500 Lab 3 – due Mon Nov 8

Assigned: During Week 7

Due date: Monday, November 8, at 9:50am ET

Grade value: 4% of your final course grade

Grading method: The following will be checked:

  • Your web page that hosts the Ajax logic, and all the supporting code modules
  • Correct interactive operation of the page’s logic
  • Implementation of the specifications
  • Code writing quality, including commenting



Create (or re-use) a WCF Data Services project

Create a JavaScript Ajax client (hosted on a web page) that consumes the endpoint above, and uses JSON packaging


Introduction to the problem that you will solve

A WCF Data Service is needed that will expose data in a RESTful manner, using JSON. The data will come from your copy of the Northwind database.

You will create two web pages that will consume this service.



Note: You can re-use the following components from your Lab 2:

  • Your copy of the Northwind database
  • The Entity Framework data model
  • Your WCF Data Service

Enable your Employees and Shippers entities to support all HTTP methods (GET, POST, PUT, and DELETE).

Then, you will create two web pages that will consume your existing WCF Data Service (from Lab 2).

  1. One page (lab3plain.htm) will look similar to your “lab2.aspx” page, but all the program code will be JavaScript (and jQuery)
  2. The other (lab3formatted.htm) page will enable the user to choose from a number of resources (from your web service), and display the results in a nicely-formatted way

On these pages, you will create markup and JavaScript, which will consume your WCF Data Service.



As noted above, this page will look similar to your “lab2.aspx” page.

In your existing project that holds your Lab 2 work, add a new item, an “HTML Page”, and name it “lab3plain.htm“.

Include (or link to) the latest jQuery library, and write the JavaScript that implements the functionality of Lab 2.

Check your browser’s developer documentation, to learn about these functions, which convert objects to-and-from strings:

  • JSON.parse
  • JSON.stringify



As noted above, this page will show web service results in a nicely-formatted manner.

In your existing project that holds your Lab 2 work, add a new item, an “HTML Page”, and name it “lab3formatted.htm“.

Create the UI that will enable the user to to choose from at least two (2) resources (from your web service). The UI can be a drop-down list, a radio-button list, or similar single-selection element. You should provide at least two (2) choices: One collection choice (e.g. Customers, or Products), and one single-object choice (e.g. a Supplier, or an Employee).

Then, create the UI (probably a button) that will create a suitable jQuery Ajax request to your web service. The results will be returned as JSON.

For the collection, you will dynamically create a table in JavaScript. There are a number of ways that you could do this; here are a few suggestions:

  • Follow the pattern shown in the example that was distributed on paper in class on October 13
  • Use this Mozilla developer document (titled “Traversing an HTML table…“) to guide you
  • Learn how to do this with jQuery

The table should be placed inside a div element that has been styled to a height of 300px, with an auto overflow. That way we get a scroll bar. It would be a nice idea if you also styled the page and table so that it looked better than the browser’s default.

For the single object, you will dynamically create the standard built-in HTML elements (like p, div, td, li, and so on) of your choosing. For example, you may wish to display a single employee in a two-column table, with one column for the property name, and the other for its value. Alternatively, it may be appropriate to display the data in paragraphs (p), or an unordered list (ul, li).

You should consider displaying only the currently-selected (and fetched) data/result, and hiding the others.


General guidance

Make sure that you review the October 13 posts on JSON and jQuery.

Additionally, your professor plans to create a new and detailed blog post, tentatively titled:

Consume a WCF Data Service using JSON

The details in that post will help you with this Lab 3. It will provide a comprehensive walkthrough for all the coding requirements.


Reminder about academic honesty

You must comply with the College’s academic honesty policy. Although you may interact and collaborate with others, submit your own work.


Submitting your work

Zip and email the finished project folder to me. Make sure it includes your existing Lab 2 WCF Data Service and lab2.aspx page.



Script to copy the Northwind tables – copy the query text (from the following Word 2007 document) into a new query window in SQL Server Management Studio, and then run it:

Copy Northwind Tables


Categories: 2010 Fall DPS907
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: