DPS907 notes – Fri Sep 6

First lab-room session. Hands-on coding of web services. Application architecture.


Hands-on with the developer and inspection tools

Your professor will guide you through today’s session. There will be some lecture-style topic coverage and discussion, and some hands-on coding.

Visual Studio

  • We will re-create the example from Tuesday


  • We will interact with your new web service

Can you interact with a web service in a different way? Your professor will show you how.


The MVC design pattern

Modern web apps and web services are often based on the MVC design pattern.

MVC – model – view – controller – enables the programmer to clearly separate code modules into different roles:

  • Model code describes the app’s data, also known as persistent state
  • View code presents the app’s data to the user or requestor
  • Controller code interacts with the user and therefore manages the app’s workflow

The important idea is that the controller is the most important role. User input is handled by the controller, which then works with the app’s data, and then prepares the view that’s returned to the user.

How does this map to a web service?

  • Model code is just that – the app’s data or persistent state
  • View code will accept or generate internet media types (JSON, XML, image, etc.)
  • Controller code handles HTTP requests, and implements the web service’s application logic

Read an overview of MVC in this Wikipedia article.


Inside a Web API project

An ASP.NET MVC web app or web service uses the front controller pattern (Wikipedia overview article). Every request is inspected by a single controller, and then dispatched to the code module that can handle the request.

The dispatch destination is defined by routes. By default, web service requests include an “/api/” URI segment, although we can change that default in the future . Then, by default, the next segment of the route designates the controller that will handle the request. The HTTP request method, along with the presence of a query string, and/or an entity body, will then determine the method in the controller that handles the request. Routing basics are covered in this ASP.NET Web API article.

Data in-and-out of  the web service is handled by serializers. By default, the Web API project template can handle three internet media types:

  • XML
  • JSON
  • Multipart form data (i.e. data from HTML Forms)

Serialization is introduced in this ASP.NET Web API article.


System design guidance and how-to

During this course, you will learn to create a web service that has some level of sophistication. Therefore, you will need some guidance on how to design the system.

In your second-year web app programming and systems analysis courses, you used a “system design guidance” diagram to help you learn a set of topics. We will use a version of that diagram that’s customized for a web service.

Early in the course, you will use a ‘simplified’ diagram, but soon after, you’ll use the ‘complete’ version.

Simplified (click to open a PDF in a new tab/window):



Complete version (click to open a PDF in a new tab/window):



Data for your app

Now that you have gone beyond the “hello world” stage, it’s time to do something more serious. You will create a fully-functional web service.

In this section, you will write code for the blue-coloured “App domain model classes…” box on the ‘simplified’ diagram above.

App domain data model

In the Models folder, add a new class, named AppDomainClasses. When it opens in the editor, you can delete the existing “public class AppDomainClasses” class, because we’ll add our own.

Write code for a new class, named Colour. It will have two properties, Id (int), and ColourName (string). Remember to use the “prop tab tab” code snippet to help you write the code faster and without errors.


In the Models folder, add a new class, named StoreInitializer. It will hold a property (a generic list of Colour objects) and a default constructor.

Write code for the generic list of Colour objects.

Write code for the default constructor. Remember that the pattern is to initialize collection properties in the constructor method. Then, write code to add new Colour objects. You can use the per-property setters, or the curly-brace literal syntax (your choice). For the ‘Id’ property, we suggest that you use a simple incrementer.

Execute the initializer when the app starts

In Global.asax.cs, add code to the Application_Start method.

First, create an instance of the initializer. As you know from above, this action will create the data.

Then, add the data to the in-memory application state. The data will exist during the app’s lifetime, which is at least twenty minutes.


Service layer for data operations

In this section, you will write code for the pink-coloured “App, business logic…” box on the ‘simplified’ diagram above.

In the Controllers folder, add a new class, named DataService. It is the class that your controllers will use to perform data operations.

Controller classes MUST NOT directly use app domain model classes. Instead, you MUST use service classes.

This DataService class needs a namespace reference to the project’s “Models” folder, so add a ‘using’ directive.

For its internal use, the class will need a reference to the in-memory collection of Colour objects. Therefore, write code for a private property to hold a generic list of Colour objects (that we’ll get from application state).

The class needs a default constructor. It simply will fetch the data from application state.

Next, we need methods. Plan to write three:

  1. Get all colour names
  2. Get a colour name for a specific identifier
  3. Add a new colour name

Get all colour names 

This method will return a generic list of strings. Each item on the list will be the colour name.

Get a colour name for a specific identifier 

This method will search in the collection by the ‘Id’ property, and return the matching colour name (or null if not found).

Add a new colour name

This method will accept a string with the name of the colour to be added, and add it to the in-memory collection.


Writing controller code

In the Controllers folder, add a new controller named ColoursController. It will be an “API controller with empty read/write actions”.

At the top of the class, add a variable (probably named ‘ds’) to initialize the DataService.

Then, write (and/or modify) code for the methods, and use the DataService methods.


Summary of your code modules, and the app’s execution

If you followed the guidance above, your code will be located in the following places:



When a request comes into your app, it will be processed in the following way:








  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: