React, TypeScript ve Asp.Net Core 5 ile CRUD işlemleri

Merhaba, bu gönderide asp.net core 5, react ve typescript ile crud (ekleme, güncelleme, silme) işlemlerini yapacak bir proje yapacağız. projenin son halini gönderinin en altında github linkinden ulaşabilirsiniz.

Yazı iki aşamadan oluşacak ilk bölümde bir api service yazacağız, postman ile test edeceğiz daha sonra react ile de önyüzü kodlayacağız.

Geliştirme Yaptığım Ortam

  • Windows 11
  • Visual Studio 2019
  • .Net 5.0
  • Node.js (Npm paketleri için)

Proje Aşamaları

Proje Başlangıç

Projemiz basit olacak personel ekleme, listeleme işlemleri yapacağız. DDD (Domain Driven Design) mimarisine uygun tasarlayacağız. Blank Solution açarak projemizi oluşturalım.

EntityFrameworkCore Code First

Öncelikle Infastructure katmanına Domain katmanını, Web katmanına da Infastructure ve Domain katmanını referans olarak ekleyelim.

Data işlemlerini yapacağımız Infastructure katmanına aşağıdaki paketleri kuralım

Microsoft.EntityFrameworkCore.Design paketinini web katmanına da yükleyelim.

Domain katmanına entities klasörü oluşturup Employee ve EmployeeType adındaki entityleri oluşturalım.

Employee.cs :

EmployeeType.cs :

Infastructure katmanına AppDbContext sınıfımızı ekleyelim

appsettings.json‘a connection stringi yazalım

Startup.cs’de AppDbContext‘in tanımını yapalım.

şimdi console’u açalım default proje olarak Infastructure katmanını seçelim sonra da Web katmanında sağ tik ile set as startup project seçelim. Console’a aşağıdaki komutları sırayla yazalım.

Bu işlemleri gerçekleştirdikten sonra Infastructure katmanında aşağıdaki migration klasörü ve sql server local veritabanımızda belirttiğimiz database oluşacaktır.

Servis ve DTO

Veritabanımız hazır şimdi Employee ile ilgili database işlemlerimizi yapacak EmployeeService ve IEmployeeService servislerini oluşturalım.

Aşağıdaki gibi iki katmana da services klasörü oluşturup içerilerine servisleri ekleyelim.

IEmployeeService :

EmployeeService :

Startup.cs’de servisimizi tanımlayalım

Apiyi yazmadan önce veri modelleme işlemlerini yapmalıyız. Öncelikle Domain altında DTOs (Data Transfer Object) adında bir klasör oluşturup içine EmployeeIndexDTO ve EmployeeDTO adında iki tane class ekleyelim.

EmployeeDTO :

EmployeeIndexDTO :

Mapper işlemleri için web katmanına automapper paketlerini yükleyelim

Web katmanın kök dizinine MapperProfile.cs ekleyelim ve mapleme işlemlerini yapalım

startup.cs :

EmployeeController adında bir api controller açalım

EmployeeType tablosuna sql server üzerinden aşağıdaki gibi eklemeler yapabilirsiniz.

Apiyi Test edelim

Apiyi test etmek için postman yada swagger kullanabilirsiniz ben popüler olan postman üzerinden yapacağım.

Employee Post Api test:

Şimdi bu api projemizin içine bir react projesi ekleyelim ve crud işlemlerini ekran üzerinden yapalım.

React – Frontend

projemize react eklemek için önümüzde iki yol var, UI adında 4. bir katman açmak yada Web katmanın içine eklemek. Biz ikinci yoldan devam edeceğiz

Create Rreact App uygulamasını web katmanında client klasörü altında oluşturacağız, typescript kullanacağız.

Aşağıdaki komutu web katmanı içinde çalıştırınız.

Create react app başarılı bir şekilde yüklendi şimdi middlewareda bazı ayarları yapmadan önce Nuget üzerinden aşağıdaki paketleri yükleyelim.

startup.cs:

Typescript build edebilmek için Microsoft.TypeScript.MSBuild paketini nuget üzerinden kuralım. reactı başarılı bir şekilde ekledik vs code üzerinden açtığımızda aşağıdaki şekilde görünecektir. (componenets ve pages klasörlerini de ekleyelim)

http bağlantıları için axios, routing işlemleri için de react-router‘ı ve tasarım için de bootstrapı kuralım

Bootstap’ın css dosyasını şu linkten inidirip ve dist klasörü altına ekleyelim

EmployeeService.ts:

Bir tablo üzerinde personelleri listeleyeceğiz. Bu tablo üzerinden güncelleme, ekleme ve silme işlemleri yapacağız.

Bu işlemleri yapabilmek için employeeService adında bir servis oluşturacağız. Bu servisi oluşturacağımız Services klasörü altına ekleyeceğiz.

İki tane EmployeeDTO veri tipimiz var EmployeeIndexDTO listelemede kullanmak için EmployeeDTO ise güncelleme ve ekleme yaparken kullanacağımız tip. axios üzerinden bir http nesnesi oluşturup get, post, put, delete gibi işlemleri bunun üzerinden yaptık.
Servis hazır, şimdi Pages klasörü altında bir Employee klasörü oluşturalım buraya index ve createOrEdit adında tsx tipinde sayfalarımız ekleyelim.

react-router ve bootstrap ayarları

kök klasörümüzdeki index.tsx dosyasına bootstrap css dosyasını import edelim ve App componentini Router tagleri içine alalım

index.tsx:

history.js

app.tsx:

Hata sayfalarının ekleme (404, 500 vs.)

Yanlış bir url sonucunda örneğin, Employee Controller’a 5 idli bir get işlemi yaptık ve cevap olarak 404 geldi, employeeService bunu yakalıyor ve ilgili hataya göre sayfayı yönlendiriyor. Bunun için Exception adından bir klasör oluşturup içine Index.tsx dosyası ekleyelim

Exception/Index.tsx

useParams: query ile gelen değerleri yönetmemiz sağlayan bir hook.

Listeleme-Silme (Employee/Index.tsx)

Listeleme sayfamız ilk açılışta useEffect ile state’i dolduruyor, deleteRow fonksiyonu da hem clienttan hem serverdan ilgili veriyi kaldırıyor

Ekleme-Güncelleme (createOrEdit.tsx)

Create ve Edit sayfalarında html elementleri tekrar ettiği için aynı sayfada işlemleri yapacağız. useParam kullanarak id parametresi olup olmadığını kontrol edeceğiz eğer id var ise servise gidip o idli verimizi alıp ilgili state’e atacağız değil ise de initial state’i kullanacağız.

State ve Interface tanımları

Verilerin yüklenmesi (Employee ve EmployeeTypes)

Validation fonksiyonları

formu submit eden fonskiyon:

html:

Gif:

projenin son hali
Create, Edit, Index sayfaları ve silme işlemi

MVC ile react için: Asp.Net Core (5.0) MVC projesinde Webpack ve React Kullanmak

Özet:

Özet olarak yaptıklarımızın üstünden geçelim. Domain Driven Design mimarsiyle bir Asp.Net core 5 web api projesi inşa ettik, veritabanımızı bağladık arka kısmı bitirdikten sonra react-typescript uygulamasını ekledik (create-react-app), services, pages, exception, dist şeklinde uygulamamızı parçaladık, router, bootstrap ayarlarını yaptık,service klasöründe EmployeeService adında bir servis ekledik bu servis, axios vasıtasıyla apiyle bağlantı kurmamıza yaradı, son olarak da pages altında Employee klasörü ekleyip altına index ve createOrEdit sayfalarını ekledik.

You may also like...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

tr_TRTurkish