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