Я думаю, вы знаете, каков маршрут. Но вы не знаете, как создать маршрут с помощью aurelia и конечные точки с помощью C#. Сначала я покажу конечные точки веб-API.
Веб-API
Нам нужно понять класс контроллера. Потому что наша конечная точка будет в классе контроллера. Каждый класс контроллера должен начинаться так: MyEnpointController. Например:
http://localhost/api/myendpoint
Теперь мы создадим простой класс контроллера в папке Controller. Его имя будет PersonController. Это простой контроллер. Мы создадим методы конечной точки для этого контроллера.
Создать класс контроллера
Контроллеры/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!
