Addressbook

We are going to build a small app to manage Address Book. We will cover some complex scenarios which are used commonly in real world apps. It will not be a basic CRUD app like Person. It will contain Multiple tables with relations Image storage in 3rd party cloud service Transaction processing Import bulk data from json into SQL Server using ASP.NET Generate hundreds of thousands of records to test performance It will consist of two layers....

In the first part, we will build API and UI for city, state and country management. These three are part of any address and should be used as foreign keys in the address table. We will create a web API in ASP.NET Core 7 for backend. It will have repositories, dtos, services and controllers. Each entity will have its own repository, service, dtos and controller. In the beginner ASP.NET series, we had only one entity....

Create a new project in Visual Studio 2022, choose type ASP.NET Core Web API, set name as AddressBook, choose .NET 8 in framework. leave other options unchanged and create the project. Add the following NuGet packages in the project. AutoMapper.Extensions.Microsoft.DependencyInjection DotNetEnv Microsoft.EntityFrameworkCore.Design Microsoft.EntityFrameworkCore.SqlServer Microsoft.EntityFrameworkCore.Tools System.Linq.Dynamic.Core Check the packages from the below screenshot and verify that you have installed the correct packages.

Start with creating entity classes for city, state and zip. We will use the data from the Json file hosted on https://github.com/dr5hn/countries-states-cities-database repository. The schema will also be based on the same Json file. Below is an extract from the Json file for Qatar, where FIFA 2022 world cup took place. { "id": 179, "name": "Qatar", "phone_code": "974", "capital": "Doha", "currency": "QAR", "latitude": "25.50000000", "longitude": "51.25000000" "timezones": [ { "zoneName": "Asia\/Qatar", "gmtOffset": 10800, "gmtOffsetName": "UTC+03:00", "abbreviation": "AST", "tzName": "Arabia Standard Time" } ], "translations": { "kr": "카타르", "pt-BR": "Catar" }, "states": [ { "id": 3183, "name": "Al Khor", "state_code": "KH", "latitude": "25....

We have created entities, now we will generate database and tables from these entities. The process is same what we already used in the beginner series. You can follow person-api/generate-database/ to generate the database. We will not go in details here, we will just summarize how to generate database from entity classes. Generate database from Entity classes Create .env file and add connection string in variable SQLSERVER Create static property SecretUtility....

Country DTOs In general we create three DTOs for an entity. EntityRes – for sending response data to the API client EntityReqEdit – for create and update, data is received from client in request body EntityReqSearch – for searching, paging and sorting, data received from client in get request When we created DTOs for Person in the beginner series, we created these 3 DTOs. Person entity just had 5 fields. But Country entity has 18 fields and 3 collections for child rows....

So far we have written the repositories for all 5 tables that implements basic CRUD operations. Now we will write service classes for all 5 entities, including city, state and country. Service for Country Add a new interface ICountryService in Services folder. Add the following methods in this interface. public interface ICountryService { CountryRes Create(CountryReqEdit dto); CountryRes Update(int countryId, CountryReqEdit dto); void Delete(int countryId); CountryRes Get(int countryId); int Count(); ApiOkPagedResponse<IEnumerable<CountryRes>, MetaData> Search(CountryReqSearch dto); } There are 6 methods, 4 for basic CRUD and 2 for Search and count....

We have written entity, repository and service classes for our 5 entities. Now we will add controllers for these basic operations. Controllers are the endpoints that make the URL. All the business related functions are implemented in the Service classes. The controllers should be dumb. The role of the controllers should be to handle the requests between client and Services. Add a new class named CountryController in Controllers folder. Add ICountryService interface as private member and initialize it in the constructor (dependency injection)....

Basic Structure – layout, header, footer, top menu We have developed the API for managing city, state and country. Lets create the UI for it now, using React. To create the basic structure of the React app, read the following articles, which are already part of the beginner React UI series. Create React app Add layout, header, footer, navigation menu using Chakra UI Setup Axios to call Persons web API API Helper classes When you are at the 3rd article, it says to create persionApi....

After setting up the basic layout, menu, axios configuration and API helper class, we will now create the front end user interface pages for Country management. Add a new folder named pages in src folder. We will keep all pages here. Create empty pages and routes In src\pages folder, add a new folder, name it country. In country folder, add a new file, name it Countries.tsx. Type rafce and enter the default template code, which will look like below....