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 [email protected],[email protected] 

        
  
             
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語句中包含了三個參數[email protected], @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:

就這樣，如果我們運作這個網頁，下面就是他的效果：