使用 AngularJS 和 WEB API 的 MVC Dashboard
4.92/5 (30投票s)
在本文中，我们将详细介绍如何使用 AngularJS 和 Web API 创建一个动态 MVC Dashboard。
引言
在本文中，我们将详细介绍如何使用 AngularJS 和 WEB API 创建动态 MVC 仪表板显示。使用此 Web 应用程序，您现在可以编写自己的 SQL 查询来绑定动态仪表板。此程序使您可以轻松地显示任何表/列详细信息，并带有您输入的 WHERE 子句、ORDER BY 和 GROUP BY 选项，用于您主页上选定的数据库。
Shanu MVC 仪表板中的功能
- 动态 SQL 查询
- 列名
- 表名
- WHERE 子句
- Group By
- Order By
在这里，我们将看到每个部分的详细信息。
1) 动态 SQL 查询：我们可以通过在此文本框中输入 Select 查询来绑定仪表板页面上的任何数据。我们还可以编写连接查询，通过 WHERE 子句显示来自多个表的数据。我们需要先选中Is Query Checkbox以在仪表板页面上显示我们的动态 SQL 查询数据。如果未选中复选框，则默认显示我们提供的列和表详细信息。
从上图可以看到，首先我们在仪表板页面上显示简单的 SELECT 查询结果。接下来，我们使用 LEFT OUTER JOIN SELECT 查询显示 2 个表的组合数据，该查询将显示来自 userDetails 和 userAddress 表的 UserName、UserType、Phone、Address、Email。在这里，您可以编写自己的 SQL SELECT 查询来显示带有您的 WHERE 子句、GROUP BY、ORDER BY 或 UNION 或任何其他 SELECT 查询的数据。
注意：在本文中，您可以在运行此应用程序之前的代码部分找到示例数据库和表创建查询。在运行此应用程序之前，请运行代码部分 SQL 脚本以创建带有插入记录的示例数据库和表，以便在我们的 MVC 仪表板页面上测试输出。
可用于我们应用程序的示例 SELECT 查询
select ID,ItemNo ,ItemName ,Comments ,Price from ItemDetail where Price>'1000'
select A.UserName,A.UserType,A.Phone,B.Address,B.Email
FROM
Userdetails A Left Outer JOIN UserAddress B
在此应用程序中，我们只有选择和绑定数据的选项。如果用户输入了除 SELECT 查询以外的任何 INSERT、DROP、DELETE，我们将显示警报消息，表明此应用程序只能使用 SELECT 查询。我们已在每个用户输入中检查了 SQL 注入，并向用户显示错误消息。我们将在本文中更详细地介绍此 SQL 注入检查。
注意：我们现在只针对一个数据库进行了修复，我们可以从 Web.Config 中给出的数据库名称中选择任何表数据。
在此应用程序中，我们只有选择和绑定数据的选项。如果用户输入了除 SELECT 查询以外的任何 INSERT、DROP、DELETE，我们将显示警报消息，表明此应用程序只能使用 SELECT 查询。我们已在每个用户输入中检查了 SQL 注入，并向用户显示错误消息。我们将在本文中更详细地介绍此 SQL 注入检查。
注意：我们现在只针对一个数据库进行了修复，我们可以从 Web.Config 中给出的数据库名称中选择任何表数据。
2) 列名 & 3) 表名：接下来，我们提供另一个选项，通过输入特定列或用户输入的表中的所有列来显示数据。用户无需在此处编写完整的 SELECT SQL 查询。在这里，我们可以先写上所有列名，用逗号隔开，然后为给定的列详细信息写上表名。我们还可以通过在列名中提供所有连接列名详细信息，并在表名输入中提供连接表名详细信息和 ON 子句来在此处编写连接查询。在这里，我们可以看到列和表详细信息的示例输出。
用于测试的示例列名和表详细信息
- 列名：
UserName, UserType, Phone
表名： UserDetails
- 列名：
A.UserName, A.UserType, A.Phone, B.Address, B.Email
表名： Userdetails A Left Outer JOIN UserAddress B on A.UserID=B.UserID
4) WHERE 子句：现在，让我们看看如何为给定的列和表详细信息编写 WHERE 子句。如果用户需要添加一些条件，那么他们可以添加，就像我们在 SQL 查询中编写的那样，可以使用 AND 关键字添加更多条件。在下面的图像中，我们可以看到在我们的仪表板页面中使用 WHERE 子句的输出。
用于测试的带有 WHERE 子句的示例列名和表详细信息
- 列名： I
temName,Price
表名： ItemDetail
WHERE 子句： Price>'4000'
- 列名：
ItemNo ,ItemName ,Comments ,Price
表名：ItemDetail
WHERE 子句： ItemName like 'm%'
5) GROUP BY：要对给定的列和表详细信息使用 GROUP BY，用户需要选中 GROUP BY 复选框。在 GROUP BY 文本框中，用户可以输入用于 GROUP BY 的列详细信息。在这里，我们可以看到使用 GROUP BY 对给定的列和表详细信息的示例输出。在这里，我们可以看到我们同时使用了 WHERE 子句，并且取消选中了 WHERE 子句以使用 GROUP BY 关键字显示带有条件的动态数据。
带有 WHERE 子句和 GROUP BY 的示例列名和表详细信息，用于测试
- 列名：
ItemName,Price
表名： ItemDetail
WHERE 子句： Price>'4000'
GROUP BY： ItemName
6) ORDER BY：要对给定的列和表详细信息使用 ORDER BY，用户需要选中 ORDER BY 复选框。在 ORDER BY 文本框中，用户可以输入用于以升序或降序任何顺序显示数据的列详细信息。在这里，我们可以看到使用 ORDER BY 对给定的列和表详细信息的示例输出。
带有 ORDER BY 的示例列名和表详细信息
- 列名：
ID, ItemNo, ItemName, Comments, Price
表名： ItemDetail
ORDER BY： Price desc
用户输入的 SELECT 查询中的 SQL 注入检查
在执行用户输入的 SQL SELECT 查询之前，我们还会进行 SQL 注入检查。我们创建了一个 Array List 来添加所有 SQL 注入字符串，并将检查 Array 中的任何单词是否与用户输入的 SELECT 查询匹配。例如，在上图中，我们可以在 SELECT 查询之后输入 DROP 查询。但是，当我们点击 Search 按钮时，我们会显示“DROP 不能在 SELECT 查询中使用”的消息。
这是我们在应用程序中使用的 SQL 注入字符串列表，您可以根据需要添加或删除。
// Array value to check for SQL Injection
$scope.sqlInjectionArray = ['create', 'drop', 'delete', 'insert', 'update', 'truncate',
'grant', 'print', 'sp_executesql', 'objects', 'declare',
'table', 'into', 'sqlcancel', 'sqlsetprop', 'sqlexec',
'sqlcommit', 'revoke', 'rollback', 'sqlrollback', 'values',
'sqldisconnect', 'sqlconnect', 'system_user', 'schema_name',
'schemata', 'information_schema', 'dbo', 'guest', 'db_owner',
'db_', 'table', '@@', 'Users', 'execute', 'sysname', 'sp_who',
'sysobjects', 'sp_', 'sysprocesses', 'master', 'sys', 'db_',
'is_', 'exec', 'end', 'xp_', '; --', 'alter', 'begin', 'cursor',
'kill', '--', 'tabname', 'sys'];
必备组件
Visual Studio 2015：您可以在此处下载。
Using the Code
步骤 1：创建示例数据库和表来测试此应用程序。这是一个 SQL 脚本，用于创建带有插入查询的数据库和表。请在您的 SQL Server 中运行以下代码以创建 DB 和表。
---- =============================================
---- Author : Shanu
---- Create date : 2016-05-12
---- Description : To Create Database,Table and Sample Insert Query
---- Latest
---- Modifier : Shanu
---- Modify date : 2016-05-12
---- =============================================
----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] = 'DashboardDB' )
DROP DATABASE DashboardDB
GO
CREATE DATABASE DashboardDB
GO
USE DashboardDB
GO
-- 1) //////////// ItemDetails table
-- Create Table ItemDetails,This table will be used to store the details like Item Information
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'ItemDetail' )
DROP TABLE ItemDetail
GO
CREATE TABLE [dbo].[ItemDetail](
[ID] [int] IDENTITY(1,1) NOT NULL,
[ItemNo] [varchar](100) NOT NULL ,
[ItemName] [varchar](100) NOT NULL,
[Comments] [varchar](100) NOT NULL,
[Price] INT NOT 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]
GO
Insert into ItemDetail(ItemNo,ItemName,Comments,Price) values
('101','NoteBook', 'HP Notebook 15 Inch', 24500)
Insert into ItemDetail(ItemNo,ItemName,Comments,Price) values
('102','MONITOR', 'SAMSNG', '8500')
Insert into ItemDetail(ItemNo,ItemName,Comments,Price) values
('103','MOBILE', 'SAMSUNG NOTE 5', 42500)
Insert into ItemDetail(ItemNo,ItemName,Comments,Price) values
('104','MOBILE', 'SAMSUNG S7 Edge', 56000)
Insert into ItemDetail(ItemNo,ItemName,Comments,Price) values
('105','MOUSE', 'ABKO', 780)
Insert into ItemDetail(ItemNo,ItemName,Comments,Price) values
('106','HDD' ,'LG', 3780)
select * from ItemDetail
select ItemName,SUM(convert(int,Price)) as totalCost
from ItemDetail
GROUP BY ItemName
-- 2) User table
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'UserDetails' )
DROP TABLE UserDetails
GO
CREATE TABLE [dbo].UserDetails(
[UserID] [int] IDENTITY(1,1) NOT NULL,
[UserName] [varchar](100) NOT NULL,
[UserType] [varchar](100) NOT NULL,
[Phone] [varchar](20) NOT NULL,
PRIMARY KEY CLUSTERED
(
[UserID] 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 into UserDetails(UserName,UserType,Phone) values
('SHANU','Admin','01039124503')
Insert into UserDetails(UserName,UserType,Phone) values
('Afraz','user','01039120984')
Insert into UserDetails(UserName,UserType,Phone) values
('Afreen','user','01039120005')
Insert into UserDetails(UserName,UserType,Phone) values
('Raj','Admin','01039120006')
Insert into UserDetails(UserName,UserType,Phone) values
('Mak','Manager','01039124567')
Insert into UserDetails(UserName,UserType,Phone) values
('Jack','Manager','01039120238')
Insert into UserDetails(UserName,UserType,Phone) values
('Pak','User','01039125409')
Insert into UserDetails(UserName,UserType,Phone) values
('Ninu','Accountant','01039126810')
Insert into UserDetails(UserName,UserType,Phone) values
('Nanu','Accountant','01039152011')
-- select * from Userdetails
-- 3 UserAddress
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'UserAddress' )
DROP TABLE UserAddress
GO
CREATE TABLE [dbo].UserAddress(
[UserAddID] [int] IDENTITY(1,1) NOT NULL,
[UserID] [int] ,
[Address] [varchar](200) NOT NULL,
[Email] [varchar](100) NOT NULL,
PRIMARY KEY CLUSTERED
(
[UserAddID] 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 into UserAddress(UserID,Address,Email) values
(1,'Madurai,Tamil Nadu, India','syedshanumcain@gmail.com')
Insert into UserAddress(UserID,Address,Email) values
(2,'Madurai,Tamil Nadu, India','afraz@afrazmail.com')
Insert into UserAddress(UserID,Address,Email) values
(3,'Seoul,South Korea','afreen@afrazmail.com')
select * from UserAddress
select A.UserName,A.UserType,A.Phone,B.Address,B.Email
From
Userdetails A Left Outer JOIN UserAddress B
on
A.UserID=B.UserID
创建存储过程以运行动态查询
这是我们用于运行所有动态 SQL SELECT 查询并将结果返回到我们的 MVC 页面进行绑定的主存储过程。
USE [DashboardDB]
GO
/****** Object: StoredProcedure [dbo].[USP_Dashboard_Select] ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
-- Author : Shanu
-- Create date : 2016-05-14
-- Description :To run dymanic Query
-- Tables used : Dynamic Table
-- Modifier : Shanu
-- Modify date : 2016-05-14
-- =============================================
-- To Select all user roles
-- EXEC USP_Dashboard_Select @columnName = 'UserName,UserType,Phone' ,@TableNames = 'UserDetails' ,@isCondition=0,@ConditionList='UserType=''ADMIN'' ',@isGroupBY =1,@GroupBYList = 'UserName,UserType,Phone', @isOrderBY =1,@OrderBYList = ' UserType '
-- EXEC USP_Dashboard_Select @columnName = 'ItemName,SUM(Price) as totalCost' ,@TableNames = 'ItemDetail' ,@isCondition=0,@ConditionList='Price>''400'' ',@isGroupBY =1,@GroupBYList = 'ItemName'
-- EXEC USP_Dashboard_Select @sqlQuery = 'Select * from ItemDetail'
-- EXEC USP_Dashboard_Select @sqlQuery = 'select ID,ItemNo ,ItemName ,Comments ,Price from ItemDetail'
-- =============================================
ALTER PROCEDURE [dbo].[USP_Dashboard_Select]
(
@sqlQuery varchar(MAX)='',
@columnName varchar(MAX)='',
@TableNames varchar(MAX)='',
@isCondition INT=0,
@ConditionList varchar(MAX)='',
@isGroupBY INT=0,
@GroupBYList varchar(MAX)='',
@isOrderBY INT=0,
@OrderBYList varchar(MAX)=''
)
AS
BEGIN
BEGIN TRY
IF @sqlQuery =''
BEGIN
SET @sqlQuery = 'SELECT ' + @columnName + ' FROM ' + @TableNames
IF @isCondition=1
BEGIN
SET @sqlQuery = @sqlQuery+ ' WHERE ' + @ConditionList
END
IF @isGroupBY=1
BEGIN
SET @sqlQuery = @sqlQuery+ ' GROUP BY ' + @GroupBYList
END
IF @isOrderBY=1
BEGIN
SET @sqlQuery = @sqlQuery+ ' Order BY ' + @OrderBYList
END
EXEC (@sqlQuery)
END
ELSE
BEGIN
EXEC (@sqlQuery)
END
END TRY
BEGIN CATCH
SELECT ERROR_NUMBER() AS ErrorNumber
,ERROR_MESSAGE() AS ErrorMessage;
END CATCH
END
步骤 2：在 Visual Studio 2015 中创建您的 MVC Web 应用程序
安装 Visual Studio 2015 后，点击 Start，然后点击 Programs，选择 Visual Studio 2015 - 点击 Visual Studio 2015。点击 New，然后点击 Project，选择 Web，然后选择 ASP.NET Web Application。输入您的项目名称，然后点击 OK。
选择 MVC、WEB API，然后点击 OK。
现在我们已经创建了 MVC 应用程序，下一步是在我们的 Web.Config 文件中添加连接字符串。在这里，我们不使用 Entity Framework。在这里，我们将直接通过普通的 ADO.NET 方法从我们的 MVC Web API 控制器方法获取数据。
<add name="dashboard" connectionString="Data Source=SQLSERVERNAME;Initial Catalog=DashboardDB;
Persist Security Info=True;User ID=UID;Password=PWD" providerName="System.Data.SqlClient" />
请使用您的 SQL Server 连接进行更新。
步骤 3：添加 Web API Controller
右键单击 Controllers 文件夹，点击 Add，然后点击 Controller。
在这里，我们将添加一个 WEB API Controller 以供 AngularJS 使用。
选择 Web API 2 Controller - Empty，然后点击 Add。接下来，输入控制器名称为 DashboardAPIController。
Get 方法
在这里，我们使用 HttpGet 方法通过普通的 ADO.NET 方法从数据库获取所有动态数据。
[HttpGet]
public string getDashboardDetails(string sqlQuery, string columnName, string tableNames, Nullable<int> isCondition, string conditionList, Nullable<int> isGroupBY, string groupBYList, Nullable<int> isOrderBY, string orderBYList)
{
if (sqlQuery == null)
sqlQuery = "";
if (columnName == null)
columnName = "";
if (tableNames == null)
tableNames = "";
if (isCondition == null)
isCondition = 0;
if (conditionList == null)
conditionList = "";
if (isGroupBY == null)
isGroupBY = 0;
if (groupBYList == null)
groupBYList = "";
if (isOrderBY == null)
isOrderBY = 0;
if (orderBYList == null)
orderBYList = "";
string connectionString = ConfigurationManager.ConnectionStrings["dashboard"].ToString();
DataSet ds = new DataSet();
using (SqlConnection connection = new SqlConnection(connectionString))
{
// Create the SQL command and add Sp name
SqlCommand command = new SqlCommand();
command.Connection = connection;
command.CommandText = "USP_Dashboard_Select";
command.CommandType = CommandType.StoredProcedure;
// Add parameter for Query.
SqlParameter parameter = new SqlParameter();
parameter.ParameterName = "@sqlQuery";
parameter.SqlDbType = SqlDbType.NVarChar;
parameter.Direction = ParameterDirection.Input;
parameter.Value = sqlQuery;
command.Parameters.Add(parameter);
// Add parameter for Column Names
SqlParameter parameter1 = new SqlParameter();
parameter1.ParameterName = "@columnName";
parameter1.SqlDbType = SqlDbType.NVarChar;
parameter1.Direction = ParameterDirection.Input;
parameter1.Value = columnName;
command.Parameters.Add(parameter1);
// Add parameter for Table names
SqlParameter parameter2 = new SqlParameter();
parameter2.ParameterName = "@tableNames";
parameter2.SqlDbType = SqlDbType.NVarChar;
parameter2.Direction = ParameterDirection.Input;
parameter2.Value = tableNames;
command.Parameters.Add(parameter2);
// Add parameter to check for Where condition
SqlParameter parameter3 = new SqlParameter();
parameter3.ParameterName = "@isCondition";
parameter3.SqlDbType = SqlDbType.NVarChar;
parameter3.Direction = ParameterDirection.Input;
parameter3.Value = isCondition;
command.Parameters.Add(parameter3);
// Add parameter for Where conditions
SqlParameter parameter4 = new SqlParameter();
parameter4.ParameterName = "@ConditionList";
parameter4.SqlDbType = SqlDbType.NVarChar;
parameter4.Direction = ParameterDirection.Input;
parameter4.Value = conditionList;
command.Parameters.Add(parameter4);
// Add parameter to check for Group By
SqlParameter parameter5 = new SqlParameter();
parameter5.ParameterName = "@isGroupBY";
parameter5.SqlDbType = SqlDbType.NVarChar;
parameter5.Direction = ParameterDirection.Input;
parameter5.Value = isGroupBY;
command.Parameters.Add(parameter5);
// Add parameter for Group By
SqlParameter parameter6 = new SqlParameter();
parameter6.ParameterName = "@groupBYList";
parameter6.SqlDbType = SqlDbType.NVarChar;
parameter6.Direction = ParameterDirection.Input;
parameter6.Value = groupBYList;
command.Parameters.Add(parameter6);
// Add parameter to check for Order By
SqlParameter parameter7 = new SqlParameter();
parameter7.ParameterName = "@isOrderBY";
parameter7.SqlDbType = SqlDbType.NVarChar;
parameter7.Direction = ParameterDirection.Input;
parameter7.Value = isOrderBY;
command.Parameters.Add(parameter7);
// Add parameter for OrderBY
SqlParameter parameter8 = new SqlParameter();
parameter8.ParameterName = "@orderBYList";
parameter8.SqlDbType = SqlDbType.NVarChar;
parameter8.Direction = ParameterDirection.Input;
parameter8.Value = orderBYList;
command.Parameters.Add(parameter8);
connection.Open();
using (SqlDataAdapter da = new SqlDataAdapter(command))
{
da.Fill(ds);
connection.Close();
}
}
return DataTableToJSONWithJavaScriptSerializer(ds.Tables[0]);
}
步骤 4：创建 AngularJs Controller
首先在 Script 文件夹内创建一个文件夹，我们将其命名为“MyAngular”。
现在将您的 Angular Controller 添加到该文件夹中。
右键单击 MyAngular 文件夹，点击 Add > New Item > 选择 Web > 选择 AngularJs Controller，然后命名 Controller。我们将 AngularJs Controller 命名为“Controller.js”。
如果 Angular JS 包丢失，请将包添加到您的项目中。
右键单击您的 MVC 项目，然后点击 -> 管理 NuGet 程序包。搜索 AngularJs 并点击安装。
Modules.js：在这里，我们将添加 AngularJS JavaScript 的引用，并创建一个名为“AngularJs_Module”的 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("dashbordModule", ['ngAnimate']);
})();
Controllers：在 AngularJS Controller 中，我们完成了所有业务逻辑，并将数据从 Web API 返回到我们的 MVC HTML 页面。
1. 变量声明
首先，我们声明了所有需要使用的局部变量。
app.controller("AngularJs_Controller", function ($scope, $filter, $timeout, $rootScope, $window, $http) {
$scope.date = new Date();
$scope.MyName = "shanu";
$scope.isQuerys = false;
$scope.Querys = "";
$scope.ColumnNames = "UserName,UserType,Phone";
$scope.TableNames = "UserDetails";
$scope.isCondition = false;
$scope.whereCondition = 0;
$scope.Conditions = "";
$scope.isGroupBy = false;
$scope.GroupBy = 0;
$scope.GroupBys = "";
$scope.isOrderBy = false;
$scope.OrderBy = 0;
$scope.OrderBys = "";
// Array value to check for SQL Injection
$scope.sqlInjectionArray = ['create', 'drop', 'delete', 'insert', 'update', 'truncate',
'grant', 'print', 'sp_executesql', 'objects', 'declare',
'table', 'into', 'sqlcancel', 'sqlsetprop', 'sqlexec',
'sqlcommit', 'revoke', 'rollback', 'sqlrollback', 'values',
'sqldisconnect', 'sqlconnect', 'system_user', 'schema_name',
'schemata', 'information_schema', 'dbo', 'guest', 'db_owner',
'db_', 'table', '@@', 'Users', 'execute', 'sysname', 'sp_who',
'sysobjects', 'sp_', 'sysprocesses', 'master', 'sys', 'db_',
'is_', 'exec', 'end', 'xp_', '; --', 'alter', 'begin', 'cursor',
'kill', '--', 'tabname', 'sys'];
Search 方法
当点击搜索按钮时，我们会调用此方法。在这里，在将所有参数传递给我们的 Web API 方法之前，我们会检查用户输入数据的所有验证。在此方法中，我们已注释了每个条件检查。
//search Details
$scope.searchDetails = function () {
// 1. Check for Select Query -> In this fucntion we check for SQL injection in user entered select query if any key word from the array list is found then we give msg to user to entert he valid select query
if ($scope.isQuerys == true) {
if ($scope.Querys != "") {
$scope.whereCondition = 1;
for (var i = 0; i < $scope.sqlInjectionArray.length-1; i++) {
if ($filter('lowercase')($scope.Querys).match($scope.sqlInjectionArray[i])) {
alert("Sorry " + $scope.sqlInjectionArray[i] + " keyword is not accepted in select query");
return;
}
}
searchTableDetails($scope.Querys, $scope.ColumnNames, $scope.TableNames, $scope.whereCondition, $scope.Conditions, $scope.GroupBy, $scope.GroupBys, $scope.OrderBy, $scope.OrderBys);
return;
}
else {
alert("Enter Your Select Query !");
return;
}
}
else
{
$scope.Querys = "";
}
// 2. Check for Column Names -> If user entered the valid column names the details will be checkd and binded in page
if ($scope.ColumnNames == "") {
alert("Enter the Column Details !");
return;
}
else
{
for (var i = 0; i < $scope.sqlInjectionArray.length - 1; i++) {
if ($filter('lowercase')($scope.ColumnNames).match($scope.sqlInjectionArray[i])) {
alert("Sorry " + $scope.sqlInjectionArray[i] + " keyword is not accepted in Column Names");
return;
}
}
}
// 3. Check for Table Names -> If user entered the valid Table names the details will be checkd and binded in page
if ($scope.TableNames == "") {
alert("Enter the Table Details !");
return;
}
else {
for (var i = 0; i < $scope.sqlInjectionArray.length - 1; i++) {
if ($filter('lowercase')($scope.TableNames).match($scope.sqlInjectionArray[i])) {
alert("Sorry " + $scope.sqlInjectionArray[i] + " keyword is not accepted in Table Names");
return;
}
}
}
// 4. Check for Where condition -> If user check the Where condition check box, the user entered where condition will be added to the select query
if ($scope.isCondition == true) {
if ($scope.Conditions == "") {
alert("Enter the Where Condition !");
return;
}
else {
for (var i = 0; i < $scope.sqlInjectionArray.length - 1; i++) {
if ($filter('lowercase')($scope.Conditions).match($scope.sqlInjectionArray[i])) {
alert("Sorry " + $scope.sqlInjectionArray[i] + " keyword is not accepted in Where Condition");
return;
}
}
$scope.whereCondition = 1;
}
}
else {
$scope.whereCondition = 0;
}
// 5. Check for GroupBy condition -> If user check the GroupBy condition check box, the user entered GroupBy condition will be added to the select query
if ($scope.isGroupBy == true) {
if ($scope.GroupBys == "") {
alert("Enter the Group By Details !");
return;
}
else {
for (var i = 0; i < $scope.sqlInjectionArray.length - 1; i++) {
if ($filter('lowercase')($scope.GroupBys).match($scope.sqlInjectionArray[i])) {
alert("Sorry " + $scope.sqlInjectionArray[i] + " keyword is not accepted in GroupBy");
return;
}
}
$scope.GroupBy = 1;
}
}
else {
$scope.GroupBy = 0;
}
// 6. Check for OrderBy condition -> If user check the OrderBy condition check box, the user entered OrderBy condition will be added to the select query
if ($scope.isOrderBy == true) {
if ($scope.OrderBys == "") {
alert("Enter the Group By details !");
return;
}
else {
for (var i = 0; i < $scope.sqlInjectionArray.length - 1; i++) {
if ($filter('lowercase')($scope.OrderBys).match($scope.sqlInjectionArray[i])) {
alert("Sorry " + $scope.sqlInjectionArray[i] + " keyword is not accepted in OrderBy");
return;
}
}
$scope.OrderBy = 1;
}
}
else {
$scope.OrderBy = 0;
}
searchTableDetails($scope.Querys, $scope.ColumnNames, $scope.TableNames, $scope.whereCondition, $scope.Conditions, $scope.GroupBy, $scope.GroupBys, $scope.OrderBy, $scope.OrderBys);
}
主搜索方法
最后，在验证之后，我们调用我们的主绑定方法，将所有参数传递给我们的 WEB API，以从数据库获取动态数据。
// Main Select and Bind function
//All query details entered by user after validation this method will be called to bind the result to the Dashboard page.
function searchTableDetails(sqlQuery, columnName, tableNames, isCondition, conditionList, isGroupBY, groupBYList, isOrderBY, orderBYList) {
$http.get('/api/DashboardAPI/getDashboardDetails/', { params: { sqlQuery: sqlQuery, columnName: columnName, tableNames: tableNames, isCondition: isCondition, conditionList: conditionList, isGroupBY: isGroupBY, groupBYList: groupBYList, isOrderBY: isOrderBY, orderBYList: orderBYList } }).success(function (data) {
$scope.dashBoadData = angular.fromJson(data);;
//alert($scope.dashBoadData.length);
//if ($scope.dashBoadData.length > 0) {
//}
})
.error(function () {
$scope.error = "An Error has occured while loading posts!";
});
}
关注点
首先运行 SQL 脚本来创建数据库和表，然后运行脚本来创建存储过程。使用您的本地 SQL Server 连接更新 Web.Config 连接字符串。运行应用程序并使用提供的示例 SELECT 脚本进行测试，以在您的仪表板页面上显示动态数据。
历史
2016-06-01 -> shanuMVCDashboardPart1.zip