• 应用程序源代码
• SQL 脚本

引言

曾经，Web 开发者不得不编写复杂的逻辑来在页面上渲染部分 UI。如今，拥有大量数据操作和处理的单页应用程序随处可见。但感谢 JQuery 和类似的 JavaScript 包装库的出现，我们可以轻松地开发这些功能。

在本文中，我们将借助基于 JQuery 的 DataTable 插件和 ASP.NET 泛处理程序从头开始开发数据网格。后端我们将使用 Sql Server 2008。那么，让我们直接进入主题...

注意： 如果您发现任何语法错误，请告诉我，我会修正它，这篇文章是随着时间的推移逐渐写成的。此外，我不是以英语为母语的人 :)。

背景

为了理解本文，您只需要对 JQuery 和 Underscore 工具集有所了解。我们将与服务器之间来回处理 JSON 数据。所以，您只需要熟悉 JSON 和泛处理程序。因此，我们的工作应用程序可能结构如下；

使用代码

我们将按照以下步骤来实现我们的目标

1. 客户端 UI
2. 创建数据表
3. 创建用于数据获取的存储过程
4. 在 ASP.NET 中开发泛处理程序作为中间层
5. 关于 Newtonsoft.Json 的一些事
6. 在 web.config 中添加处理程序

让我们一步步来看

1. 客户端 UI

我们的最终客户端 UI 将如下所示

页面头部

下面的代码显示了页面的头部部分。它引用了几个脚本，如 DataTable 脚本链接、JQuery 库、用于显示通知的 noty 插件等。代码注释很多，我希望很容易理解。

页面主体

主体包含 datatable 的占位符，DataTable 将在此处渲染。

页面脚本（概述）

我们的 Datatable 主要绑定脚本将如下所示

关于 Data Table 选项的一点说明

在我们的情况下，这些是 DataTable 中很少使用且常用的选项...

有关 DataTable 可用选项的更多详细信息，您可以访问 DataTable 官方插件网站。

自定义列

上面提到的脚本中的自定义列将如下所示

2. 创建数据表

我们可以使用 SQL 脚本创建一个简单的表，我们的表将如下所示；

CREATE TABLE [dbo].[hr_Customer](
    [CustomerID] [bigint] IDENTITY(1,1) NOT NULL,
    [CustomerCNIC] [varchar](15) NULL,
    [CustomerName] [varchar](200) NOT NULL,
    [CustomerAddress] [varchar](200) NOT NULL,    
    [OfficeTelephone] [varchar](50) NULL,
    [HomeTelephone] [varchar](50) NULL,
    [MobileNumber1] [varchar](50) NULL,
    [MobileNumber2] [varchar](50) NULL,    
    [Notes] [varchar](200) NULL,
    [IsActive] [bit] NOT NULL,
    [EntryDate] [datetime] NOT NULL,
    [ClosingDate] [datetime] NULL,    
    [sysDate] [datetime] NULL
 CONSTRAINT [PK_hr_Customer] PRIMARY KEY CLUSTERED 
(
    [CustomerID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY] 

这只是一个用于演示目的的简单表，我不想让读者分心于关键点。这种结构可以轻松应用于更大的数据表和连接视图等。

3. 创建用于数据获取的存储过程

DataTable 的所有数据请求都将由存储过程处理。它看起来有点复杂，但别担心，在处理我们的处理程序和前端 UI 时，我会尽量让它变得简单。

USE [CodeProject_DataTable]
GO

/*
	Author		: Muhammad Shoaib
	Date		: 22 Jun 2014 
	Description : This Procedure will fetched Latest Top [@pageSize]
	no. of items
*/

ALTER proc [dbo].[sp_hr_v1_0_get_Customers]
@currentIndex int,---current record index >>> 0 bases
@pageSize int,
@orderByClause varchar(max) = null, --optional sorting parameter,
@search varchar(max) = null, --search terms optional
@totalRecords as int output
as

set nocount on
	
declare @startIndex int
declare @endIndex int

set @startIndex = @currentIndex + 1
set @endIndex = @startIndex + @pageSize - 1

select @totalRecords = COUNT(*)	from hr_Customer c 	where c.IsActive = 1	

create table #ttt(
	RowNumber int,
	CustomerID bigint,
	CustomerCNIC varchar(15) null,
	CustomerName varchar(200) null,
	OfficeTelephone varchar(50) null,
	CustomerAddress varchar(200),	
	Notes varchar(200) null
)

--if there are some sorting columns then it will be a dynamic query 
--otherwise we will keep it simple 
if(@orderByClause is null and @search is null)
begin
	insert into #ttt(RowNumber,
	CustomerID,CustomerCNIC,CustomerName,OfficeTelephone,CustomerAddress,Notes)
	select ROW_NUMBER() over(order by CustomerID desc),  
	CustomerID,CustomerCNIC,CustomerName,OfficeTelephone,CustomerAddress,Notes 
	from hr_Customer c with(readcommitted)
	where c.IsActive = 1		
