การใช้งาน Angular ร่วมกับ Datatables เรียกใช้ข้อมูลจาก .NET Core แบบ Server-side

จากบทความที่แล้วเราได้รู้วิธีการใช้งาน Angular ร่วมกับ Datatables เรียกใช้ข้อมูลจาก PHP และ MySQL แบบ Server-side ไปแล้ว ในบทความนี้เรามาดูการเรียกใช้ไปยัง .NET Core กันบ้าง ในเคสนี้จะใช้ Angular จากบทความนี้นะ ไปอ่านครับ --> การใช้งาน Angular ร่วมกับ Datatables เรียกใช้ข้อมูลจาก PHP และ MySQL แบบ Server-side

เริ่มจากไฟล์ Models/Persons.cs

namespace datatables_api_tutorial.Models
{
    public class Persons
    {
        public int id { get; set; }
        public string firstName { get; set; }
        public string lastName { get; set; }
    }
}

ไฟล์ Data/DataContext.cs

using datatables_api_tutorial.Models;
using Microsoft.EntityFrameworkCore;

namespace datatables_api_tutorial.Data
{
    public class DataContext : DbContext
    {
        public DataContext(DbContextOptions options) : base(options)
        {
        }

        public DbSet<Persons> Persons { get; set; }
    }
}

ในส่วนของ Dtos จะสร้างตาม Datatables Parameters ดังนี้ ซึ่งไฟล์เหล่านี้จะอยู่ในโฟลเดอร์ Dtos ครับ

ไฟล์ Dtos/Column.cs

namespace datatables_api_tutorial.Dtos
{
    public class Column
    {
        public string data { get; set; }
        public string name { get; set; }
        public bool searchable { get; set; }
        public bool orderable { get; set; }
        public Search Search { get; set; }

    }
}

ไฟล์ Order.cs

namespace datatables_api_tutorial.Dtos
{
    public class Order
    {
        public int column { get; set; }
        public string dir { get; set; }
    }
}

ไฟล์ PagingRequest.cs

using System.Collections.Generic;

namespace datatables_api_tutorial.Dtos
{
    public class PagingRequest
    {
        public int draw { get; set; }
        public List<Column> columns { get; set; }
        public List<Order> order { get; set; }
        public int start { get; set; }
        public int length { get; set; }
        public Search search { get; set; }
    }
}

ไฟล์ PagingResponse.cs

using System.Collections.Generic;
using datatables_api_tutorial.Models;

namespace datatables_api_tutorial.Dtos
{
    public class PagingResponse
    {
        public int draw { get; set; }
        public int recordsTotal { get; set; }
        public int recordsFiltered { get; set; }
        public List<Persons> data { get; set; }
    }
}

ไฟล์ Search.cs

namespace datatables_api_tutorial.Dtos
{
    public class Search
    {
        public string value { get; set; }
        public bool regex { get; set; }
    }
}

จากนั้นก็เป็นไฟล์ PersonsController.cs

using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using datatables_api_tutorial.Data;
using datatables_api_tutorial.Dtos;
using datatables_api_tutorial.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;

namespace datatables_api_tutorial.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class PersonsController : ControllerBase
    {
        private readonly DataContext _context;

        public PersonsController(DataContext context)
        {
            _context = context;
        }

        [HttpPost("getPersons")]
        public async Task<PagingResponse> getPersons(PagingRequest pagingRequest)
        {
            var pagingResponse = new PagingResponse()
            {
                draw = pagingRequest.draw
            };
            var personQuery = _context.Persons.AsQueryable();
            if (!string.IsNullOrEmpty(pagingRequest.search.value))
            {
                personQuery = personQuery.Where(p =>
                    p.firstName.Contains(pagingRequest.search.value) ||
                    p.lastName.Contains(pagingRequest.search.value)
                );
            }
            var recordsTotal = personQuery.Count();
            pagingResponse.recordsTotal = recordsTotal;
            pagingResponse.recordsFiltered = recordsTotal;
            List<Persons> persons = await personQuery.OrderBy(p => p.id).Skip(pagingRequest.start).Take(pagingRequest.length).ToListAsync();
            pagingResponse.data = persons;
            return pagingResponse;
        }
    }
}

เมื่อรันระบบก็สามารถเรียกดูผ่าน Browser ได้ที่ https://localhost:5001/api/Persons/getPersons 
หรือเรียกใช้ API URL นี้แทนใน Angular ได้เลยครับ