即时低代码数据库Web应用 - ASP.NET Core 3.1单页应用(SPA)。
4.96/5 (35投票s)
一个示例应用程序代码，可替代使用AngularJS、React、Vue等库。仅使用jQuery和bootstrap，并结合原生JavaScript、HTML和CSS。
点击查看（动态图） - SPA构建器实际操作
演示视频
引言
单页应用（SPA）被定义为一个Web应用，它只占用一个网页，目标是提供与桌面应用类似的更愉悦的用户体验。
它可以用于创建与数据库连接的完整的商业Web应用，或者快速创建能够遍历、搜索和报告大型数据库的Web应用。
以下示例应用程序代码是替代使用AngularJS、React、Vue等库的一种方法。仅使用jQuery和bootstrap，并结合原生JavaScript、HTML和CSS。
采用了一种非常简单的方法，通过叠加div标签和Ajax调用来读取和更新数据库，而无需任何回发。
此应用程序中包含的Grid和Detail表单也包含简单的CSS，使其能够自动调整大小以适应任何移动设备，小至iPhone等。通过水平和垂直滚动或滑动，用户可以快速读取Grid中的所有数据列和行。
可以在几秒钟内反复重做父级、子级和孙级CRUD Grid。
包含的演示应用程序可以从Visual Studio 2019打开。只需按照提供的数据库脚本文件创建SQL Server数据库表即可。
Grid记录在编辑/添加时的持久化
此应用程序可以通过即时访问更新的记录来维护和冻结大型数据库中的更新或添加的记录，即使排序的列已修改。记录保持当前可用，直到准备进行另一次搜索，这会大大提高性能。
示例应用程序使用ASP.NET Core 3.1 MVC C#和jQuery Ajax调用编写。
已安装DotNetCore.NPOI和itext7.pdfhtml NuGet程序包，用于导出PDF和电子表格。
创建单页应用（SPA）的步骤
在SQL Server Management Studio中创建数据库
下载SQL Server Express 2014，本地安装然后打开。
右键单击数据库，然后选择新建数据库。
将数据库名称设置为appAPP，然后单击确定。
使用新建查询创建数据库表，Names、Client_Care和Client_Mngt。
从下载中复制并粘贴DBSql.sql脚本文件内容。
最后，单击执行（F5）按钮，然后刷新表。
已创建的数据库表已刷新，如图所示。
打开Visual Studio Community 2019
解压演示Visual Studio解决方案，然后打开appAPP.sln解决方案（即appApp.zip）。
显示appAPP项目。
打开并检查appsettings.json文件，以获取您的SQL Server设置。
确保DefaultConnection的连接字符串正确，然后保存文件。
创建身份验证
按F5运行应用程序。
单击标头中的注册链接。
单击注册，输入凭据，然后单击注册。
由于这是数据库首次使用，您将看到一条消息，要求您运行迁移脚本，这些脚本将创建支持用户成员代码所需的数据库对象。
单击应用迁移按钮。
将出现一个红色的错误消息。一切仍然正常。
现在只需在Web浏览器中刷新页面。
这将导致在appAPP数据库中创建正确的Identity数据库表。
已创建数据库表，如图所示，来自SQL Server Management Studio。
构建SPA多层Web应用程序
再次打开Visual Studio 2019。
创建父表
按F5运行应用程序。
单击标头中的添加/删除父表链接。
单击生成代码按钮，开始为Parent表构建所有CRUD代码。
这只需要几秒钟。
要最终看到已构建的父Grid，请退出浏览器，返回Visual Studio。
等待项目刷新，然后再次按F5（将执行重新生成）。
单击标头中的Names链接，以显示父级屏幕。
由于找不到任何名称，请单击添加名称按钮。
输入名称字段，然后单击保存按钮。
验证规则通过JavaScript和服务器端应用。
在输入3条名称记录后，将显示父级Grid（Names）。Grid具有完整的CRUD功能，以及导出到PDF和电子表格的功能。
创建子表
现在将添加一个新的子表选项卡。
单击父Grid记录中的任何详细信息按钮。
单击生成代码按钮，开始为子表CRUD构建所有代码。
这只需要几秒钟。
要最终看到已构建的子Grid，请退出浏览器，返回Visual Studio。
等待项目刷新，然后再次按F5（将执行重新生成）。
单击父Grid中的任何详细信息按钮，以查看新的子选项卡（Client_Care）。
由于找不到任何子级（Client_Care）记录，请单击添加Client_Care按钮。
输入Client_Care字段，然后单击保存按钮。
验证规则通过JavaScript和服务器端应用。
在输入2条Client_Care记录后，将显示子级选项卡Grid。
Grid具有完整的CRUD功能，以及导出到PDF和电子表格的功能。
您可以单击删除按钮来删除左侧的子选项卡（Client_Care）。您将有机会进行二次确认。
单击添加子级按钮，最多可以为父级添加6个更多的子表选项卡。
要最终删除子Grid，请退出浏览器，返回Visual Studio。
再次按F5。
创建孙子表
现在将添加一个新的GrandChild表选项卡。
单击子Grid记录中的任何详细信息按钮。
重复上面的创建子步骤.
注意：子级和孙子级Grid选项卡可以根据需要添加和删除任意多次，直到应用程序符合您的要求为止。
演示视频
以下是演示YouTube视频，展示了此应用程序的主要功能。
- Web应用视频 - 应用实际操作
关注点
- 单页应用，它不使用JavaScript库，如AngularJS、React、Vue等。
- 直接从数据库即时生成现代化的业务富互联网Web应用。
- 可以反复添加和删除CRUD Grid。
- 它还具有正常的浏览器后退和前进导航。
- 即时搜索并深入多个数据库表。
- 身份登录功能安全。
- 添加和更新表单验证。
- 导出PDF报告和电子表格。
- 可以轻松更改外观和感觉。
- 所有代码均在Azure上经过全面测试和验证。
历史
- 2019年8月25日：初始版本