Menu

How to: Build a Web API on ASP.NET Core for an Aurelia SPA

Building a Web API on ASP.NET Core for our Aurelia SPA

Implementing a ASP.NET Core Web API for our Aurelia SPA
This post will focus on writing a Web API that will serve our Aurelia SPA with data. The Web API is built on ASP.NET Core and resides in it’s own project. We will be implementing the repository pattern and an in memory repository. A Class Library will be used to hold the model and the repository.

The “Aurelia SPA built with TypeScript and Sass on .NET Core” Series

These are the parts of this blog post series about building a SPA in Aurelia.

Aim of this Post

First of all, the functionality of the SPA we’re building is to store and manage information about droids. The aim of this post, is to implement the storage layer and also the models for our data. When this post is done we will have a ASP.NET Core Web API that our Aurelia SPA can use. We’ll also have the base models in a Class Library, and use them from our Web API.

Defining the Model and Repository

The droids we’re going to operate on will have a sett of properties describing the object and some pertaining the object storage. The properties describing object storage (create date, change date) is not something we want to send to a client, so we will use a DTO (Data Transfer Objects) to decide what we want send to the clients.

Create the Droid Model

First add a new folder to the Class Library, name it Model.

Add a class in the new folder, name it Droid.cs

Add a new folder to the Class Library named DTO.

Add a new class in the DTO folder, name that Droid.cs as well.

So what information do we want to store about our droids?
First of we need identifying properties, like name and id’s.
Then we’d like a set of physical attributes listed, like height, weight, any eventual armaments etc.
We also want some meta data on the droid object, it’s good to know when it was created and modified.
Edit the Model.Droid.cs class like this:

Create the Repository

What do we want our repository to do then?
First of all We want to specify an interface for the Repository! This way we can swap it around for other implementations later on, without breaking our contract.
This will also help with unit testing, as having an interface to adhere too makes it easy to substitute in mock classes for testing.

Create a folder in the root of the Class Library named Repository.

Create a new interface, name it IDroidRepository.cs

Create a new class named DroidRepository.cs

Implement the Repository Interface

As for our repository we want to be able to perform the standard CRUD operations (Create, Read, Update and Delete), but also support partial update that will come in handy in our SPA.
Implement the repository interface like this:

Implement the Repository Methods

Time to start with some real implementation.
Open the DroidRepository.cs file, and make it derive from the IDroidRepository interface. To speed up development you can put your cursor and use “the light bulb” and make it implement the interface.
As for data storage we’re just going to use a dictionary to start with. So no real persistence layer, yet. As it’s only one static dictionary keeping the data, we can end up with multiple calls from multiple threads at the same time, so we need to use the ConcurrentDictionary implementation.

Add the Repository to the ASP.NET Core Dependency Injection System

Last thing we need to do is add the repository to the Dependency Injection system in ASP.NET Core, so that it can be inject into, and used from our controllers.
Open Startup.cs and modify ConfigureServices like this:

Implementing the Web API

Finally time to start working on the Web API!
But before we start implementing the actual methods, we need to change a few things in the setup of the project.

Preparing the Web API Project

To make the development experience a little smoother, add the watch tool to the Web API project if you haven’t already done so. (See the first episode of this post series if you don’t know how)

Then we want to change the base address to localhost:5005 instead of localhost:5000(as port 5000 is used by the Aurelia SPA). Modify the WebHostBuilder creation in Program.cs by adding a call to USeUrls(). Program.cs should look something like this:

Adding a Reference to the Repository Library

To access the repository functionality we implemented, we need to import a reference to our Class Library DWx.Repository.

Using Visual Studio

Right click the References node in the DWx.API project and select Add Reference….

Not Using an IDE

It’s also possible to just edit the project.json file. (This option is going away soon™ though, so enjoy it while it lasts!)
Just open the project.json file and add the following line under the dependencies section:

"DWx.Repository": "1.0.0-*"

Adding a Controller

Controllers are what’s used to serve the clients with information from a Web API.

So now add a class called DroidsController in the Web API under the Controllers folder.
If you got the ValuesController.cs left you can remove it, as it’s just examples created with the project.

The base implementation of the DroidsController should look like this:

Implementing the GetAll Method

Testing the Web API

Open a CLI and navigate to the root of the Web API Project. Start the server with dotnet watch run.

Now we can test the GetAll method we just implemented with some tool that can fire of web requests, for ex Postman.
In Postman call localhost:5005 with a GET and see what happens. It should return an array of Droids, the ones we defined in the Seed method in the DroidRepository.

Implementing the GetById Method

Add a method to the DroidsController class called GetById.
In this method we’re going to use the Http attribute to name it, because we want to reference this method by name later on. Implement the method like this:

Visual Studio will mark ModelState with a squiggly, as it doesn’t know what this is yet. Easiest way to get access to ModelState is to derive our class from Controller, so just do that for the class and this will compile.

public class DroidsController : Controller

When testing this with Postman, we issue a Post to localhost:5005 with the droid object in the body of the call. We also need to set a header for this to work, namely Content-Type that needs to be set to application/json.
Testing the Create call with Postman:

Implementing the Delete Method

Add a method to the DroidsController class, called Delete.
Implement it like this:

There’s two schools on what to return from a Delete in a Web API, some say return a status code and some say return the deleted object. This method returns a 204 No Content on successful removal of a droid.

Using Postman to test the Delete method:

Implementing the Update Method

Add a method to the DroidsController class, called Update.
Implement it like this: