Click to see (animated image) - SPA Builder in Action
单击查看(动画图像)-运行中的SPA Builder
演示视频 (Demo Video/s)
介绍 (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.
单页应用程序(SPA)定义为适合单个网页的Web应用程序，其目的是提供与桌面应用程序类似的更愉快的用户体验。 它可用于创建链接到数据库的功能完善的业务Web应用程序，或快速创建可在大型数据库中进行遍历，搜索和报告的Web应用程序。
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.
以下示例应用程序代码是使用AngularJS，React，Vue等库的替代方法。仅jQuery和bootstrap与原始JavaScript，HTML和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.
一种非常简单的方法用于覆盖div标签和Ajax调用，以读取和更新数据库，而无需任何回发。 此应用程序中包括的“网格和详细信息”表单还包含简单CSS，以使它们自动调整大小以适应任何移动设备，缩小至iPhone等。使用水平和垂直滚动或滑动操作，用户可以快速读取菜单中所有数据列和行格。
Can redo Parent, Child and Grandchild CRUD grids, over and over, within seconds.
可以在几秒钟内一次又一次地重做Parent ， Child和孙子 CRUD网格 。
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.
可以从Visual Studio 2019中打开包含的演示应用程序。只需遵循提供的数据库脚本文件来创建SQL Server数据库表。
网格记录在编辑/添加上的持久性 (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.
该示例应用程序是用ASP.NET Core 3.1 MVC C＃和jQuery Ajax调用编写的。
DotNetCore.NPOI and itext7.pdfhtml NuGet Packages are installed for Exporting PDF & Spreadsheets.
安装了DotNetCore.NPOI和itext7.pdfhtml NuGet软件包以导出PDF和电子表格。
用于创建单页应用程序(SPA)的步骤 (Steps Used to Create the Single Page Application (SPA))
在SQL Server Management Studio中创建数据库 (Create Database in SQL Server Management Studio)
Download SQL Server Express 2014, install locally and then Open.
下载SQL Server Express 2014 ，在本地安装，然后打开。
Right click on Databases and then choose New Database. Add a new Database name of appAPP and click OK.
右键单击“ 数据库” ，然后选择“ 新建数据库” 。 添加新的appAPP 数据库名称 ，然后单击“ 确定” 。
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.
使用New Query创建数据库表Names ， Client_Care和Client_Mngt 。 从下载中复制并粘贴DBSql.sql脚本文件内容。 最后，单击“ 执行 (F5)”按钮，然后单击“刷新表”。
Created database tables Refreshed, shown.
显示刷新的创建的数据库表。
打开Visual Studio社区2019 (Open Visual Studio Community 2019)
Unzip demo Visual Studio solution and then open the appAPP.sln solution (i.e., appApp.zip).
解压缩演示Visual Studio解决方案，然后打开appAPP.sln解决方案(即appApp.zip )。
The appAPP project is shown.
显示了appAPP项目 。
Open and check the appsettings.json file, for your SQL Server settings.
打开并检查appsettings.json文件中SQL Server设置。
Make sure the connection string for the DefaultConnection is correct and save the file.
确保DefaultConnection的连接字符串正确，然后保存文件。
创建身份认证 (Create Identity Authentication)
Hit F5 to run the application. Click on Register link in the header.
按F5键运行该应用程序。 单击标题中的“ 注册”链接。
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.
出现红色错误消息。 一切都还好。 现在，只需在Web浏览器中刷新页面即可。 这将导致在appAPP数据库中创建正确的身份数据库表。
Created database tables, shown, from SQL Server Management Studio.
如图所示，是从SQL Server Management Studio创建的数据库表。
构建SPA多层Web应用程序 (Build SPA Multi-Layered Web Application)
Open Visual Studio 2019 again.
再次打开Visual Studio 2019。
创建父表 (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.
按F5键运行该应用程序。 单击标题中的“ 添加/删除父表”链接。 单击生成代码按钮，开始Parent表CRUD构建所有代码。 这仅需几秒钟。
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).
要最终看到内置的父网格 ，请退出浏览器，以返回到Visual Studio。 等待项目刷新，然后再次单击F5 (将进行重建)。
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.
输入名称字段，然后单击保存按钮。 验证规则通过JavaScript和服务器端应用。
After entering 3 Names records, the Parent Grid (Names) is displayed. The Grid has full CRUD functionality, as well as Exporting to PDF & Spreadsheet.
输入3个名称记录后，将显示“ 父网格(名称)”。 网格具有完整的CRUD功能，以及导出到PDF和电子表格。
创建子表 (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.
单击生成代码按钮，开始为子表CRUD构建所有代码。 这仅需几秒钟。
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).
若要查看最终构建的Child Grid ，请退出浏览器，以返回到Visual Studio。 等待项目刷新，然后再次单击F5 (将进行重建)。
Click on any Detail button in the Parent Grid, to see the new Child Tab (Client_Care).
单击父网格中的任何详细信息按钮，以查看新的子选项卡( Client_Care )。
As there is no Child (Client_Care) records found, then click on the Add Client_Care button.
由于没有儿童 ( Client_Care )记录发现，然后点击Add按钮Client_Care。
Enter Client_Care fields and then click on the Save button. Validation rules apply via JavaScript and server side.
输入Client_Care字段，然后单击“ 保存”按钮。 验证规则通过JavaScript和服务器端应用。
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.
输入2条Client_Care记录后，将显示“ 子选项卡”网格。 网格具有完整的CRUD功能，以及导出到PDF和电子表格。
You can click on the Del button, to delete the Child tab (Client_Care) to the left. You are given a second chance.
您可以点击删除按钮，删除该子选项卡( Client_Care )左侧。 给您第二次机会。
Clicking on the Add Child button, adds up to 6 more Child table Tabs, for the Parent.
单击“ 添加子项”按钮，为“父项”最多添加6个子表选项卡。
To finalize the deletion of the Child Grid, exit Browser, to go back to Visual Studio. Hit F5 again.
要完成对子网格的删除，请退出浏览器，返回到Visual Studio。 再按一次F5 。
创建GrandChild表 (Create GrandChild Table)
Will now add a new GrandChild table Tab. Click on any Detail button in the Child Grid of records.
现在将添加一个新的GrandChild表Tab。 单击子记录网格中的任何详细信息按钮。
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.
注意 ：可以根据需要随意添加和删除“ Child和“ GrandChild网格选项卡，直到您喜欢为止。
示范影片 (Demo Video)
Below are demo YouTube videos, showing the main features of this application in action:
以下是YouTube演示视频，展示了此应用程序的主要功能：
Web App Video - App in Action
网络应用视频 -应用中的应用
兴趣点 (Points of Interest)
Single Page Application, that does NOT use JavaScript libraries, such as AngularJS, React, Vue, etc.
单页应用程序， 不使用JavaScript库，例如AngularJS，React，Vue等。
- Generates a modern business Rich Internet web app instantly, directly from your database 直接从您的数据库立即生成现代商务Rich Internet Web应用程序
- Can Add and Delete CRUD grids over again and again 可以一次又一次地添加和删除CRUD网格
- 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 导出PDF报告和电子表格
- Can easily change look and feel 可以轻松改变外观
- All code fully tested and verified on Azure 所有代码均在Azure上经过全面测试和验证
翻译自: https://www.codeproject.com/Articles/5165703/Instant-Low-Code-Database-Web-App-ASP-NET-Core-3-1
7747
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
