使用MVC和AngularJS进行动态项目调度
介绍 在本文中，我们可以看到如何使用带有Pivot result的存储过程从数据库创建一个简单的动态项目调度。在不使用实体框架的情况下，使用AngularJS和Web API 2将结果显示到MVC视图。 在这个例子中，我没有使用实体框架。不使用EF的原因是，对于EF，我们需要得到选择的结果与固定的列(列需要被定义)，例如，从我们的存储过程中，我们通常做一个选择结果，如" <span style="outline: 0px;"从table</span>中选择column n1,column2,column3 "。但在我们的示例中,我使用了主和列将显示结果动态地根据日期范围和我使用“exec sp_executesql @SQLquery;“我SP执行动态查询即本月我的Web API的使用实体框架将会直接连接到数据库并执行SP返回结果。从我的AngularJS控制器中，我将调用Web API方法来返回结果。 项目调度 项目计划是项目计划中非常重要的一部分。项目可以是任何类型，例如软件项目开发计划、生产计划等等。作为一个现实的例子，让我们考虑一个汽车座椅制造公司。例如，他们每周将为一款汽车生产100套座椅。在工厂里一切都会按计划进行，例如从这周开始的周一到这周结束的周五总共需要生产100个座位并交付给客户。这里我们可以看到这是我们的计划，因为我们需要生产100个座位并交付给客户。但由于某种原因生产只能生产90个座位或者生产及时生产了100个座位。为了根据实际计划跟踪生产计划，我们使用生产进度表。生产计划将有开始和结束日期，生产必须开始的时间和生产需要结束的时间。实际日期是实际生产的开始和结束日期。实际的开始和结束日期将在生产完成后设置。如果实际日期与生产结束日期相同或低于生产结束日期，那么很明显，生产是准时的，它可以交付给客户。如果实际结束日期超过了生产计划日期，则必须密切监视生产线，下次应避免同样的延迟。 在项目中可能有两个日期，一个是预定的开始和结束日期(这是最初计划的日期或我们项目的目标日期)，另一个是实际的开始和结束日期(这是项目实际开始和完成的日期)。对于所有的项目，我们需要比较计划和实际的日期，如果两个日期有较大的差异，那么我们需要检查项目是否在计划的时间内完成，或者是否有项目开发的延迟。 您还可以查看我以前的文章，这些文章是关于使用MVC和WCF Rest服务的AngularJs。 MVC AngularJs和WCF Rest服务用于读心测验MVC, AngularJs和WCF Rest服务用于Master Detail grid AngularJs过滤器，排序和动画使用MVC和WCF Rest服务用于购物推车使用MVC和WCF Rest服务用于动态菜单创建使用MVC和WCF Rest 以前关于Angular JS、MVC和WEB API的文章: 图片预览使用MVC, AngularJs和Web API 2 MVC, Angular JS CRUD使用Web API 2与存储过程 使用的代码 创建数据库和表 我们将创建a span style="outline: 0px;SCHED_Master</span> >& > 颜色:rgb(0, 0, 0);“祝辞projectDB< / span> '。下面是创建数据库、表和示例插入查询的脚本。在SQL服务器中运行此脚本。我使用过SQL Server 2012。 隐藏,收缩,复制Code
-- ============================================= -- 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
, 在创建表之后，我们将创建一个存储过程，以使用枢轴查询显示项目进度结果。 我将解释我的过程中的每一步，以便您可以清楚地理解它，使您自己的表格格式。 步骤1, 使用参数创建过程，并在过程中声明将在SP中使用的变量。 注意，这里我将Fromdate和Todate设置为静态的。您可以将它从SP更改为一个参数，以根据您的日期范围获得动态结果。 隐藏,复制Code
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, 我们已经定义了项目的开始日期和结束日期。现在我们需要搜索给定日期的项目进度结果。项目进度表的主要目的是将数据范围显示为周、月、年或日的任意一种格式，并在该范围内连续显示结果。为了得到连续的结果，我将从t得到星期日的天数他开始和结束的日期。我将以一周的形式显示结果，因此这里我使用了every week作为周日日期，并将所有日期存储到一个临时表中以显示结果。 隐藏,复制Code
-- 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, 我将把前面的临时表与实际的进度表连接起来，以比较日期并生成结果。首先，我将检查计划结果，并使用union，我将结合结果与实际结果，并插入最终结果到另一个临时表，以生成我们的主元结果。 Note 对于Pivot列表中的实际数据，我将把结果显示为: & lt;跨风格= "大纲:0 px;颜色:rgb(0,0,0);"> " -1 " </span:用于预定结果和实际结果的结束日期。在我的程序中，我将检查产生的值，如果它的“-1”，那么我将显示文本为“结束”红色背景颜色，以通知用户每个项目的结束日期。 ,& lt;跨风格= "大纲:0 px;如果结果值是“0”，那么它意味着这些天不在任何时间表或实际的天，因此它应该留空。 ,& lt;跨风格= "大纲:0 px;颜色:rgb(0,0,0);"> " 1 " </span> 如果结果是" 1 "，表示预定的开始和结束日期。我将使用蓝色来显示日程安排天数。 ,& lt;跨风格= "大纲:0 px;color: rgb(255, 0,0);"><span style="颜色:rgb(0,0,0);" 2 " </斯潘></斯潘> 如果结果是" 2 "，表示实际的开始和结束日期。我将使用绿色显示日程天数。 这只是一个示例过程，它为项目进度提供了一个示例程序。您可以根据自己的需要对该表、过程和程序进行优化。您可以设置自己的规则和状态来显示结果。 隐藏,收缩,复制Code
-- 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 youe 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 youe 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查询显示最终结果。 隐藏,收缩,复制Code
--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 disoplay 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;
下面是存储过程的完整代码。 隐藏,收缩,复制Code
-- ============================================= -- Author : Shanu -- Create date : 2015-07-24 -- Description : To get all prject 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 youe 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 youe 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 disoplay 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查询。 2)在Visual Studio 2015中创建我们的MVC Web应用: 在安装Visual Studio 2015之后。单击“开始”→程序→选择Visual Studio 2015-单击Visual Studio 2015 RC。(现在Visual Studio 2015已经发布，你可以下载最新版本。 单击New→项目——比;选择Web→ASP。净的Web应用程序。选择项目位置并输入web应用程序名称。 选择MVC，并在添加文件夹和核心参考。选择Web API并单击OK。 添加WEB API控制器的步骤。 右键单击Controllers文件夹->单击Add→单击控制器。 因为我们要创建我们的WEB API控制器。选择Controller并添加空的WEB API 2控制器。为Web API控制器指定名称并单击ok。在这里，我将Web API控制器命名为“ScheduleController”。 当我们创建了Web API控制器时，我们可以看到我们的控制器已经继承了ApiController。 众所周知，Web API是为浏览器和移动设备构建HTTP服务的简单而容易的工具 Web API有四个方法:Get/Post/Put和Delete where Get是请求数据。(选择) Post用于创建数据。(插入) Put用于更新数据。 删除是删除数据。 在我们的示例中，我们将同时使用两个Get，因为我们需要从其中获取所有项目进度。 Get方法 在我们的示例中，我只使用了Get方法，因为我只使用了存储过程。由于我没有使用实体框架，这里我让ben连接到数据库，并获得存储过程到Datatable的结果。 隐藏,复制Code
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方法中，我读取连接字符串并建立DB连接。使用SQL适配器通过传递参数从存储过程获得结果，并将最终结果绑定到数据表并返回数据表。 创建AngularJs控制器 首先在Script文件夹中创建一个文件夹我将这个文件夹命名为“MyAngular” 现在将你的Angular控制器添加到这个文件夹中。 右键点击MyAngular文件夹，点击添加和新建项目，选择Web>选择AngularJs控制器，并给控制器命名。我给了我的AngularJs控制器Controller。js 一旦创建了AngularJs控制器，我们可以看到，默认情况下，控制器将拥有带有默认模块定义的代码和所有内容。 我已经改变了上面的代码，如添加模块和控制器如下。 如果缺少Angular JS包，那么就把这个包添加到你的项目中。 右键单击您的MVC项目并单击->NuGet包管理。搜索AngularJs并点击安装。 现在我们可以看到所有的Angu已经安装了larJs包，我们可以在Script文件夹中找到所有的文件。 创建Angular Js脚本文件的步骤: 在这里，我们添加Angular.js javascript的引用，并创建一个名为“RESTClientModule”的Angular模块。 隐藏,复制Code
// <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']); })();
控制器:在Angular JS控制器中，我已经执行了所有的业务逻辑，并将数据从WEB API返回到我们的MVC html页面。 首先，我声明了需要使用的整个局部变量。我只用了一个方法“selectScheduleDetails”，在这个方法中我调用了WEB API方法，项目ID作为参数传递，返回的结果我存储在Angular JS变量中以显示。MVC HTML页面。在搜索按钮单击中，我将通过传递ProjectID作为搜索参数来调用相同的方法。 隐藏,复制Code
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 occured while loading posts!"; }); } //Search $scope.searchScheduleDetails = function () { selectScheduleDetails($scope.projectId); } });
MVC HTML页面:所有最终结果我将显示在HTML页面。因为在这里我们接收的所有结果都是动态的，所以我们不能在HTML页面中预定义任何值。HTML表头和数据需要动态生成。 因为我们需要显示动态标题和动态数据，所以我将使用嵌套的“ng-repeat”来显示动态结果。为了避免重复的结果，我限制了结果显示为1 " limitTo: " 注意:我使用了{{key}}来首先显示标题结果。我使用了{{val}}来显示结果数据。 正如我已经向您解释的那样，我在data表中使用了数字“-1”、0,1,2来显示我们最终的结果，在HTML表中作为一个图形化的项目调度图表。 , 我使用了Span标签以图表的图形方式在表格中显示结果，每个状态填充适当的颜色。 , 隐藏,收缩,复制Code
<tablestyle=" background-color:#FFFFFF; border: solid 2px #6D7B8D; width: 99%;table-layout:fixed;"cellpadding="0"cellspacing="0"> <trstyle="height: 30px; background-color:#336699 ; color:#FFFFFF ;border: solid 1px #659EC7;"ng-repeat="item in Schedules | limitTo:1"> <tdwidth="80"align="center"ng-repeat="(key, val) in item | limitTo:1"> <table> <tr> <td> {{key}} </td> </tr> </table> </td> </tr> <trstyle="height: 30px; color:darkred ;border: solid 1px #659EC7;"ng-repeat="item in Schedules"> <tdwidth="80"style="border: solid 1px #659EC7;table-layout:fixed;padding:0;"align="center"ng-repeat="(key, val) in item"> <tablecellpadding="0"cellspacing="0"> <tr> <tdalign="center"width="60"style="padding:0;"> <divng-if="key == 'ProjectName' "> {{val}} </div> <divng-if="key == 'viewtype' "> {{val}} </div> <divng-if="key == 'ProjectType' "> {{val}} </div> <divng-if="val == '0' && key != 'ProjectType' "> </div> <divng-if="val == '1' && key != 'ProjectType'"> <spanstyle="background-color: deepskyblue; width: 100%; float:left; display: inline;margin-right:76px;"> </span> </div> <divng-if="val == '2' && key != 'ProjectType'"> <spanstyle="background-color: limegreen; width: 100%; float:left; display: inline;margin-right:76px;"> </span> </div> <divng-if="val == '-1' && key != 'ProjectType'"> <spanstyle="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年8月26日(如果我们选择这个日期的第一周，将会是第35周) 我们可以在我的存储过程中看到，对于每周的开始和结束日期范围，我将把结果显示为1 (Schedule)和2 (Actual)。在我的MVC HTML页面使用AngularJS ng-repeat和ng-if="val == '1'我将检查每个结果，并显示图表内的表如下。 的兴趣点 注意:在WebConfig文件中你可以找到“shanuConnectionString”根据SQL服务器连接改变连接字符串。 支持浏览器:Chrome和Firefox。 历史 ShanuAngularProjectSchedule.zip - 2015-08-03。 本文转载于：http://www.diyabc.com/frontweb/news17324.html
