CRUD Operations with Reactjs, TypeScript and Asp.Net Core (5.0)

Hi, We will make crud operations with asp.net core 5, react ve typescript . You can find github url of the project at the bottom of the post.

The post will be in two parts, the first is the backend and the second is the frontend.

Development Environment

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

Project Stages

Project Beginning

The Project will make personnel adding, list operations, It will be DDD (Domain Driven Design) architecture. Let's create project as Blank Solution.

EntityFrameworkCore Code First

Previously We add Domain Layer to Infrastructure, Infrastructure to Web Layer as reference.

We install the following packages for ef core.

Microsoft.EntityFrameworkCore.Design we install it to web layer for migration commands.

Let's create entites folder and it within add entities (Employee and EmployeeType).

Employee.cs :

EmployeeType.cs :

Let's create AppDbContext to Infrastructure.

Let's write connection string to appsettings.json.

Let's Dependcy Injection for AppDbContext in Startup.cs.

at now let's open console and select project as Infrastructure then web layer set as start up project. Let's run the following commands.

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 + Webpack + React

Ö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...

Leave a Reply

Your email address will not be published.

English