Creating GridView Columns Dynamically （Part 1）--动态创建GridView的列(一)

 

导读：

Beginning with this article I am starting a series that will show you how to create data bound controls such as GridView and DetailsView programmatically. To begin with Part 1 shows how to add bound fields and command fields to a GridView. The GridView thus created is fully functional with paging, sorting and editing features.

在开始写这个文章系列之前，我将介绍怎么通过编程来实现对数据绑定控件如GridView 和DetailsView的创建。在开始的第一篇文章中将会介绍如何向GridView添加绑定的列。创建的GridView具有分页，排序，编辑等功能。

创建一个简单的网页：

To begin with create a new web site in Visual Studio. Drag and drop a GridView control and an SqlDataSource control on the default web form. Do not set any property of either controls at design time. We will be doing that via code.

开始先在Visual Studio里面创建一个新的网页。在默认的Form中拖拽一个GridView控件和一个SqlDataSource控件。在设计期间，不要设置他们的任何属性，我们将通过代码来实现属性的设置。

Now key in the following code in the Page_Load event handler.

现在在Page_Load事件中敲入下面的代码：

protected void Page_Load(object sender, EventArgs e)
...{
SqlDataSource1.ConnectionString = 
@"data source=.;initial catalog=northwind;integrated security=true";
SqlDataSource1.SelectCommand = 
"select employeeID,FirstName,LastName from employees";
SqlDataSource1.UpdateCommand = 
"update employees set firstname=@FirstName,lastname=@LastName 
where employeeid=@EmployeeID";
SqlDataSource1.UpdateParameters.Add("@FirstName", "");
SqlDataSource1.UpdateParameters.Add("@LastName", "");
SqlDataSource1.UpdateParameters.Add("@EmployeeID", "");

if (!IsPostBack)
...{
GridView1.DataSourceID = "SqlDataSource1";
GridView1.AutoGenerateColumns = false;
GridView1.DataKeyNames = new string[] ...{ "EmployeeID" };
GridView1.AllowPaging = true;
GridView1.AllowSorting = true;
GridView1.PageSize = 5;

BoundField bf1 = new BoundField();
BoundField bf2 = new BoundField();
BoundField bf3 = new BoundField();

bf1.HeaderText = "Employee ID";
bf1.DataField = "EmployeeID";
bf1.ReadOnly = true;
bf1.SortExpression = "EmployeeID";

bf2.HeaderText = "First Name";
bf2.DataField = "FirstName";
bf2.SortExpression = "FirstName";

bf3.HeaderText = "Last Name";
bf3.DataField = "LastName";
bf3.SortExpression = "LastName";

CommandField cf = new CommandField();
cf.ButtonType = ButtonType.Button;
cf.ShowCancelButton = true;
cf.ShowEditButton = true;

GridView1.Columns.Add(bf1);
GridView1.Columns.Add(bf2);
GridView1.Columns.Add(bf3);
GridView1.Columns.Add(cf);
}
}

代码被分成如下几部分：

Configuring the SQL data source control（配置 SQL数据源控件）

The code sets the ConnectionString property SQL data source control to required database connection string. In our example we will be using Employees table of Northwind database. Then SelectCommand and UpdateCommand properties are set to corresponding SELECT and UPDATE queries. The UPDATE query is important. Note that the names of the parameters specified in UPDATE statement are matching the table column names. The UPDATE statement contains three parameters - @FirstName, @LastName and @EmployeeID. These parameters are then added to the UpdateParameters collection.

这段代码把SQL数据源的ConnectionString属性赋值为链接数据库所需的字符串。在我们的例子中，我们用到了Northwind数据库的Employee表，然后分别设置SelectCommand属性和UpdateComand属性为对应的SELECT和UPDATE语句。这个UPDATE语句很重要。值得注意的是在 UPDATE语句中声明的参数的名字是与表中列的名字相对应的。在UPDATE语句中包含了三个参数-@FirstName, @LastName and @EmployeeID.这些参数后来被添加到UpdateParameters集合当中。

Configuring the GridView control（配置GridView控件）

The GridView control uses SqlDataSource1 as its data source. This is indicated by setting the DataSourceID property of GridView. Further some properties of GridView are set. Note that you need to set these properties only once and hence they come inside the "if" condition. The AutoGenerateColumns property indicates whether to generate GridView columns automatically. We set this property to false as we wish to add them via code. The DataKeyNames property is a string array specifying the primary key columns. The AllowPagng and AllowSorting properties enable paging and sorting feature respectively. The PageSize property sets the page size to 5.

GridView控件使用SqlDataSource1作为数据源。这就意味着设置GridView的DataSourceID属性。当然还有更多其他属性的设置。 但值得注意的是你只需要设置这些属性一次，所以这些设置被放在了"if"条件语句的里面。AutoGeenerateColumns属性表示是否自动为GridView生成各列。我们把这个属性设置为false，因为我们要通过代码添加这些列。DataKeyNames 属性是一个用来指定列的主键的，它是一个字符串数组。AllowPagng 和AllowSorting属性分别控制了分页和排序的功能。PageSize属性设置为页面的行数是5.

Creating Bound Fields（创建绑定字段）

The GridView control can contain many types of columns such as BoundField, HyperLinkField and TemplateField. In this example we will be using BoundField columns. We need three bound fields for EmployeeID, FirstName and LastName respectively. A bound field is represented by a class called BoundField. The HeaderText property of BoundField class indicates the column heading. The DataField property indicates the name of the table column that you wish to display in the bound field. The SortExpression property governs if that bound field will be sortable or not. If you set the SortExpression property to a column name then the bound field will be sortable based on that column. Since EmployeeID bound field represents primary key we set its ReadOnly property to true. This way it won't be editable.

GridView控件能包含很多列的类型，比如：绑定字段，超链接字段和模板字段。在这个例子中我们将用绑定字段列。我们需要三个绑定字段分别对应EmployeeID, FirstName and LastName。一个绑定字段由一个成为BoundField的类来实现。绑定字段类的HeaderText属性指定了列的头。DataField属性指定了你想在绑定字段所显示的表中列的名字。SortExpression 属性负责这个绑定字段是否支持排序。如果你把SortExpression 属性设置为一个列的名字，那么这个绑定字段将根据这个列来进行排序。因为EmployeeID 绑定字段是主键，所以我们设置ReadOnly属性为True，这样它将不会被编辑。

In order to provide editing feature you need to add a CommandField column to the GridView. The ButtonType property of CommandField class indicates the type of button to render. Possible values are Button, LinkButton and ImageButton. The ShowCancelButton and ShowEditButton properties decide if the Edit and Cancel buttons will be displayed.

为了提供可编辑的功能，你需要在GridView中添加一个CommandField 列。这个CommandField 类的ButtonType 属性指定了将来生成的按钮的类型。可能的值有：Button, LinkButton and ImageButton。ShowCancelButton 和ShowEditButton 属性决定了是否显示编辑和取消按钮。

Once we create the columns they need to be added to the Columns collection of GridView.

一旦我们创建了这些列，他们就会添加到GridView中的列集合中。

That's it! If you run the web form then it should look as shown below:

就这样，如果我们运行这个网页，下面就是他的效果：