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 – 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:
http://localhost/api/myendpoint
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
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
namespace auapi.Controllers
{
[Route("api/[controller]")]
public class PersonController : Controller
{
}
}
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
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
namespace auapi.Models
{
public class PersonModel
{
private string _name;
public string Name
{
get
{
return _name;
}
set
{
_name = value;
}
}
private string _surname;
public string Surname
{
get
{
return _surname;
}
set
{
_surname = value;
}
}
}
}
I’ll create a method named All in the PersonController class.
Create Endpoint Method
Controllers/PersonController.cs
[Route("api/[controller]")]
public class PersonController : Controller
{
[HttpGet]
public JsonResult All()
{
PersonModel persons = new PersonModel()
{
Name = "Ali",
Surname = "GÖREN"
};
return Json(new { persons = persons });
}
}
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
namespace auapi.Models
{
public class PersonModel
{
private string _name;
public string Name
{
get
{
return _name;
}
set
{
_name = value;
}
}
private string _surname;
public string Surname
{
get
{
return _surname;
}
set
{
_surname = value;
}
}
}
public class PersonList
{
public PersonList()
{
Persons = new List<PersonModel>();
}
public List<PersonModel> Persons { get; set; }
}
}
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
namespace auapi.Controllers
{
[Route("api/[controller]")]
public class PersonController : Controller
{
[HttpGet]
public List<PersonModel> All()
{
PersonList persons = new PersonList();
string[] names = { "Ali", "Burak", "Emre", "Onur" };
string[] surnames = { "GÖREN", "KARADAŞ", "ALAKUŞ", "GÜRBÜZ" };
for(int i = 0; i < names.Length; i++)
{
PersonModel person = new PersonModel()
{
Name = names[i],
Surname = surnames[i]
};
persons.Persons.Add(person);
}
return persons.Persons;
}
}
}
Now, we’ll see this output on postman:
[
{
"name": "Ali",
"surname": "GÖREN"
},
{
"name": "Burak",
"surname": "KARADAŞ"
},
{
"name": "Emre",
"surname": "ALAKUŞ"
},
{
"name": "Onur",
"surname": "GÜRBÜZ"
}
]
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
[HttpGet]
[Route("All")]
public List<PersonModel> All()
{
PersonList persons = new PersonList();
string[] names = { "Ali", "Burak", "Emre", "Onur" };
string[] surnames = { "GÖREN", "KARADAŞ", "ALAKUŞ", "GÜRBÜZ" };
for(int i = 0; i < names.Length; i++)
{
PersonModel person = new PersonModel()
{
Name = names[i],
Surname = surnames[i]
};
persons.Persons.Add(person);
}
return persons.Persons;
}
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
export class App {
constructor() {
this.message = 'Hello World!';
this.getValues();
}
getValues() {
fetch('http://localhost:5000/api/person/all', {
method: 'GET',
}).then(resp => resp.json())
.then(obj => {
this.list = obj;
});
}
}
app.html
<template>
<div repeat.for="person of list">
<h1>Name: ${person.name}</h1>
<h1>Surname: ${person.surname}</h1><hr>
</div>
</template>
Aurelia Application with Web API Output:
Name: Ali Surname: GÖREN ---- Name: Burak Surname: KARADAŞ ---- Name: Emre Surname: ALAKUŞ ---- Name: Onur Surname: GÜRBÜZ
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!