使用 MVC 和 AngularJS 进行动态项目调度
4.84/5 (28投票s)
在本文中，我们将使用存储过程，通过 MVC 和 AngularJS 从数据库创建一个简单的动态项目排期。
引言
在本文中，我们将看到如何使用带 Pivot 结果的存储过程，从数据库创建一个简单的动态项目排期。使用 AngularJS 和 Web API 2，在不使用 Entity Framework 的情况下，将结果显示在 MVC 视图中。
在这个例子中，我没有使用 Entity Framework。不使用 EF 的原因是，对于 EF，我们需要获取具有固定列的 select 结果（需要定义列），例如，从我们的存储过程中，我们通常会执行 select 结果，如“select column1,column2,column3 from table”。但对于我们的例子，我使用了 Pivot 结果，并且列会根据日期范围动态显示，并且我在 SP 中使用“exec sp_executesql @SQLquery;”来执行动态查询。在我的 Web API 中，我将直接连接到数据库并执行 SP 来返回结果，而不是使用 Entity Framework。我的 AngularJS Controller 将调用 Web API 方法来返回结果。
项目排期
项目排期在项目规划中非常重要。项目可以是任何类型，例如，软件项目开发规划、生产规划等。为了举一个实际的例子，我们考虑一家汽车座椅制造公司。每周，他们将生产，例如，100 套汽车座椅。在工厂里，一切都会按计划进行，例如，从本周一开始到本周末结束，总共需要生产和交付 100 套座椅给客户。在这里，我们可以看到这是一个计划，因为我们需要生产 100 套座椅并将其交付给客户。但由于某些原因，生产只能生产 90 套座椅，或者生产按时完成了 100 套座椅。为了跟踪生产计划与实际计划，我们使用生产进度图。生产计划将有一个开始日期和一个结束日期，即生产必须何时开始，生产需要何时完成。实际日期是实际生产的开始日期和结束日期。实际开始和结束日期将在生产完成后设置。如果实际日期等于或小于生产计划结束日期，那么生产就是按时完成的，可以交付给客户。如果实际结束日期超过了生产计划日期，那么生产线必须密切关注，下次要避免同样的延误。
在项目中，可能有 2 个可用日期，一个是计划的开始和结束日期（这是我们的项目最初的计划日期或目标日期），另一个是实际的开始和结束日期（这是项目实际开始和完成的时间）。对于所有项目，我们需要比较计划日期和实际日期，如果两个日期之间存在较大差异，那么我们需要检查项目是否在计划时间内完成，或者项目开发是否延迟。
您还可以查看我之前关于使用 MVC 和 WCF REST 服务进行 AngularJs 的文章。
- MVC AngularJs 和 WCF REST 服务用于“读心术”问答游戏
- MVC、AngularJs 和 WCF REST 服务用于主从详细信息网格
- 使用 MVC 和 WCF REST 进行 AngularJs 过滤、排序和动画
- 使用 MVC 和 WCF REST 服务进行 AngularJs 购物车
- 使用 MVC 和 WCF REST 进行 AngularJs 动态菜单创建
以前关于 Angular JS、MVC 和 WEB API 的文章
Using the Code
创建数据库和表
我们将在数据库“projectDB”下创建一个 SCHED_Master 表。以下是创建数据库、表和示例插入查询的脚本。在您的 SQL Server 中运行此脚本。我使用的是 SQL Server 2012。
-- =============================================
-- Author : Shanu
-- Create date : 2015-07-13
-- Description : To Create Database,Table and Sample Insert Query
-- Latest
-- Modifier : Shanu
-- Modify date : 2015-07-13
-- =============================================
--Script to create DB,Table and sample Insert data
USE MASTER
GO
-- 1) Check for the Database Exists .If the database is exist then drop and create new DB
IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = 'projectDB' )
DROP DATABASE projectDB
GO
CREATE DATABASE projectDB
GO
USE projectDB
GO
CREATE TABLE [dbo].[SCHED_Master](
[ID] [int] NOT NULL,
[ProjectName] [varchar](100) NULL,
[ProjectType] int NULL,
[ProjectTypeName] [varchar](100) NULL,
[SCHED_ST_DT] [datetime] NULL,
[SCHED_ED_DT] [datetime] NULL,
[ACT_ST_DT] [datetime] NULL,
[ACT_ED_DT] [datetime] NULL,
[status] int null
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]
-- Insert Query
INSERT INTO [dbo].SCHED_Master
([ID],[ProjectName],[ProjectType],[ProjectTypeName],_
[SCHED_ST_DT],[SCHED_ED_DT],[ACT_ST_DT],[ACT_ED_DT],[status])
VALUES
(1001,'Project1',1,'Urgent','2015-06-01 00:00:00.000','2015-09-02 00:00:00.000'
,'2015-06-22 00:00:00.000','2015-08-26 00:00:00.000',1)
INSERT INTO [dbo].SCHED_Master
([ID],[ProjectName],[ProjectType],[ProjectTypeName],_
[SCHED_ST_DT],[SCHED_ED_DT],[ACT_ST_DT],[ACT_ED_DT],[status])
VALUES
(1002,'Project1',2,'Important','2015-09-22 00:00:00.000','2015-12-22 00:00:00.000'
,'2015-09-19 00:00:00.000','2015-12-29 00:00:00.000',1)
INSERT INTO [dbo].SCHED_Master
([ID],[ProjectName],[ProjectType],[ProjectTypeName],_
[SCHED_ST_DT],[SCHED_ED_DT],[ACT_ST_DT],[ACT_ED_DT],[status])
VALUES
(1003,'Project1',3,'Normal','2016-01-01 00:00:00.000','2016-03-24 00:00:00.000'
,'2016-01-01 00:00:00.000','2016-03-14 00:00:00.000',1)
INSERT INTO [dbo].SCHED_Master
([ID],[ProjectName],[ProjectType],[ProjectTypeName],_
[SCHED_ST_DT],[SCHED_ED_DT],[ACT_ST_DT],[ACT_ED_DT],[status])
VALUES
(1004,'Project2',1,'Urgent','2015-07-01 00:00:00.000','2015-09-02 00:00:00.000'
,'2015-07-22 00:00:00.000','2015-08-26 00:00:00.000',1)
INSERT INTO [dbo].SCHED_Master
([ID],[ProjectName],[ProjectType],[ProjectTypeName],_
[SCHED_ST_DT],[SCHED_ED_DT],[ACT_ST_DT],[ACT_ED_DT],[status])
VALUES
(1005,'Project2',2,'Important',_
'2015-09-29 00:00:00.000','2015-12-22 00:00:00.000'
,'2015-09-08 00:00:00.000','2015-12-14 00:00:00.000',1)
INSERT INTO [dbo].SCHED_Master
([ID],[ProjectName],[ProjectType],[ProjectTypeName],_
[SCHED_ST_DT],[SCHED_ED_DT],[ACT_ST_DT],[ACT_ED_DT],[status])
VALUES
(1006,'Project2',3,'Normal','2016-01-01 00:00:00.000','2016-03-04 00:00:00.000'
,'2016-01-01 00:00:00.000','2016-02-24 00:00:00.000',1)
-- Select Query
select ID,ProjectName,ProjectType,ProjectTypeName,SCHED_ST_DT,_
SCHED_ED_DT,ACT_ST_DT,ACT_ED_DT,status from SCHED_Master
创建表后，我们将创建一个存储过程来使用 Pivot 查询显示项目排期结果。
我将解释我的程序的每个步骤，以便您能够清楚地理解并根据您自己的表格格式进行操作。
步骤 1
创建带有参数的过程，并在过程中声明要用于 SP 的变量。
请注意，我已将 Fromdate 和 Todate 设置为 static。您可以将其更改为 SP 的参数，以根据您的日期范围获得动态结果。
Alter PROCEDURE [dbo].[usp_ProjectSchedule_Select]
@projectId VARCHAR(10) = ''
AS
BEGIN
-- 1. Declared for setting the Schedule Start and End date
--1.Start /////////////
Declare @FromDate VARCHAR(20) = '2015-06-08'--DATEADD(mm,-12,getdate())
Declare @ToDate VARCHAR(20) = '2016-05-06'--DATEADD(mm, 1, getdate())
-- used for the pivot table result
DECLARE @MyColumns AS NVARCHAR(MAX),
@SQLquery AS NVARCHAR(MAX)
第二步
我们已经定义了项目的开始日期和结束日期。现在我们需要搜索给定日期的项目排期结果。项目排期图的主要目的是将数据范围以周、月、年或天的任何一种格式显示，并在该范围内持续显示结果。为了获得连续的结果，我将从开始日期和结束日期获取星期日。我将结果显示为一周的视图，因此我在这里使用了每个星期的星期日日期，并将所有日期存储到一个临时表中以显示结果。
-- 2.This Temp table is to created for get all the days
-- between the start date and end date to display as the Column Header
--2.Start /////////////
IF OBJECT_ID('tempdb..#TEMP_EveryWk_Sndays') IS NOT NULL
DROP TABLE #TEMP_EveryWk_Sndays
DECLARE @TOTALCount INT
Select @TOTALCount= DATEDIFF(dd,@FromDate,@ToDate);
WITH d AS
(
SELECT top (@TOTALCount) AllDays = DATEADD(DAY, ROW_NUMBER()
OVER (ORDER BY object_id), REPLACE(@FromDate,'-','')) FROM sys.all_objects
)
SELECT distinct DATEADD(DAY, 1 - DATEPART(WEEKDAY, AllDays), _
CAST(AllDays AS DATE))WkStartSundays ,1 as status
into #TEMP_EveryWk_Sndays
FROM d
where
AllDays <= @ToDate
AND AllDays >= @FromDate
-- test the sample temptable with select query
-- select * from #TEMP_EveryWk_Sndays
--///////////// End of 2.
步骤 3
我将把前面的临时表连接到实际的 Schedule 表，以比较日期并产生结果。首先，我将检查 Schedule 结果，然后使用 union，我将结果合并到实际结果中，并将最终结果插入到另一个临时表中以生成我们的 Pivot 结果。
注意
对于 Pivot 列表中的实际数据，我将结果显示为：
“-1”：表示计划和实际结果的结束日期。在我的程序中，我将检查生成的值，如果它是“-1”，那么我将显示文本“END”，并带有红色背景色，以通知用户每个项目的结束日期。“0”：如果结果值为“0”，则表示该日期不在任何计划或实际日期范围内，因此应留空。“1”：如果结果为“1”，则表示计划的开始和结束日期。我将使用蓝色显示计划日期。“2”：如果结果为“2”，则表示实际的开始和结束日期。我将使用绿色显示计划日期。
这只是一个提供项目排期示例程序的示例过程。您可以根据您的需求自定义此表、过程和程序。您可以设置自己的规则和状态来显示结果。
-- 3. This temp table is created toScedule details with result here I have used the Union,
--the 1st query return the Schedule Project result and the 2nd query returns the
--Actual Project result both this query will be inserted to a Temp Table
--3.Start /////////////
IF OBJECT_ID('tempdb..#TEMP_results') IS NOT NULL
DROP TABLE #TEMP_results
SELECT ProjectName,viewtype,ProjectType,resultnew,YMWK
INTO #TEMP_results
FROM(
SELECT
A.ProjectName ProjectName -- Our Project Name
,'1-Scd' viewtype -- Our View type first
-- we display Schedule Data and then Actual,
A. ProjectType ProjectType -- Our Project type here you can use
-- your own status as Urgent,
normal and etc
, Case when cast(DATEPART( wk, max(A.SCHED_ED_DT)) as varchar(2)) =
cast(DATEPART( wk, WkStartSundays) as varchar(2)) then -1 else
case when min(A.SCHED_ST_DT)<= F.WkStartSundays AND max(A.SCHED_ED_DT) >= F.WkStartSundays
then 1 else 0 end end resultnew -- perfectResult as I expect,
-- RIGHT(YEAR(WkStartSundays), 2)_
+'-'+'W'+convert(varchar(2),Case when len(DATEPART( wk, WkStartSundays))='1' then '0'+_
cast(DATEPART( wk, WkStartSundays) as varchar(2)) _
else cast(DATEPART( wk, WkStartSundays) as varchar(2)) END ) _
as 'YMWK' -- Here we display Year/month and Week of our Schedule
-- which will be displayed as the Column
FROM -- here you can use your own table
SCHED_Master A (NOLOCK)
LEFT OUTER JOIN
#TEMP_EveryWk_Sndays F (NOLOCK) _
ON A.status= F.status
WHERE -- Here you can check your own where conditions
A.ProjectName like '%' + @projectId
AND A.status=1
AND A.ProjectType in (1,2,3)
AND A.SCHED_ST_DT <= @ToDate
AND A.SCHED_ED_DT >= @FromDate
GROUP BY
A.ProjectName
, A. ProjectType
,A.SCHED_ED_DT
,F.WkStartSundays
UNION -- This query is to result the Actual result
SELECT
A.ProjectName ProjectName -- Our Project Name,'2-Act' viewtype
-- Our View type first we display Schedule Data and then Actual
, A. ProjectType ProjectType -- Our Project type here
-- you can use your own status
-- as Urgent,normal and etc.,
-- Case when
cast(DATEPART( wk, max(A.ACT_ED_DT)) as varchar(2)) = _
cast(DATEPART( wk, WkStartSundays) as varchar(2)) _
then -1 else case when min(A.ACT_ST_DT)<= F.WkStartSundays AND _
max(A.ACT_ED_DT) >= F.WkStartSundays then 2 _
else 0 end end resultnew -- perfectResult as I expect
, RIGHT(YEAR(WkStartSundays), 2)+'-'+'W'+convert(varchar(2),_
Case when len_
(DATEPART( wk, WkStartSundays))='1' then '0'+ _
cast(DATEPART( wk, WkStartSundays) as varchar(2)) _
else cast(DATEPART( wk, WkStartSundays) _
as varchar(2)) END ) as 'YMWK' -- Here, we display
-- Year/month and Week of
-- our Schedule which will
-- be displayed as the Column
FROM -- here you can use your own table
SCHED_Master A (NOLOCK)
LEFT OUTER JOIN
#TEMP_EveryWk_Sndays F (NOLOCK) _
ON A.status= F.status
WHERE -- Here you can check
-- your own where conditions
A.ProjectName like '%' + @projectId
AND A.status=1
AND A.ProjectType in (1,2,3)
AND A.ACT_ST_DT <= @ToDate
AND A.ACT_ED_DT >= @FromDate
GROUP BY
A.ProjectName
, A. ProjectType
,A.SCHED_ED_DT
,F.WkStartSundays
) q
--3.End /////////////
步骤 4
在这里，我将使用 Pivot 查询从临时表结果的最终结果中显示最终结果。
--4.Start /////////////
--here first we get all the YMWK which should be display in Columns,
--we use this in our next pivot query
select @MyColumns = STUFF((SELECT ',' + QUOTENAME(YMWK)
FROM #TEMP_results
GROUP BY YMWK
ORDER BY YMWK
FOR XML PATH(''), TYPE
).value('.', 'NVARCHAR(MAX)')
,1,1,'')
--here we use the above all YMWK to display its result as column and row display
set @SQLquery = N'SELECT ProjectName,viewtype,ProjectType,' + @MyColumns + N' from
(
SELECT
ProjectName,
viewtype,
ProjectType,
YMWK,
resultnew as resultnew
FROM #TEMP_results
) x
pivot
(
sum(resultnew)
for YMWK in (' + @MyColumns + N')
) p order by ProjectName, ProjectType,viewtype'
exec sp_executesql @SQLquery;
这是存储过程的完整代码。
-- =============================================
-- Author : Shanu
-- Create date : 2015-07-24
-- Description : To get all project Schedule details
-- Latest
-- Modifier : Shanu
-- Modify date : 2015-07-24
-- =============================================
-- usp_ProjectSchedule_Select 'Project1'
-- usp_ProjectSchedule_Select ''
-- =============================================
Alter PROCEDURE [dbo].[usp_ProjectSchedule_Select]
@projectId VARCHAR(10) = ''
AS
BEGIN
-- 1. Declared for setting the Schedule Start and End date
--1.Start /////////////
Declare @FromDate VARCHAR(20) = '2015-06-08'--DATEADD(mm,-12,getdate())
Declare @ToDate VARCHAR(20) = '2016-05-06'--DATEADD(mm, 1, getdate())
-- used for the pivot table result
DECLARE @MyColumns AS NVARCHAR(MAX),
@SQLquery AS NVARCHAR(MAX)
--// End of 1.
-- 2.This Temp table is to created for get all the days between the start date
-- and end date to display as the Column Header
--2.Start /////////////
IF OBJECT_ID('tempdb..#TEMP_EveryWk_Sndays') IS NOT NULL
DROP TABLE #TEMP_EveryWk_Sndays
DECLARE @TOTALCount INT
Select @TOTALCount= DATEDIFF(dd,@FromDate,@ToDate);
WITH d AS
(
SELECT top (@TOTALCount) AllDays = DATEADD(DAY, ROW_NUMBER()
OVER (ORDER BY object_id), REPLACE(@FromDate,'-',''))
FROM sys.all_objects
)
SELECT distinct DATEADD(DAY, 1 - DATEPART(WEEKDAY, AllDays), _
CAST(AllDays AS DATE))WkStartSundays ,1 as status
into #TEMP_EveryWk_Sndays
FROM d
where
AllDays <= @ToDate
AND AllDays >= @FromDate
-- test the sample temptable with select query
-- select * from #TEMP_EveryWk_Sndays
--///////////// End of 2.
-- 3. This temp table is created toScedule details with result here
-- I have used the Union, the 1st query return the Schedule Project result
-- and the 2nd query returns the Actual Project
-- result both this query will be inserted to a Temp Table
--3.Start /////////////
IF OBJECT_ID('tempdb..#TEMP_results') IS NOT NULL
DROP TABLE #TEMP_results
SELECT ProjectName,viewtype,ProjectType,resultnew,YMWK
INTO #TEMP_results
FROM(
SELECT
A.ProjectName ProjectName -- Our Project Name
,'1-Scd' viewtype -- Our View type first
-- we display Schedule Data and then Actual,
A. ProjectType ProjectType -- Our Project type here you can use
-- your own status as Urgent,normal and etc.,
Case when cast(DATEPART( wk, max(A.SCHED_ED_DT)) _
as varchar(2)) = cast(DATEPART( wk, WkStartSundays) _
as varchar(2)) then -1 else case when min(A.SCHED_ST_DT)<= F.WkStartSundays _
AND max(A.SCHED_ED_DT) _
>= F.WkStartSundays then 1 else 0 end end resultnew -- perfectResult as
-- I expect
, RIGHT(YEAR(WkStartSundays), 2)+'-'+'W'+convert(varchar(2),_
Case when len(DATEPART( wk, WkStartSundays))='1' then '0'+ _
cast(DATEPART( wk, WkStartSundays) _
as varchar(2)) else cast(DATEPART( wk, WkStartSundays) as varchar(2)) END ) _
as 'YMWK' -- Here we display
-- Year/month and Week of our Schedule which will be displayed as the Column
FROM -- here you can use your own table
SCHED_Master A (NOLOCK)
LEFT OUTER JOIN
#TEMP_EveryWk_Sndays F (NOLOCK) ON A.status= F.status
WHERE -- Here you can check your own where conditions
A.ProjectName like '%' + @projectId
AND A.status=1
AND A.ProjectType in (1,2,3)
AND A.SCHED_ST_DT <= @ToDate
AND A.SCHED_ED_DT >= @FromDate
GROUP BY
A.ProjectName
, A. ProjectType
,A.SCHED_ED_DT
,F.WkStartSundays
UNION -- This query is to result the Actual result
SELECT A.ProjectName ProjectName -- Our Project Name
,'2-Act' viewtype -- Our View type first we display Schedule Data
-- and then Actual
, A. ProjectType ProjectType -- Our Project type here you can use your own status
-- as Urgent,normal and etc.,
Case when cast(DATEPART( wk, max(A.ACT_ED_DT)) as varchar(2)) = _
cast(DATEPART( wk, WkStartSundays) _
as varchar(2)) then -1 else_
case when min(A.ACT_ST_DT)<= F.WkStartSundays AND max(A.ACT_ED_DT) >= F.WkStartSundays _
then 2 else 0 end end resultnew -- perfectResult as i expect_
, RIGHT(YEAR(WkStartSundays), 2)+'-'+'W'+convert(varchar(2),Case _
when len(DATEPART( wk, WkStartSundays))='1' then '0'+ _
cast(DATEPART( wk, WkStartSundays) as varchar(2)) else cast(DATEPART( wk, WkStartSundays) _
as varchar(2)) END ) as 'YMWK' -- Here we display Year/month and _
Week of our Schedule which will be displayed as the Column
FROM -- here you can use your own table
SCHED_Master A (NOLOCK)
LEFT OUTER JOIN
#TEMP_EveryWk_Sndays F (NOLOCK) _
ON A.status= F.status
WHERE -- Here you can check your own where conditions
A.ProjectName like '%' + @projectId
AND A.status=1
AND A.ProjectType in (1,2,3)
AND A.ACT_ST_DT <= @ToDate
AND A.ACT_ED_DT >= @FromDate
GROUP BY A.ProjectName _
, A. ProjectType ,A.SCHED_ED_DT ,F.WkStartSundays
) q
--3.End /////////////
--4.Start /////////////
--here first we get all the YMWK which should be display in Columns
--we use this in our next pivot query
select @MyColumns = STUFF((SELECT ',' + QUOTENAME(YMWK)
FROM #TEMP_results
GROUP BY YMWK
ORDER BY YMWK
FOR XML PATH(''), TYPE
).value('.', 'NVARCHAR(MAX)')
,1,1,'')
--here we use the above all YMWK to display its result as column and row display
set @SQLquery = N'SELECT ProjectName,viewtype,ProjectType,' + @MyColumns + N' from
(
SELECT
ProjectName,
viewtype,
ProjectType,
YMWK,
resultnew as resultnew
FROM #TEMP_results
) x
pivot
(
sum(resultnew)
for YMWK in (' + @MyColumns + N')
) p order by ProjectName, ProjectType,viewtype'
exec sp_executesql @SQLquery;
END
如果我们运行该过程，最终输出将是这样的。在这里，我们可以看到我将使用 Pivot 查询显示每个星期的结果。
在 Visual Studio 2015 中创建我们的 MVC Web 应用程序
安装 Visual Studio 2015 后，单击 **开始** -> **程序** - > **选择 Visual Studio 2015** - > **点击 Visual Studio 2015 RC**。（现在 Visual Studio 2015 已可用，您可以下载最新版本。）
单击 **新建** -> **项目** -> **选择 Web** -> **ASP.NET Web 应用程序**。选择您的项目位置并输入您的 Web 应用程序名称。
选择 **MVC**，然后在“添加文件夹和核心引用”中，选择 Web API，然后单击 **确定**。
添加 WEB API 控制器的步骤
右键单击 Controllers 文件夹 -> 单击 **添加** -> 单击 **Controller**。
由于我们将创建 WEB API Controller，因此请选择 **Controller** 并选择 **添加空的 WEB API 2 Controller**。为 Web API controller 命名，然后单击 **确定**。在这里，我为我的 Web API Controller 命名为“ScheduleController”。
由于我们已经创建了 Web API Controller，我们可以看到我们的 Controller 已继承自 ApiController。
众所周知，Web API 是构建浏览器和移动设备 HTTP 服务的简单易用的方式。
Web API 有四个方法：**Get/Post/Put** 和 **Delete**，其中
Get用于请求数据（Select）Post用于创建数据（Insert）Put用于更新数据Delete用于删除数据
在我们的示例中，我们将使用 **Get**，因为我们需要获取所有项目排期。
Get 方法
在我们的示例中，我只使用了 Get 方法，因为我只使用了存储过程。由于我没有使用 Entity Framework，我在这里连接到数据库并获取存储过程到 datatable 的结果。
public class scheduleController : ApiController
{
// to Search Student Details and display the result
[HttpGet]
public DataTable projectScheduleSelect(string projectID)
{
string connStr = ConfigurationManager.ConnectionStrings_
["shanuConnectionString"].ConnectionString;
DataTable dt = new DataTable();
SqlConnection objSqlConn = new SqlConnection(connStr);
objSqlConn.Open();
SqlCommand command = new SqlCommand("usp_ProjectSchedule_Select", objSqlConn);
command.CommandType = CommandType.StoredProcedure;
command.Parameters.Add("@projectId", SqlDbType.VarChar).Value = projectID;
SqlDataAdapter da = new SqlDataAdapter(command);
da.Fill(dt);
return dt;
}
}
在 WebConfig 中，我设置了数据库连接字符串。在 Web API get 方法中，我读取连接字符串并建立数据库连接。使用 SQL Adapter，通过传递参数从存储过程获取结果，并将最终结果绑定到 DataTable 并返回 DataTable。
创建 AngularJs Controller
首先，在 Script 文件夹中创建一个文件夹，我将其命名为“MyAngular”。
现在将您的 Angular Controller 添加到该文件夹中。
右键单击 MyAngular 文件夹，**单击添加新项 > 选择 Web > 选择 AngularJs Controller** 并为 Controller 命名。我已将我的 AngularJs Controller 命名为“Controller.js”。
AngularJs Controller 创建完成后，我们可以看到默认情况下，Controller 会包含带有默认模块定义等代码。
我已经修改了上述代码，如下所示添加了 Module 和 controller。
如果 Angular JS 包丢失，请将该包添加到您的项目中。
右键单击您的 MVC 项目，然后单击 -> **管理 NuGet 程序包**。搜索 AngularJs 并单击 **安装**。
现在我们可以看到所有 AngularJs 程序包都已安装，并且可以在 Script 文件夹中看到所有文件。
创建 Angular JS 脚本文件的步骤
Modules.js：在这里，我们添加对 Angular.js JavaScript 的引用，并创建一个名为“RESTClientModule”的 Angular Module。
/// <reference path="../angular.js" />
/// <reference path="../angular.min.js" />
/// <reference path="../angular-animate.js" />
/// <reference path="../angular-animate.min.js" />
var app;
(function () {
app = angular.module("RESTClientModule", ['ngAnimate']);
})();
Controllers：在 Angular JS Controller 中，我执行了所有业务逻辑，并将数据从 WEB API 返回到我们的 MVC HTML 页面。
首先，我声明了所有需要使用的局部变量。在此方法中，我只使用了一个方法“selectScheduleDetails”，在该方法中，我以 Project ID 作为参数调用 WEB API 方法，并将返回的结果存储在 Angular JS 变量中以在 MVC HTML 页面上显示。在搜索按钮单击时，我将通过传递 ProjectID 作为搜索参数来调用同一个方法。
app.controller("AngularJs_studentsController",
function ($scope, $timeout, $rootScope, $window, $http) {
$scope.date = new Date();
$scope.projectId = "";
selectScheduleDetails($scope.projectId);
function selectScheduleDetails(projectId) {
$http.get('/api/schedule/projectScheduleSelect/',
{ params: { projectId: projectId } }).success(function (data) {
$scope.Schedules = data;
if ($scope.Schedules.length > 0) {
}
})
.error(function () {
$scope.error = "An Error has occurred while loading posts!";
});
}
//Search
$scope.searchScheduleDetails = function () {
selectScheduleDetails($scope.projectId);
}
});
MVC HTML Page：所有最终结果，我都会在 HTML 页面上显示。因为在这里，我们收到所有结果都是动态的，所以在我们的 HTML 页面上无法预定义任何值。HTML 表头和数据需要动态生成。
由于我们需要显示动态表头和动态数据，我将使用嵌套的 “ng-repeat” 来显示动态结果。在表头中，为了避免重复结果，我将显示的限制设置为 1 ”limitTo:”
注意：我使用了 {{key}} 来首先显示表头结果。并使用了 {{val}} 来显示结果数据。
正如我之前向您解释过的，我使用数字，如 “-1”,0,1,2 在数据显示中，我们的最终结果在 HTML 表中作为图形化项目排期图。
我使用 Span 标签以图形化图表的形式在表格中显示结果，并用适当的颜色填充每个状态。
<table style=" background-color:#FFFFFF; border: solid 2px #6D7B8D; width: 99%;
table-layout:fixed;" cellpadding="0" cellspacing="0">
<tr style="height: 30px; background-color:#336699 ;
color:#FFFFFF ;border: solid 1px #659EC7;"
ng-repeat="item in Schedules | limitTo:1">
<td width="80" align="center"
ng-repeat="(key, val) in item | limitTo:1">
<table>
<tr>
<td >
{{key}}
</td>
</tr>
</table>
</td>
</tr>
<tr style="height: 30px; color:darkred ;border: solid 1px #659EC7;"
ng-repeat="item in Schedules" >
<td width="80" style="border: solid 1px #659EC7;
table-layout:fixed;padding:0;" align="center"
ng-repeat="(key, val) in item" >
<table cellpadding="0" cellspacing="0">
<tr>
<td align="center" width="60"
style="padding:0;">
<div ng-if="key == 'ProjectName' ">
{{val}}
</div>
<div ng-if="key == 'viewtype' ">
{{val}}
</div>
<div ng-if="key == 'ProjectType' " >
{{val}}
</div>
<div ng-if="val == '0' &&
key != 'ProjectType' " >
</div>
<div ng-if="val == '1' && key != 'ProjectType'" >
<span style="background-color: deepskyblue;
width: 100%; float:left;
display: inline;margin-right:76px;" > </span>
</div> <div ng-if="val == '2' &&
key != 'ProjectType'">
<span style="background-color: limegreen; width: 100%; float:left;
display: inline;margin-right:76px;"> </span>
</div>
<div ng-if="val == '-1' && key != 'ProjectType'">
<span style="background-color: red; width: 100%; float:left;
display: inline;margin-right:48px;color:white">END</span>
</div>
</td> </tr> </table>
</td>
</tr>
</table>
最终输出：最终输出将是这样的。正如我之前提到的，所有最终结果都将从存储过程使用数据状态 “-1,0,1,2” 中获取，我将在 HTML 表格中显示 span 标签以显示或项目排期图。
我们在 HTML 表格中显示计划和实际结果，如下所示：
在这里，我们可以看到对于每个项目，我将以蓝色显示计划图，以红色显示计划结束日期，同样对于每个项目的实际开始日期，我将以绿色显示，并以红色显示结束日期。
在我的存储过程中，我将检查每个计划和实际开始结束日期范围，并按周顺序显示结果，并以范围显示状态为 1 表示计划，2 表示实际。
例如，让我们来看下面的结果，我们可以看到 project1，我们表中的 1-Scd，我们插入
计划开始日期 - 2015-06-01（如果我们检查此日期的周数，它将是第 24 周）计划结束日期 - 2015-09-02（如果我们检查此日期的周数，它将是第 36 周）实际开始日期 - 2015-06-22（如果我们检查此日期的周数，它将是第 27 周）实际结束日期 - 2015-08-26（如果我们检查此日期的周数，它将是第 35 周）
我们可以看到在我的存储过程中，对于每周的开始和结束日期范围，我将结果显示为 1 表示计划，2 表示实际。在我的 MVC HTML 页面中使用 AngularJS 的 ng-repeat 和 ng-if="val == '1'，我将检查每个结果并在表格中像这样显示图表：
关注点
注意：在 WebConfig 文件中，您可以找到“shanuConnectionString”，请根据您的 SQL Server 连接更改连接字符串。
支持的浏览器：Chrome 和 Firefox
历史
- 2015 年 8 月 3 日：初始版本