目录
在SQL Server Management Studio中创建数据库
打开Visual Studio Community 2019
单击查看（动画图像）-SPA Builder实际运行
介绍
单页应用程序（SPA）定义为适合单个网页的Web应用程序，其目的是提供与桌面应用程序类似的更愉快的用户体验。
它可用于创建链接到数据库的功能完善的业务Web应用程序，或快速创建可在大型数据库上进行遍历、搜索和报告的Web应用程序。
以下示例应用程序代码是使用AngularJS，React，Vue等库的替代方法。仅jQuery和bootstrap与原始JavaScript，HTML和CSS结合使用。
一种非常简单的方法用于覆盖div标记和Ajax调用，以读取和更新数据库，而无需任何回发。
此应用程序中包含的网格(Grid)和细节表单还包含简单的CSS，使它们能够自动调整大小以适应任何移动设备，甚至iPhone等。使用水平和垂直滚动或滑动操作，用户可以快速读取网格(Grid)中的所有数据列和行。
可以在几秒钟内重复父级、子级和孙级CRUD网格(Grid)。
可以从Visual Studio 2019中打开包含的演示应用程序。只需遵循提供的数据库脚本文件来创建SQL Server数据库表。
网格记录在编辑/添加上的持久性
该应用程序可以通过保持即时更新的记录（即使已修改排序的列）来维护和冻结大型数据库中的更新或添加的记录。记录保持当前可用，直到准备进行另一次搜索为止，并显著提高了性能。
该示例应用程序是用ASP.NET Core 2.2 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解决方案的demo，然后打开appAPP.sln解决方案（即appApp.zip）。
显示了appAPP项目。
打开并检查appsettings.json文件中的SQL Server设置。
确保连接字符串的DefaultConnection是正确的，保存的文件。
创建身份认证
按F5键运行该应用程序。
单击标题中的“注册”链接。
单击注册，输入凭据，然后单击注册。
因为这是第一次使用数据库，所以您将看到一条消息，要求您运行迁移脚本，该脚本将创建支持用户成员资格代码所需的数据库对象。
单击“应用迁移”按钮。
出现红色错误消息。一切都还好。
现在，只需在Web浏览器中刷新页面即可。
这将导致在数据库中创建正确的身份(Identity)数据库表appAPP。
如图所示，从SQL Server Management Studio创建的数据库表。
构建SPA多层Web应用程序
再次打开Visual Studio 2019。
创建父表
按F5键运行该应用程序。
单击标题中的“添加/删除父表”链接。
单击Generate Code按钮，开始为Parent表CRUD 构建所有代码。
这仅需几秒钟。
要最终看到已构建的父网格(Parent Grid)，请退出浏览器，以返回到Visual Studio。
等待项目刷新，然后再次单击F5（将进行重新构建）。
单击标题中的“名称”链接，以显示“Parent”屏幕。
由于没有找到名称，因此单击“添加名称”按钮。
输入名称字段，然后单击保存按钮。
验证规则通过JavaScript和服务器端应用。
输入3个名称记录后，将显示“父级网格（名称）”。网格(Grid )具有完整的CRUD功能，以及导出到PDF和电子表格的功能。
创建子表
现在将添加一个新的子表选项卡。
单击记录的父网格中的任何“详细信息”按钮。
单击生成代码按钮，开始为子表CRUD构建所有代码。
这仅需几秒钟。
若要查看最终构建的Child Grid，请退出浏览器，以返回Visual Studio。
等待项目刷新，然后再次单击F5（将进行重新构建）。
单击父网格中的任何详细信息按钮，以查看新的子选项卡（Client_Care）。
由于没有Child（Client_Care）条记录，然后点击添加Client_Care按钮。
输入Client_Care字段，然后单击“保存”按钮。
验证规则通过JavaScript和服务器端应用。
输入2 Client_Care条记录后，将显示子选项卡网格。
网格具有完整的CRUD功能，以及导出到PDF和电子表格的功能。
您可以点击Del按钮，删除该子选项卡（Client_Care）到左边。给您第二次机会。
单击“添加子项”按钮，为“父级”最多添加6个子表选项卡。
要完成对Child Grid的删除，请退出浏览器，返回到Visual Studio。
再按一次F5。
创建GrandChild表
现在将添加一个新GrandChild表选项卡。
单击子记录网格(Grid)中的任何详细信息按钮。
重复上述创建子步骤。
注意：Child和GrandChild Grid Tabs可以随意添加和删除，直到您喜欢该应用程序为止。
Demo视频
以下是YouTube演示视频，展示了此应用程序的主要功能：
- Web App视频 -应用程序在行动
兴趣点
- 单页应用程序，但这不使用JavaScript库，比如AngularJS、React、Vue等等。
- 直接从您的数据库立即生成现代商务丰富的Internet Web应用程序
- 可以一次又一次地添加和删除CRUD网格(Grid)
- 它还具有正常的浏览器前后导航
- 即时搜索和追溯数据库中的多个表
- 身份登录功能安全
- 添加和更新表单验证
- 导出PDF报告和电子表格
- 可以轻松改变外观
- 所有代码均在Azure上经过全面测试和验证
