Click here to Skip to main content
15,867,308 members
Articles / Web Development / LESS

Instant Low Code Database Web App - ASP.NET Core 3.1 Single Page Application(SPA).

Rate me:
Please Sign up or sign in to vote.
4.96/5 (35 votes)
2 May 2020CPOL5 min read 79K   4.7K   108   50
A sample application code which is an alternative to using libraries such as AngularJS, React, Vue, etc. Only jQuery and bootstrap are used in conjunction with vanilla JavaScript, HTML and CSS.
This post shows how to generate a multi-layered web app instantly, directly from a database (SQL Server). It only uses jQuery & vanilla JavaScript, and does NOT use JavaScript libraries/frameworks, such as AngularJS, React, Vue, etc. Now includes demo and videos for Core3.1.

SPA

Click to see (animated image) - SPA Builder in Action

Demo Video/s

Web App Video - Part 1

Web App Video - Part 2

 

Introduction

A single-page application (SPA) is defined as a web application that fits on a single web page with the goal of providing a more pleasant user experience similar to a desktop application.
It can be used to create a fully blown business web application linked to a database or quickly create a web application that can traverse, search & report on a large database.

The following sample application code is an alternative to using libraries such as AngularJS, React, Vue, etc. Only jQuery and bootstrap are used in conjunction with vanilla JavaScript, HTML and CSS.

A very simple approach is used in overlaying div tags and Ajax calls, to read and update the database, without any Postback.
The Grid and Detail forms included in this application also contain simple CSS, to make them automatically resize to any mobile device, down to iPhone, etc. Using horizontal and vertical scrolling or swiping allows the user to quickly read all data columns and rows in a Grid.

Can redo Parent, Child and Grandchild CRUD grids, over and over, within seconds.

The included demo application can be opened from Visual Studio 2019. Just follow the provided database script file for creating the SQL Server database tables.

Grid Record Persistence on Edit/Add

This application can maintain and freeze updated or added record in large databases, by keeping the updated record instantly available, even if sorted column has been modified. Record kept currently available, until ready to do another search, and increases performance dramatically.

The sample application is written in ASP.NET Core 3.1 MVC C# and jQuery Ajax calls.

DotNetCore.NPOI and itext7.pdfhtml NuGet Packages are installed for Exporting PDF & Spreadsheets.

Steps Used to Create the Single Page Application (SPA)

Create Database in SQL Server Management Studio

Download SQL Server Express 2014, install locally and then Open.

VS

Right click on Databases and then choose New Database.
Add a new Database name of appAPP and click OK.

VS

Create database tables, Names, Client_Care and Client_Mngt, with a New Query.
Copy & paste DBSql.sql script file contents, from downloads.
Finally, click on the Execute (F5) button, then Refresh Tables.

VS

Created database tables Refreshed, shown.

Open Visual Studio Community 2019

Unzip demo Visual Studio solution and then open the appAPP.sln solution (i.e., appApp.zip).

VS

The appAPP project is shown.

Open and check the appsettings.json file, for your SQL Server settings.

VS

Make sure the connection string for the DefaultConnection is correct and save the file.

Create Identity Authentication

VS

Hit F5 to run the application.
Click on Register link in the header.

VS

Click Register, enter credentials and then click on Register.

VS

Because this is the first time the database is being used, you will see a message asking you to run the migration scripts that will create the database objects needed to support the user membership code.

Click the Apply Migrations button.

VS

An error message in red will come up. Everything is still OK.
Now just Refresh the page in the web browser.
This will cause the correct Identity database tables to be created in the appAPP database.

VS

Created database tables, shown, from SQL Server Management Studio.

Build SPA Multi-Layered Web Application

Open Visual Studio 2019 again.

Create Parent Table

VS

Hit F5 to run the application.
Click on the Add/Delete Parent Table link in the header.
Click on the Generate Code button, to start building all the code for the Parent table CRUD.
This will take only a few seconds.

VS

To finally see built Parent Grid, Exit Browser, to go back to Visual Studio.
Wait while project is refreshed and then Hit F5 again (Rebuild will occur).

VS

Click on the Names link in the header, to display the Parent screen.

VS

As there are no Names found, then click on the Add Names button.

VS

Enter Names fields and then click on the Save button.
Validation rules apply via JavaScript and server side.

VS

After entering 3 Names records, the Parent Grid (Names) is displayed. The Grid has full CRUD functionality, as well as Exporting to PDF & Spreadsheet.

Create Child Table

VS

Will now add a new Child table Tab.
Click on any Detail button in the Parent Grid of records.

VS

Click on the Generate Code button, to start building all the code for the Child table CRUD.
This will take only a few seconds.

VS

To see finally built Child Grid, Exit Browser, to go back to Visual Studio.
Wait while project is refreshed and then Hit F5 again (Rebuild will occur).

VS

Click on any Detail button in the Parent Grid, to see the new Child Tab (Client_Care).

VS

As there is no Child (Client_Care) records found, then click on the Add Client_Care button.

VS

Enter Client_Care fields and then click on the Save button.
Validation rules apply via JavaScript and server side.

VS

After entering 2 Client_Care records, the Child Tab Grid is displayed.
The Grid has full CRUD functionality, as well as Exporting to PDF & Spreadsheet.

VS

