Simple Aurelia Application with Web API – 2

In the last post we created new aurelia and web api projects. In this series I’ll show how to create aurelia routes and web api endpoints. Aurelia Application with Web API series will continue.

Aurelia Application with Web API

Aurelia Application with Web API – Routing and Api Endpoints

I think you know what’s the route. But you don’t know how to create route with aurelia and endpoints with C#. Firstly I’ll show Web API endpoints.

Web API

We need to understand Controller class. Because our endpoint will be in the controller class. Each Controller class should start like this: MyEnpointController. For example:

Now, we’ll create a simple controller class under the Controller folder. It name will be PersonController. This is simple controller. We’ll create endpoint methods for this controller.

Create Controller Class

Controllers/PersonController.cs

After that we need to run this command to see what will happen: dotnet run. If you’re using postman you can check http://localhost:5000/api/person url.

You won’t see anything. Because there is no endpoint method in the PersonController class. Let’s start to coding. I want to see all person by this URL. http://localhost:5000/api/person/all. I assume that all data will come from the database. I’ll create a folder named Models. After that I’ll create PersonModel class like this:

Create PersonModel

Models/PersonModel.cs

I’ll create a method named All in the PersonController class.

Create Endpoint Method

Controllers/PersonController.cs

Yep. It will work. But there is a problem when you try to add second value. Don’t worry about it because we have a solution. Firstly we’ll change our PersonModel.

Extending PersonModel

Models/PersonModel.cs

After that we’ll change our controller. Because we’ll add new data and our method’s return type must change. It will be like this:

Controllers/PersonController.cs

Now, we’ll see this output on postman:

Okey. I’ll call my new endpoint from aurelia. If you remember we created aurelia project and we put some data. I’ll change these data. Firstly I’ll change getValues method’s endpoint. My new endpoint looks like this: http://localhost:5000/api/person/all. I changed url and didn’t happen. Because there is no endpoint like this: person/all. Okey we came back our controller to add route attribute method’s head. I changed method right now:

Declaring New Endpoint

I added route attribute with routes name. After that I tried again. Yep it worked. We’ll try something new. We’ll use aurelia’s repeater to loop operations.

app.js

app.html

Aurelia Application with Web API Output:

Yeaah look perfect. We did!. As I said Aurelia Application with Web API so easy to create powerful web applications. In this post, everything I talked about, I published on Github with their node_modules folder.

Github: https://github.com/aurelia-project/aurelia-webapi

Thank you for reading!