A free website for beginners to learn the new technologies like Appian, .NET, Java, Low-Code Development etc. Detailed solutions to your bugs and errors in the Applications.
Building distributed applications can be a complex and time-consuming process. Thankfully, .NET Aspire is here to simplify the process and help you build observable, production-ready applications with ease.
.NET Aspire: Simplifying the Cloud-Native Development Journey
.NET Aspire is an opinionated stack within the .NET ecosystem, providing a pre-defined architecture and best practices for building modern applications. It focuses on three key areas:
1. Cloud-Native:
Seamless integration with cloud platforms like Azure
Streamlined deployment and management
Scalability and flexibility
2. Observability:
Rich telemetry data for monitoring and troubleshooting
Built-in logging and tracing
Improved application insights
3. Standardised Interfaces:
Consistent and predictable components
Reduced development complexity
Easier integration and maintenance
Benefits of Using .NET Aspire:
Faster Development: Get started quickly with a pre-defined architecture and standardized components.
Improved Scalability: Build applications that can easily grow and adapt to changing needs.
Enhanced Observability: Gain deeper insights into your application's behavior for better troubleshooting and performance optimization.
Reduced Costs: Streamline development and minimize infrastructure setup, potentially leading to cost savings.
Focus on Business Logic: Dedicate your time and energy to building core functionalities instead of infrastructure concerns.
Who Should Use .NET Aspire?
.NET Aspire is ideal for developers building:
Modern, distributed applications: Microservices architectures, event-driven systems, and reactive programming.
Cloud-based applications: Leveraging the benefits of cloud platforms like Azure.
Highly observable applications: Gaining deeper insights into application behavior and performance.
Maintainable and scalable applications: Building applications that can grow and adapt to changing requirements.
Who Should Use .NET Aspire?
.NET Aspire is ideal for developers who:
Want to build modern, distributed applications efficiently.
Seek the benefits of microservices architectures and cloud platforms.
Focus on building core business logic without infrastructure concerns.
Value improved observability and maintainability in their applications.
In this tutorial, we will learn a clean and simple way to implement Razor Page CRUD in Asp.Net Core with jQuery Ajax and Bootstrap Modal. This is the Entity Management Set of CRUD operations which doesn't reload the Pages, we can call it Single Page Application.
Table of Contents:
Scope
The Architecture
Getting Started with Razor Page CRUD in ASP.NET Core
Setting up the Project
Setting up the Core Layer
Setting up the Infrastructure Layer
Setting up the Asp.Net Core Project
Rendering Razor Partial View to String
Scope
There are the things we will be implementing in our CRUD Application. This will be an Employee Management System.
Data Annotations for Validations
jQuery Validations and Unobstructive Validations - Client Side Validations
Bootstrap Modal
Dyanamic Loading of Partial Views via Ajax Calls
Repository Pattern with Unit of. Work
Onion Architecture Solutions
jQuery Datatables
The Architecture
To keep things simple and clean we will be using onion architecture with inverted dependencies.
We will create three layers in this project repectively Web, Core and Infrastructure.
Getting Started with Razor Page CRUD in Asp.Net Core 3.1
Let's create the required projects, here I am creating the Web project first using Visual Studio 2019
for Mac.
Setting up the Projects
Setting up the Core Layer
Let's add a new project withing the same solution and name it Core. This will be created as .Net Core Library 3.1
Let's add two folders Entities and Interfaces in the Core Project. And under the Entities folder, create a new class and name it Employee
To follow the Repository pattern, we will add a new interface and name it IGenericRepositoryAsync under the Interfaces folder in Core Proejct Layer.
So we have a generic repository. now to use this generic interface for a specific entity like an employee along with extra methods, we will add a new interface and name it IEmployeeRepositoryAsync
Let's add the unit of work
We have completed everything for the Core Project Layer, now let's move to create Infrastructure Project Layer as we did for the Core Project layer.
Setting up the Infrastructure Project Layer
Let's install the below-required packages for Infrastructure Layer
Now that you have Entity Framework Core installed at the Infrastructure Layer, let’s add the ApplicationDbContext in-order to access the database. (We will be setting the connection string to the database later in this article at the Web Layer.)
Create a new Folder in the Infrastructure Layer and name it Data. Here add a new Class and name it ApplicationDbContext.cs
Add a new folder in the Infrastructure layer and name it Repositories. Here add a new class, GenericRepositoryAsync.cs
As you can see from the above, almost all the CRUD operations ever needed for any entity is covered. T could be any class and you already have an entire class that could Perform Create, Read, Update and Delete Operations on the T Entity. But also see that we are not saving anything directly to the database via the Repository Implementation. Rather we will have a separate class that is responsible for Committing changes to the database. You should have heard about Unit Of Work, yeah?
Create another new class and name it UnitOfWork.cs in the Infrastructure layer.
Let's add the last implementation which is responsible for performing the CRUD operations specific to Employee Entity.
Setting up the Asp.Net Core Project
Let's install the below-required packages for the Web project layer.
With that done, open up the Startup.cs. Here we will have to add the services/dependencies to our ASP.NET Core Container. Navigate to the ConfigureServices method and add the following. Note that you would have to fix the reference warnings that may occur.
We should add the connectionString in our appsettings.json file... So let's move to add ConnectionStrings
Let's install the jQuery Datatables into our Web project and add the reference for DataTables in _Layout.cshtml file as below.
Since we are already here, let’s also add the skeleton of the Bootstrap Modal that we are going to use further in the article. Above the footer tag, add the HTML for the Modal. Note that the Modal Body is empty. This is because we will be filling it dynamically via jQuery AJAX with Razor Partial Views.
There is already a site.js file under the wwwroot/js folder. So let's add the below code.
Here we'll add the 3 functions which will be required for CRUD operations and it's the important part of our project which allows us not to reload the pages.
GetAll() - Loads all the Employees from the database to the jQuery DataTables.
CreateOrEdit() - This functions do the Create or Edit an employee.
Delete() - It deletes an employee from the database.
Now the missing pieces to the puzzle are as follows:
1. Razor Partial View to Hold the jQuery Datatable.
2. Razor Partial View to Add / Edit Customer.
3. A way to convert Razor Views to String, so that jQuery AJAX can fetch this string and simply overwrite the existing div / DOM object on the HTML. (This was particularly tough to figure out.)
4. And finally, our C# Handler methods that will return the partial views as requested by the AJAX calls.
Let’s start with the _ViewAll.cshtml. This will hold the HTML table definition and also the script needed to activate jQuery Datatable. Under the Pages folder in the Web Project, Create a new Razor View (Empty) and name it _ViewAll.cshtml.
Next, Let’s create the Form, CreateOEdit that will have all the fields we require. This is again a straight forward piece of code snippet. Create a new Razor Page View (Empty) and name it _CreateOrEdit.cshtml and add in the following.
Now we required the partial views, so let's add the following code in our existing Index.cshtml file
Rendering Razor Partial View to String
Now, the question is, We have Razor Partial Views and AJAX, how do you convert Razor Partial Views to Strings / HTML. The answer is to create a service that can do so. In the Web Project add a new Folder and name it Services. And in it, create a new class and name it RazorRenderService.cs
Let's add the below services into the Startup.cs as in ConfigureServices method.
This is the final part of the puzzle. The actual Index.cs. Open it up and add the following.
Now you can build your all projects and run the application... :)