介绍

本文主要介绍使用SQL数据库表和MVC API在服务器上使用 json对象管理数据表记录。本教程适用于初学者/新手或学生。我已经为表在Angular JS中创建了CRUD功能。我还用一页代码说明了所有数据操作。希望以高级模式在程序中添加数据表对您有所帮助。

Angular Js代码要点

ng-app——此伪指令用于引导应用程序。通常，它放在诸如html或body标签的顶级元素中。
ng-controller——它是AngularJS的主要组件，包含状态和逻辑。它充当服务和视图之间的桥梁。
$scope——它提供了数据和视图之间的链接。它保存了视图所需的所有数据，并在HTML模板中使用。
{{expression}}——称为表达式，可以在其中编写类似JavaScript的代码。它应主要用于HTML页面中的小操作。
ng-init——该指令为我们提供了一种在页面上初始化变量的方法。
ng-repeat——实际上，它根据提供的数据列表重复使用的元素。在我们的示例中，persons是一个包含人员列表的JSON对象。
$http——它可以启动对服务器的AJAX请求并获得响应。这是Angular的核心服务。

示例截图

扫描二维码关注公众号，回复： 8739141 查看本文章

第一部分

第一部分显示了代码部分的简短视图。我们创建ng-app myApp并在主体部分创建ng-controller myTableCtrl。ng-app和ng-controller两个都属于angular JS的两个主要部分。头标签中的另一个标签包括angular.min.js和链接bootstrap.min.css，以运行Angular js功能和设计CSS。在HTML中，我们使用angular.module()函数添加获取angular app的代码，以便可以使用"appName".controller()函数访问控制器。接下来，我们创建JSON对象数组它的名字是填写表格的persons。此外，添加三种函数管理表记录，其名称是Save()，RecEdit()以及RecDel()。

在这里，我们创建了一个空的json对象数组，其名称为persons=[]。我还添加了两个新函数来调用API，它们的名称分别是GetRecords()和SaveRecords()，它们接收参数json对象。这两个函数都有带着post方法的$http请求，并调用Web API URL来读取或保存表数据。在本例中，我们使用IIS服务器localhost，应用程序名称为mywapi。

您已经看到在Angular js中，您可以使用$scope来访问任何函数或变量。但是函数GetRecords() 和SaveRecords()是与$scope无关的，因为它是本地函数，可以调用Web API。json中的功能参数为{"StrQry":"Query String"}。例如“ {'StrQry':'SELECT * FROM [TblPerson]'}”。我们将解释函数Save()、RecEdit()以及RecDel()。函数Save()检查行的键，如果大于0，则更新记录，否则使用Web API功能在数据表中添加新记录。这里$scope.per是一个JSON对象。这个空的json对象是ng-controller的一部分，它可以从ng-init='per={}'中的person里获得。

在HTML代码部分中，此部分提供了三个div。第一个div标签显示页面标题，第二个div标签显示人员表单，第三个div标签显示表格部分。在第二个div标签中，我们使用以红色矩形显示的angular js指令ng-init='per={}'对空的json对象进行初始化。接下来，我们在表单中的输入控件中使用ng-model指令，并通过指令ng-click在Angular js中获取按钮事件。现在最后，我们将讨论AngularJS中的主要部分数据表。ng-repeat指令用于在json对象数组中显示项。ng-repeat指令就像一个循环。利用ng-repeat显示在表格格式数组中的所有项。

第二部分（ASP.NET MVC WEB API和数据表）

现在，我们创建ASP.NET MVC API应用程序。ASP.NET Web API解决方案结构如下。要添加App_Code文件夹，请右键单击项目--->添加--->添加ASP.NET文件夹->选择App_Code。我们在App_Code文件夹中创建了两个CS类，名称分别为TblCUD.cs和TestDataLayer.cs。TblCUD.cs只有一个get，set属性用于接收JSON字符串，其名称为StrQry。接下来，TestDataLayer.cs有三个函数，首先与从web.config获取连接字符串有关。您需要根据本地环境进行更改。另外两个函数与访问SQL客户端和用于表数据记录操作的连接有关。

接下来，添加新的Web API控制器，在本例中为DefaultController。它具有四个API函数。第一个是根据get要求进行测试的。另外两个函数有post请求接收与数据表有关的操作。函数是使用MSSQL数据表来保存记录。另外，您需要在SQL Server数据库中创建数据表。在我们的例子中，表名称为TblPerson，结构如下所示：

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[TblPerson](
	[Id] [int] IDENTITY(1,1) NOT NULL,
	[Name] [varchar](20) NOT NULL,
	[Age] [int] NOT NULL,
	[City] [varchar](20) NOT NULL,
CONSTRAINT [PK_TblPerson] PRIMARY KEY CLUSTERED 
(
	[Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, _
                        ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO

第三部分（关于Postman发布和测试API）

为了节省您的时间，我请求下载我们的应用程序源代码并发布在您的本地IIS服务器上。打开Web API应用程序，右键单击项目，然后单击“发布操作”并按照说明进行操作。只需打开IIS服务器，然后下一步，右键单击默认网站图标->添加应用程序--->提供应用程序别名->选择发布的路径位置->确定。

再次重复相同的过程，以在本地IIS服务器上发布Angular js应用程序。

现在，我们的下一步是通过Postman测试我们的API。您需要从网络上下载Postman客户端并安装在Google Chrome中。然后，您必须添加请求GET或POST和API URL。在我们的示例中，首先我们检查GET发布的API的请求方法。Get请求方法显示欢迎消息。因此，在Postman客户端中，您需要执行以下步骤：

打开Postman->选择方法get->然后添加API URL->单击send

接下来，我们检查post方法以获取数据表中的记录。打开postman->选择post方法->然后添加API URL->选择主体->单选raw按钮->输入类型JSON（application/json）->写入json对象数据->单击发送