使用 devexpress gridview 在运行时创建详细网格模板
一个简单的示例，展示了如何使用 ASPxGridView 在运行时创建详细网格模板。
编者按
本文出现在第三方产品和工具部分。本部分中的文章仅供会员使用，不得以任何方式推广或宣传产品。请举报任何垃圾邮件或广告。
引言
作为一名 Web 开发人员，我可能会在许多 Web 应用程序中使用 DevExpress 控件。在本文中，我将向您展示一个 aspxgridview（一种在数据驱动应用程序中常用的控件）的示例，以及如何在运行时动态绑定它。我将使用 ASP.NET 控件套件，更具体地说，是 Web Forms。
创建项目
我将创建一个空的 Visual Studio ASP.NET Web 应用程序。我还创建了一个简单的数据库，其中包含一个主表 (Categories) 和另一个明细表 (Products)，并且 (Products) 表中的一条记录引用 (Categories) 表中的一条记录，如下图所示。
我使用 SQL Server 2012 创建了数据库，该应用程序是为 .net framework 4.5 编写的，示例是用 C# 编写的，我使用的 devexpress 版本是 Version=15.2.4.0。
使用代码
我创建了一个简单的 DataHelper 类来从数据库检索数据，我将不关注从数据库获取数据的实践，而是关注创建数据并将其绑定到明细模板网格的方式。
创建 DataHelper 类
DataHelper 类包含两个方法，第一个方法 (GetConnection) 用于获取本地服务器上数据库 MasterDetailDB 的数据库连接。
第二个方法 (getDataTable) 用于获取一个 datatable，它接受一个查询作为字符串参数，以便针对数据库执行。
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
namespace MasterDetailTemplateRuntim.AppCode
{
public class DataHelper
{
public SqlConnection GetConnection()
{
string connStr = System.Configuration.ConfigurationManager.ConnectionStrings["MasterDetailDBConnectionString"].ConnectionString;
SqlConnection conn = new SqlConnection(connStr);
return conn;
}
public DataTable getDataTable(string query)
{
DataTable table = new DataTable("Table");
SqlCommand cmd = new SqlCommand(query, GetConnection());
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(table);
return table;
}
}
}
getDataTable 方法用于绑定主网格和明细网格，这取决于传递的查询。
添加 DetailGridTemplate 类
DetailGridTemplate 类是一个实现 ITemplate 接口的类，因此它必须实现 instantiateIn 方法，该方法确定在哪个控件中实例化模板。
using DevExpress.Web;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
namespace MasterDetailTemplateRuntim.AppCode
{
public class DetailGridTemplate: ITemplate
{
Control parent;
object masterKey;
ASPxGridView detailGrid;
public DetailGridTemplate(ASPxGridView grid)
{
this.detailGrid = grid;
}
public void InstantiateIn(Control container)
{
parent = container;
masterKey = ((GridViewDetailRowTemplateContainer)parent).KeyValue;
parent.Controls.Add(detailGrid);
}
}
}
与之前一样，DetailGridTemplate 类有一个公共构造函数，它接受 detailgrid 作为参数，将其添加到模板中。
创建主网格和明细网格
现在我们添加一个 webform (MasterDetailPage.aspx)，并在 Page_Load 事件处理程序中创建一个 ASPxGridView 对象。
using DevExpress.Web;
using MasterDetailTemplateRuntim.AppCode;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace MasterDetailTemplateRuntim
{
public partial class MasterDetailPage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//create master grid
ASPxGridView MasterGrid = new ASPxGridView();
ASPxGridView dGrid = new ASPxGridView();
dGrid.BeforePerformDataSelect += dGrid_BeforePerformDataSelect;
MasterGrid.AutoGenerateColumns = true;
MasterGrid.SettingsDetail.ShowDetailRow = true;
MasterGrid.KeyFieldName = "ID";
}
}
}
如您所见，上面的代码创建了主网格和明细网格，并为明细网格注册了 BeforePerformDataSelect 处理程序，以允许在运行时将明细网格与数据源绑定。
创建 DetailGridTemplate
在下一个代码段中，创建一个 DetialGridTemplate 实例，并一步将其分配给 mastergrid 明细行模板。请注意，明细网格作为参数传递给构造函数。
MasterGrid.Templates.DetailRow = new DetailGridTemplate(dGrid);
并绑定主网格数据源
DataHelper dh=new DataHelper();
MasterGrid.DataSource = dh.getDataTable("select * from categories");
MasterGrid.DataBind();
Page.Form.Controls.Add(MasterGrid); // adding the master grid to page form's controls
现在，为了根据主记录绑定明细网格，我们创建处理 BeforePerformDataSelect 事件的处理程序方法。
void dGrid_BeforePerformDataSelect(object sender, EventArgs e)
{
ASPxGridView grid=sender as ASPxGridView;
grid.AutoGenerateColumns = true;
DataHelper dh = new DataHelper();
grid.DataSource =dh.getDataTable("select * from products where categoryID="+ grid.GetMasterRowKeyValue().ToString());
}
如前面的代码所示，ASPxGridView 类提供了一种方法来获取主网格的主行的键值 (GetMasterRowKeyValue)，该键值用于获取与主行相关的所有明细行。
最后，MasterDetailPage.aspx.cs 如下所示。
using DevExpress.Web;
using MasterDetailTemplateRuntim.AppCode;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace MasterDetailTemplateRuntim
{
public partial class MasterDetailPage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//create master grid
ASPxGridView MasterGrid = new ASPxGridView();
ASPxGridView dGrid = new ASPxGridView();
dGrid.BeforePerformDataSelect += dGrid_BeforePerformDataSelect;
MasterGrid.AutoGenerateColumns = true;
MasterGrid.SettingsDetail.ShowDetailRow = true;
MasterGrid.KeyFieldName = "ID";
//create detail grid and add it to the detail tamplate
MasterGrid.Templates.DetailRow = new DetailGridTemplate(dGrid);
DataHelper dh=new DataHelper();
MasterGrid.DataSource = dh.getDataTable("select * from categories");
MasterGrid.DataBind();
Page.Form.Controls.Add(MasterGrid);
//add the template to grid
}
void dGrid_BeforePerformDataSelect(object sender, EventArgs e)
{
ASPxGridView grid=sender as ASPxGridView;
grid.AutoGenerateColumns = true;
DataHelper dh = new DataHelper();
grid.DataSource =dh.getDataTable("select * from products where categoryID="+ grid.GetMasterRowKeyValue().ToString());
}
}
}
并且 MasterDetailPage.aspx 不包含任何网格，但所有这些都是以编程方式完成的。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MasterDetailPage.aspx.cs" Inherits="MasterDetailTemplateRuntim.MasterDetailPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
最终结果应该是这样的。
源代码
您可以在这里找到包含数据库脚本的源代码，请先阅读 readme 文件。