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. The ultimate aim is to build an Entity Management Set of Operations (CRUD) that doesn’t reload pages. We will be achieving this with the help of ASP.NET Core Razor Page, Razor Partial View, JQuery AJAX calls so that you would never have to see your page reload again but everything would just work flawlessly. You can find the complete source code here.
So everything started when I was building the ASP.NET Core Hero – Boilerplate Template. My requirement was quite simple. In the UI Layer, which is ASP.NET Core Razor Pages, I wanted to implement CRUD with the User Experience of a SPA. Meaning, never reload the page but load partial views and modals, you get the point, yeah? Rich User Experience and Blazing Fast Speeds were what I had in mind. But guess what, there was absolutely no other tutorials or references that matched to what I actually wanted. And I ended up researching over it for a couple of days and finally got it to work. So, I decided to document it for others to refer to. Here is what we will be building.
PRO TIP – This is an in-depth article with steps that can get you started from scratch to a complete application which covers many related concepts. Do not forget to bookmark this page for future reference.
Table of Contents
- Scope
- The Architecture
- Getting Started with Razor Page CRUD in ASP.NET Core
- Setting up the Projects
- Setting up the Core Layer
- Setting up the Infrastructure Layer
- Setting up the ASP.NET Core Project
- Rendering Razor Partial View to String
- Summary
Scope
These are the things we will be implementing in our CRUD Application. Note that this will be a Customer Management Application.
- Data Annotations for Validations
- jQuery Validations and Unobstructive Validations – Client Side Validation
- Bootstrap Modals
- Dynamic Loading of Partial Views via AJAX Calls
- Repository Pattern with Unit of Work
- Onion Architecture Solution
- jQuery Datatables
The Architecture
To Keep things Simple and Clean we will be using Onion Architecture with Inverted Dependencies. We will have 3 Layers out of which the Primary one is an ASP.NET Core Web Application with Razor Pages and the other two are the Core and Infrastructure Layer. Core Layer will have the Interfaces and Entities while the Infrastructure Layer will have Entity Framework Core, Repository and Unit Of Work Implementations. At the Web Project we will use jQuery Ajax and Partials Views along with jQuery Datatable to build a super cool CRUD Application. Let’s get started!
If you are interested to read about Onion Architecture in depth, please refer to this article – Onion Architecture In ASP.NET Core With CQRS – Detailed . Also, there is a full-fledged WebAPI Clean Architecture template with which you can install and build API projects in no time (Open Source). Get it here.
#asp.net core
