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.
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.
Right click on Databases and then choose New Database.
Add a new Database name of appAPP and click OK.
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.
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).
The appAPP project is shown.
Open and check the appsettings.json file, for your SQL Server settings.
Make sure the connection string for the DefaultConnection is correct and save the file.
Create Identity Authentication
Hit F5 to run the application.
Click on Register link in the header.
Click Register, enter credentials and then click on Register.
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.
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.
Created database tables, shown, from SQL Server Management Studio.
Build SPA Multi-Layered Web Application
Open Visual Studio 2019 again.
Create Parent Table
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.
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).
Click on the Names link in the header, to display the Parent screen.
As there are no Names found, then click on the Add Names button.
Enter Names fields and then click on the Save button.
Validation rules apply via JavaScript and server side.
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
Will now add a new Child table Tab.
Click on any Detail button in the Parent Grid of records.
Click on the Generate Code button, to start building all the code for the Child table CRUD.
This will take only a few seconds.
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).
Click on any Detail button in the Parent Grid, to see the new Child Tab (Client_Care).
As there is no Child (Client_Care) records found, then click on the Add Client_Care button.
Enter Client_Care fields and then click on the Save button.
Validation rules apply via JavaScript and server side.
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.
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.
To finalize the deletion of the Child Grid, exit Browser, to go back to Visual Studio.
Hit F5 again.
Create GrandChild Table
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
