Backend and Frontend Walking Skeleton
The most commonly used modern software architecture is Client-Server architecture. The server is responsible for the databases. If the developer can be satisfied with code queries, end-user requires a user-friendly interface. As a result, there are 2 fundamentally different layers. Depending on the complexness of the project, there may be many layers for database storage, data retrieval mechanisms, final data submission, and so on. We will have 2 projects, one for database, another for presentation.
At first let’s create a Mode-View-Controller project for the presentation like this.
Name it like this:
Keep default settings.
To work with the database, we need to add a Class Library named “Domain”, which will be responsible for the models.
The next step is to add project references. “MVCPresentation” will depend on “Domain”. In case of having more projects, there should be an “assembly” that does not depend on any other project, otherwise we will have a cycled chain. You can also add code to the MVCPresentation.csproj file.
In case of launching the program for the first time, we will see such inquiries.
The DbDomain project is responsible for the database. Models should be added to it, based on which the tables will be generated in the database. Create classes called Human and Car, which will contain properties. The line “public virtual ICollection<Human>? Humans { get; set; }” in Car class will create a foreign key in Human referring to Car. Then add a class called DataContext, which essentially matches the database property and contains the DbSet <T> type model classes as a property. It is inherited from the DbContext base class. To work with the database, the Entity Framework will be used, which is an object-relational mapper that provides connection between databases and code written in programming language. DbDomain needs to contain Microsoft.EntityFrameworkCore.UseSqlServer and Microsoft.EntityFrameworkCore nuget packages.
DataContext is something like this
In the Top-level statements of the MVCPresentation Programm class, we need to add DataContext to the services with the following code.
UseSqlServer is the database provider we use. “DefaultConnection” is the Connection String defined in appsettings.json. After establishing a physical connection with database, the Connection String can copid from Properties section of the server. The Connection String looks like this:
“Data Source” is the name of the server, “Initial Catalog” is the name of the database. For simplicity, remaining settings can be skipped .
The Microsoft.EntityFrameworkCore.Design package must be added to the MVCPresentation project for migration. In the NuGet Package Manager Console you need to write “Add-Migration InitialCreate -Context DataContext”, which creates a class containing the “InitialCreate” root. In the future, tables will be created based on those classes. It is necessary to pay attention that the migration project is chosen correctly. The migration assembly is the DbDomain project, so you have to choose it.
To create a database, we can immediately write the “Update-Database” command. The “Update-Database -Migration 0” command can delete tables, and the “Remove-Migration” command can delete migration files.
We can use either SQL Server Object Explorer or Server Explorer to physically connect to the server. In the opened window you have to fill in the name of the server or put a dot. The server name is defined during SQL Server Management Studio and SQL Server installation.
In the case of Server Explorer, we can also select the required database. This option makes sense in the case of the Database First approach, when the database is already pre-created.
If you enter the server name correctly, all the databases in the drop-down list will appear.
“AutoPark” database has been added to the server and contains 2 tables. In the case of SQL Server Object Explorer, there are other databases as well.
The MVCPresentation project contains Controllers that process data based on the Model and transmit it to the View. The controller performs Get և Post queries. Get returns the data from the database, Post sends and stores it there. Add the controller like this.
To connect to the database, write the following code:
As Business logic and presentation of data must be separate, the models used during these two processes must also be separate. In MVCPresentation we use ViewModels, which are special cases of the model of database. In ViewModel, for example, the Id field may not be used because the user will neither import nor view it.
The Create method of the Controller must be edited to have LINQ commands.
Using the Lambda expression, we take a value from an object of type HumanViewModel and assign it to the model fields, which are passed to the View. Since the contents of the “model” must be displayed in a Foreach loop in the View, that must be of Ienumerable type. All methods must have Views that can be generated automatically. In our case, the Index method is intended to show the final result, its template should be List, and the used model should be the HumanViewModel class. Do the same for the CarController class.
The generated code will show a table. Some changes can also be made. The final look is this:
The model item contains the Humans’ name, surname, address, place of residence and car. It should be noted that in the case of the “Car” it is “item.Car.Model”, not just “item.Car”.
But first the data has to be entered. To do this, use the Create method, which contains the following code:
Collection is added to the Humans table of the DataContext database.
We generate code based on the method.
As a result of the work we have the following pages for inputs.
The result can be seen in the browser
You can also see the availability of data in the database. T — SQL query code:
The result is.
For better performance database queries can be done Asynchronously.
The “await” keyword makes query in a separate thread, and to use that keyword the method must have a Task <T> return type and contain the word “async”. The same is done for other methods. As an architectural best practice, such requests are considered to be in separate Service classes to keep the Controllers clean and easy to read.
Sources used:
1) Pro C# 9 with .NET 5, Foundational Principles and Practices in Programming, Andrew Troelsen
2) Complete guide to building an app with .Net Core and React — https://www.udemy.com/course/complete-guide-to-building-an-app-with-net-core-and-react/