You can click on the Del button, to delete the Child tab (Client_Care) to the left. You are given a second chance.

Clicking on the Add Child button, adds up to 6 more Child table Tabs, for the Parent.

VS

To finalize the deletion of the Child Grid, exit Browser, to go back to Visual Studio.
Hit F5 again.

Create GrandChild Table

VS

Will now add a new GrandChild table Tab.
Click on any Detail button in the Child Grid of records.

Repeat Create Child Steps above.

NOTE: Child and GrandChild Grid Tabs can be added and deleted, as many times as you want, until application is to your liking.

Demo Video

Below are demo YouTube videos, showing the main features of this application in action:

Points of Interest

  • Single Page Application, that does NOT use JavaScript libraries, such as AngularJS, React, Vue, etc.
  • Generates a modern business Rich Internet web app instantly, directly from your database
  • Can Add and Delete CRUD grids over again and again
  • It also has normal browser back and forward navigation
  • Instantly search and drill down multiple tables in a database
  • Identity login functionality security
  • Add and Update forms validation
  • Export PDF Reports and Spreadsheets
  • Can easily change look and feel
  • All code fully tested and verified on Azure

History

  • 25th August, 2019: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



Comments and Discussions

 
QuestionHow do I add more than 4 fields for the parent or child pages? Pin
IndyGJ26-Jun-20 11:33
IndyGJ26-Jun-20 11:33 
AnswerRe: How do I add more than 4 fields for the parent or child pages? Pin
Kalvin Lawrence Ernst13-Jul-20 12:38
professionalKalvin Lawrence Ernst13-Jul-20 12:38 
QuestionThese are NOT the Droids you're looking for... Pin
Dewey10-May-20 14:17
Dewey10-May-20 14:17 
QuestionWhat are the 3 .DLL's Pin
George Sheehy5-May-20 7:08
professionalGeorge Sheehy5-May-20 7:08 
AnswerRe: What are the 3 .DLL's Pin
Kalvin Lawrence Ernst5-May-20 17:15
professionalKalvin Lawrence Ernst5-May-20 17:15 
QuestionMore Colums Pin
Member 115570334-May-20 3:48
Member 115570334-May-20 3:48 
AnswerRe: More Colums Pin
Kalvin Lawrence Ernst5-May-20 17:16
professionalKalvin Lawrence Ernst5-May-20 17:16 
QuestionNice idea, but no working code!!! Pin
pvatsa19-Apr-20 20:07
pvatsa19-Apr-20 20:07 
AnswerRe: Nice idea, but no working code!!! Pin
Kalvin Lawrence Ernst21-Apr-20 11:46
professionalKalvin Lawrence Ernst21-Apr-20 11:46 
I am working a new version.


Will have it ready soon.

Cheers.
AnswerRe: Nice idea, but no working code!!! Pin
Kalvin Lawrence Ernst3-May-20 12:08
professionalKalvin Lawrence Ernst3-May-20 12:08 
PraiseTop 1% Pin
Member 1340408615-Mar-20 22:56
Member 1340408615-Mar-20 22:56 
QuestionWhere I can find source code for this project Pin
cedey14-Mar-20 21:22
cedey14-Mar-20 21:22 
AnswerRe: Where I can find source code for this project Pin
KansasCoder18-Mar-20 17:23
KansasCoder18-Mar-20 17:23 
GeneralRe: Where I can find source code for this project Pin
Kalvin Lawrence Ernst13-Apr-20 12:46
professionalKalvin Lawrence Ernst13-Apr-20 12:46 
GeneralRe: Where I can find source code for this project Pin
KansasCoder14-Apr-20 13:15
KansasCoder14-Apr-20 13:15 
GeneralRe: Where I can find source code for this project Pin
KansasCoder19-Mar-21 15:44
KansasCoder19-Mar-21 15:44 
AnswerRe: Where I can find source code for this project Pin
Kalvin Lawrence Ernst13-Apr-20 12:46
professionalKalvin Lawrence Ernst13-Apr-20 12:46 
GeneralRe: Where I can find source code for this project Pin
Member 796322620-Apr-20 4:51
Member 796322620-Apr-20 4:51 
GeneralRe: Where I can find source code for this project Pin
Kalvin Lawrence Ernst21-Apr-20 11:44
professionalKalvin Lawrence Ernst21-Apr-20 11:44 
AnswerRe: Where I can find source code for this project Pin
Kalvin Lawrence Ernst3-May-20 12:08
professionalKalvin Lawrence Ernst3-May-20 12:08 
QuestionYup link to core3.1 version is busted for me too Pin
madheaduk12-Mar-20 5:04
madheaduk12-Mar-20 5:04 
AnswerRe: Yup link to core3.1 version is busted for me too Pin
Kalvin Lawrence Ernst12-Mar-20 11:50
professionalKalvin Lawrence Ernst12-Mar-20 11:50 
GeneralRe: Yup link to core3.1 version is busted for me too Pin
George Sheehy13-Mar-20 14:19
professionalGeorge Sheehy13-Mar-20 14:19 
GeneralRe: Yup link to core3.1 version is busted for me too Pin
Likefire15-Mar-20 6:25
Likefire15-Mar-20 6:25 
QuestionLow Code? Pin
frazGJF11-Mar-20 16:19
frazGJF11-Mar-20 16:19 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.