Click here to Skip to main content
14,386,278 members

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

Rate this:
5.00 (21 votes)
Please Sign up or sign in to vote.
5.00 (21 votes)
5 Dec 2019CPOL
Generate a multi-layered web app instantly, directly from a database (SQL Server). Only uses jQuery & vanilla JavaScript, and does NOT use JavaScript libraries/frameworks, such as AngularJS, React, Vue, etc. Now includes demos for Core 2.2, Core3.0 and Core3.1

SPA

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

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 2.2 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)

Share

About the Author

Kalvin Lawrence Ernst
Software Developer (Senior) KalFabriq
Australia Australia
Many years experience in developing software for Government, Health, Biotech enterprises.
Early adopter of .NET platform, with over 10 years hands-on experience in ASP.NET.
Solid track record of successful project management and technology implementation.
Highly skilled in SQL Server and Oracle, design, installation and management.
Proficient in gathering user’s requirements and writing technical specifications.
Conducted training in various technologies and acted as a mentor.

Have recently developed an ASP.NET MVC code generator tool to fast track the development of
common application functions.

Comments and Discussions

 
GeneralMy vote of 5 Pin
Member 123643901-Dec-19 22:39
MemberMember 123643901-Dec-19 22:39 
GeneralRe: My vote of 5 Pin
Kalvin Lawrence Ernst2-Dec-19 11:34
professionalKalvin Lawrence Ernst2-Dec-19 11:34 
GeneralRe: My vote of 5 Pin
Member 123643902-Dec-19 22:31
MemberMember 123643902-Dec-19 22:31 
GeneralLinked demo video seems not related to the article Pin
Gustav Brock5-Sep-19 0:52
professionalGustav Brock5-Sep-19 0:52 
GeneralRe: Linked demo video seems not related to the article Pin
Kalvin Lawrence Ernst5-Sep-19 14:56
professionalKalvin Lawrence Ernst5-Sep-19 14:56 
GeneralRe: Linked demo video seems not related to the article Pin
Gustav Brock5-Sep-19 20:41
professionalGustav Brock5-Sep-19 20:41 
QuestionNice Pin
Kishore Nethala3-Sep-19 0:04
MemberKishore Nethala3-Sep-19 0:04 
QuestionAmazing! Pin
Chairman2-Sep-19 18:47
MemberChairman2-Sep-19 18:47 
AnswerRe: Amazing! Pin
Kalvin Lawrence Ernst2-Sep-19 18:57
professionalKalvin Lawrence Ernst2-Sep-19 18:57 
PraiseMasterpiece Pin
Member 119865102-Sep-19 12:38
MemberMember 119865102-Sep-19 12:38 
GeneralRe: Masterpiece Pin
Kalvin Lawrence Ernst2-Sep-19 18:38
professionalKalvin Lawrence Ernst2-Sep-19 18:38 
PraiseExcellent article Pin
ipndmr130-Aug-19 6:40
Memberipndmr130-Aug-19 6:40 
Praisepraise Pin
Regarder Filmzenstream VF Film 29-Aug-19 21:25
MemberRegarder Filmzenstream VF Film 29-Aug-19 21:25 
QuestionI agree Pin
MorneDC29-Aug-19 1:11
professionalMorneDC29-Aug-19 1:11 
QuestionLow Code Web App Constructor - ASP.NET Core 2.2 Single Page Application(SPA) Pin
Member 1457187928-Aug-19 23:16
MemberMember 1457187928-Aug-19 23:16 
AnswerRe: Low Code Web App Constructor - ASP.NET Core 2.2 Single Page Application(SPA) Pin
cocis4829-Aug-19 14:19
Membercocis4829-Aug-19 14:19 
GeneralRe: Low Code Web App Constructor - ASP.NET Core 2.2 Single Page Application(SPA) Pin
Kalvin Lawrence Ernst29-Aug-19 19:29
professionalKalvin Lawrence Ernst29-Aug-19 19:29 

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.

Article
Posted 27 Aug 2019

Stats

6.3K views
1.9K downloads
53 bookmarked