Which Technique to choose between the Web Development?

Table of Contents

Setup #

Greetings, First, let me talk about the project in basic terms. We aim to try a project that connects to a database with a simple orm and performs crud operations in many technologies and to extract the pros and cons for us.

What is the real purpose of this experiment?

This experiment; #

It can contribute to choosing which of the .net web patterns to use in which project size.
It has been developed to find out what can be done in which pattern with little effort while developing projects.
Of course, we can reach the same results with all patterns by trying hard. But what I want to show here is how we can evaluate and conclude the processes with the natural functioning of the pattern we are trying.
How the developer evaluated this process and how much workload it created.
What we are testing is the fastest and easiest method the pattern supports, rather than the best or idealized hardest method.

Tested business; #

Functionality is what we are testing in this project. How can we add, remove and update Todo in the fastest and simplest way?

We prefer to be able to do it all easily on a single page.

Our models will be simple and short. Let’s get to work.

Database #

Simple one model Todo.cs in-memory Entity Used.

Web API #

Simple Minimal API Design Pattern with these endpoints;

todoitems (Get,Post)
todoitems/complete (Get)
todoitems/{id} (Put,Delete).

Shared Code #

Web service request method’s and Database is on Shared project for reduce code repetition and to shorten the development process both to use the same code and to ensure that the tests give more accurate results and to shorten the process.

Front End #

Simple Bootstrap .NET Starter Layouts

Razor Pages Page Model #

I prepared three tests on Razor pages.

The first one is /todos/index which you can access from the first menu. Here we do crud operations on a single page.

Our second example is the link /todo where we do the same operations with ajax. Obviously this is a method that is constantly used in razor and mvc.

The third is the MVC and Pages Design pattern that you can access with Todos/add Todos/update, which is both recommended by microsoft and generally recommended.

You create a folder, list it with Index, do the crud operations related to the add update remove files and you will have a proper structure.

There are some advantages and disadvantages of using models of pages without using controllers in development.

Frankly, interacting inside the page using forms causes serious problems when you try to do everything on a single page. First of all, we had to find the value of the checkbox in the list and reverse it instead of accessing it directly, in order to update the isDone checkbox when the todo is clicked. This and some similar solutions are unfortunately unacceptable when you develop a complete product.

In addition, it is a serious problem that the page is refreshed and the method name is directly in the url.

Unfortunately, in order not to deal with such problems, you need to go to the ajax example. If you are going to make a dynamic page and throw multiple requests in it, you have to do it with javascript and give up all the advantages of razor. In the result methods in Ajax, you must add or delete elements in the html with js or print another message. When you do these, you don’t actually use razor.

What remains is the model/action pattern suggested by microsoft. Here you need to create a separate cshtml for your model, your page, and for each operation. such as todo/add.cshtml, todo/update.cshtml, todo/remove.cshtml, todo/index.cshtml, todo/list.cshtml.

When we proceed in this way, yes, we do not have a reactive structure, but this is the structure recommended in razor pages as in MVC. We have a more solid structure.

Pros and cons of the tested methods; #

1.Creating a structure using more than one form inside a page; #

Pros;

To be able to perform these operations in a single page somehow.
The properties defined on the Page Model are accessible by other requests.
Not writing Ajax request.
We don’t have to worry about rendering html with javascript.

Cons;

When there are more than one form tag on the same page, it becomes difficult to manage and write.
The page has to be refreshed.
Writing the page-handler to the url when the page is refreshed. eg: /todos?handler=add
Problems of operations such as going back and forward from the browser:; – resubmitting the form: (the need for extra testing if the logic is corrupted in the calculated data), – rendering of old html: (sending requests about non-existent data),

2.To create a structure where we can do these things on a single page using Ajax. #

Pros;

The page is not refreshed.
Visual additions such as loading, click blocking, etc. can be made.
Operations such as addition, subtraction, etc. can be viewed immediately.
Html looks cleaner.

Cons;

Now, instead of rendering using C#, it is necessary to create html elements with javascript and print them on the screen. It is necessary to control the listing and functionality and create a dynamic structure.
Too much js code needs to be written and tested.
Since the data comes from the model when the page is opened, it must either be converted to json and sent to the method, or it is necessary to do the rendering with both razor and js, which causes the same job twice.
It is necessary to check the request on the Ajax side, is it gone? didn’t he go? Is the answer wrong? Is the internet down? It is loaded in these processes and codes must be written to prevent it from being sent again.

3. Separating the pages that take action in the form of model/action one by one. #

Pros;

Creating a separate page for each process ensures that the project is organized and the codes can be prepared faster with less writing.
It has a more solid structure and operations such as error control and validation can be done safely.
Once the structure is learned by the end user, it provides convenience as the same structure is used in all transactions.

Cons;

Cannot be used reactively from a single page.
Separation of everything causes prolongation of the operations performed by the user and prolongs the learning. Although this can turn into a plus once learned, it is difficult to learn at first and becomes boring because it causes too much repetition over time.

MVC #

SPA Blazor #

SSR Blazor #

Blazor MAUI Hybird APP #

API Pattern #

.NET Web Design Patterns Experiments (MVC, Razor Pages Page Model, Blazor)

In this blog post, I will explore some of the web design patterns that can be used with .NET technologies such as ASP.NET Core and Blazor. I will also create some test todo projects to demonstrate how these patterns work in practice.

What are web design patterns?

Web design patterns are reusable solutions or best practices for common web development problems. They help developers to write clean, maintainable and scalable code that follows the principles of separation of concerns, modularity and reusability.

Some of the most popular web design patterns are:

Model-View-Controller (MVC): This pattern separates an application into three components: model (data), view (user interface) and controller (business logic). The controller handles user requests, interacts with the model and returns a view to display. MVC is widely used for building dynamic web applications with ASP.NET Core.
Razor Pages Page Model: This pattern is similar to MVC, but instead of using controllers and views, it uses Razor Pages. Razor Pages are files with a .cshtml extension that contain both HTML markup and C# code. Each Razor Page has a corresponding Page Model class that contains the logic for handling requests. Razor Pages can make coding page-focused scenarios easier and more productive than using controllers and views.
Blazor: This pattern is a framework for building interactive web UIs using C# instead of JavaScript. Blazor can run on the server-side or on the client-side using WebAssembly. Both Blazor WebAssembly and Server use Razor components, which are reusable UI elements that can contain HTML markup and C# code. Blazor enables full-stack development with .NET.

How do they work with test todo projects?

To compare these web design patterns, I will create three simple todo projects using ASP.NET Core MVC, Razor Pages Page Model and Blazor WebAssembly respectively.

The projects will have the following features:

A home page that displays a list of todo items
A form to add a new todo item
A button to mark a todo item as completed
A button to delete a todo item

The projects will use an in-memory list as the data source for simplicity.

ASP.NET Core MVC

The ASP.NET Core MVC project consists of four files:

Models/TodoItem.cs: This file defines the TodoItem class that represents a single todo item with properties such as Id, Title and IsCompleted.
Controllers/TodoController.cs: This file defines the TodoController class that inherits from Controller base class and contains methods for handling requests related to todo items.
Views/Todo/Index.cshtml: This file defines the view for displaying the list of todo items using HTML markup and Razor syntax.
Views/_Layout.cshtml: This file defines the layout for all views using HTML markup and Razor syntax.

The following code snippets show some parts of these files:

Models/TodoItem.cs