end
else
begin
	declare @searchClause varchar(max) = '1 = 1'
	
	if(@search is not null)
	begin
		set @searchClause = '(lower(CustomerName) like lower(''' + @search + ''') + ''%'' 
	or lower(CustomerAddress) like lower(''' + @search + ''') + ''%'')'
	end
	
	declare @query nvarchar(2000) = 'insert into #ttt(RowNumber,
	CustomerID,CustomerCNIC,CustomerName,OfficeTelephone,CustomerAddress,Notes)	
	select ROW_NUMBER() over(' + @orderByClause  +'),  
	CustomerID,CustomerCNIC,CustomerName,OfficeTelephone,CustomerAddress,Notes 
	from hr_Customer c with(readcommitted)
	where c.IsActive = 1
	and ' + @searchClause
		
	print @query
	
	exec sp_executesql @query
end

select * from #ttt
where RowNumber >= @startIndex and RowNumber <= @endIndex


drop table #ttt

4. 在 ASP.NET 中开发泛处理程序作为中间层

我一直在使用 Visual Studio.Net 2014 进行开发，您也可以选择 2008 或 2010 版的 .NET IDE。对于一些新手用户，我添加了一些截图说明如何操作

创建空白解决方案

您可以创建一个空白 Web 解决方案，它看起来像 这样。 

泛处理程序内部

在 Visual Studio.Net 中，我只使用默认设置，框架版本为 4.5。有趣的是，我们将在泛处理程序中使用一个非常特殊的 .NET 基于 JSON 的库，称为 Newtonsoft Json 库，稍后我将解释它。我们的 Json 处理程序看起来像这样

深入分析

让我们采用分而治之的方法来理解这个处理程序内部发生了什么；例如，当我们的 datatable 需要渲染其初始数据时，它会从 json 处理程序查询，整个请求看起来像这样

步骤 1

当服务器收到此请求时，我们的自定义处理程序将执行相应的逻辑来处理它...

第二步

GetJsonCustomer 将从数据库获取结果数据，并生成 DataTable 期望格式的 JSON 结果...

 

步骤 3

如果您想根据 DataTable 中选择的列对数据进行排序，那么这段代码将为您做到这一点。有关更多详细信息，请查看上面提到的请求格式截图。

步骤 4

最后，我们将从数据库获取数据，并以正确的格式发送回 DataTable 期望的数据。

步骤 5

以下代码片段将 .Net DataTable 转换为插件 DataTable 期望的正确响应格式。您可以看到我们将所有数据包装在 aaData 中，这是 DataTable 的预期容器。

上面的查询生成的响应将如下所示。

5. 关于 Newtonsoft.Json 的一些事

正如我上面提到的，我们将使用 Newtonsoft.Json 库将我们的对象序列化为正确的 JSON 字符串，并将客户端收到的 JSON 请求反序列化为正确的 .NET 对象。首先，您可以 在此处 查看此库。它非常容易使用和理解。我将与我的项目解决方案一起上传此库以供快速参考。一旦我们下载了这个库，它的文件夹结构看起来像这样；

一旦我们下载了正确的程序集，我们就必须在项目解决方案中添加其引用，它看起来像这样；

 

6. 在 web.config 中添加泛处理程序

将泛处理程序添加到解决方案非常简单，只需在解决方案资源管理器中右键单击项目，然后选择添加 > 新项 > Visual C# > Web > 泛处理程序。添加后，它将看起来像 这样。

像这样在 web.config 文件中添加处理程序节

兴趣点

如果您想使用极低的级别控制来构建数据网格，那么裸版泛处理程序将是与基于 JQuery 的 DataTable 插件结合使用的便捷解决方案。