GridView新增功能圖文篇

補上一篇有圖片的「GridView新增功能」，以Visual Studio 2010來實作。

第一步：準備

1. 新增專案 →「ASP.NET 空白 Web 應用程式」；
   
   

   

   新增專案

2. 加入 → 新增項目 → Web Form → 名稱：「Default.aspx」；
3. 切換至「設計」→ 拉入「GridView 及 SqlDataSource」；
   
   

   

   GridView + SqlDataSource

4. 設定「SqlDataSource」，重點在sqlDataSource設定裡的「進階」必須產生Insert、Delete、Update等語法；

以下範列使用Northwind資料庫中的Customers資料表。

<form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server">
        </asp:GridView>
        <br />
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
            DeleteCommand="DELETE FROM [Customers] WHERE [CustomerID] = @CustomerID" 
            InsertCommand="INSERT INTO [Customers] ([CustomerID], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Region], [PostalCode], [Country], [Phone], [Fax]) VALUES (@CustomerID, @CompanyName, @ContactName, @ContactTitle, @Address, @City, @Region, @PostalCode, @Country, @Phone, @Fax)" 
            SelectCommand="SELECT * FROM [Customers]" 
            UpdateCommand="UPDATE [Customers] SET [CompanyName] = @CompanyName, [ContactName] = @ContactName, [ContactTitle] = @ContactTitle, [Address] = @Address, [City] = @City, [Region] = @Region, [PostalCode] = @PostalCode, [Country] = @Country, [Phone] = @Phone, [Fax] = @Fax WHERE [CustomerID] = @CustomerID">
            <DeleteParameters>
                <asp:Parameter Name="CustomerID" Type="String" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="CustomerID" Type="String" />
                <asp:Parameter Name="CompanyName" Type="String" />
                <asp:Parameter Name="ContactName" Type="String" />
                <asp:Parameter Name="ContactTitle" Type="String" />
                <asp:Parameter Name="Address" Type="String" />
                <asp:Parameter Name="City" Type="String" />
                <asp:Parameter Name="Region" Type="String" />
                <asp:Parameter Name="PostalCode" Type="String" />
                <asp:Parameter Name="Country" Type="String" />
                <asp:Parameter Name="Phone" Type="String" />
                <asp:Parameter Name="Fax" Type="String" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="CompanyName" Type="String" />
                <asp:Parameter Name="ContactName" Type="String" />
                <asp:Parameter Name="ContactTitle" Type="String" />
                <asp:Parameter Name="Address" Type="String" />
                <asp:Parameter Name="City" Type="String" />
                <asp:Parameter Name="Region" Type="String" />
                <asp:Parameter Name="PostalCode" Type="String" />
                <asp:Parameter Name="Country" Type="String" />
                <asp:Parameter Name="Phone" Type="String" />
                <asp:Parameter Name="Fax" Type="String" />
                <asp:Parameter Name="CustomerID" Type="String" />
            </UpdateParameters>
        </asp:SqlDataSource>
    </div> 

第二步：GridView的新增環境

1. 進入GridView的「編輯樣板」，選擇「EmptyDataTemplate」樣板；
2. 拉一個DetailsView進去EmptyDataTemplate，資料來源選擇與GridView同一來源(sqlDataSouce)；原因上面說了，我們要使用同一資料來源裡的Inster語法；
3. 設定DetailsView的DefaultMode為「Insert」；
   
   

   

   Insert Mode

4. 勾選DetailsView的「啟用插入」；
   
   

   

   DetailsView

5. 進入DetailsView的「編輯欄位」，找「選取的欄位」最下方的「CommandField(中文版是：新增、插入、取消)」，把ShowCancelButton屬性設為「False」；因為在EmptyDataTemplate樣板中DetailsView取消按鈕不會有作用，留下會讓使用者把到「把柄」說：「你的程式有Bug！」
   
   

   

   DetailsView: 編輯欄位

   

   DetailsView : 取消CancelButton

第三步：GridView的新增觸發

1. 選擇GridView的「編輯欄位」；
2. 加入一個「ButtonField」，移動一下位置；設定ButtonField屬性Text：設定為「新增」；
3. (重點)設定ButtonField屬性CommandName="GridInsert"(名稱請自訂)

GridView : 「新增」按鈕

第四步：讓GridView觸發事件，進入「EmptyDataTemplate樣板」

GridView : RowCommand事件

Protected Sub GridView1_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles GridView1.RowCommand
    '中斷GridView與sqlDataSource的「綁定,Binding」中斷
    '讓GridView進入EmptyDataTemplate樣板
    If e.CommandName = "GridInsert" Then
        GridView1.DataSourceID = Nothing
    End If
End Sub

第五步：從EmptyDataTemplate樣板返回GridView

1. (重點)在DetailsView中進入「編輯欄位」，選擇下方「CommandField(中文版是：新增、插入、取消)」，然後轉換為TemplateField欄位，回到DetailsView中；
   
   

   

   DetailsView : 轉換為樣版

2. 選擇「編輯樣板」的「InsertItemTemplate」；新增作用在InsertItem樣板；
   
   

   

   DetailsView : 編輯樣板

   
   
   

   

   DetailsView : InsertItemTemplate

3. 從「標準」工具中拉一個「Button」控制項(LinkButton或ImageButton也可以)到InsertItemTemplate樣板中；
   
   

   

   DetailsView : Back Link

4. 設定Button屬性：Text為「Back GridView」；ID為「bntBack」；
5. (重點)在Button控制項上點兩下，進入後置程式碼；
   
   

   Protected Sub bntBack_Click(ByVal sender As Object, ByVal e As EventArgs)
       Me.GridView1.DataSourceID = "SqlDataSource1"
   End Sub
   

6. 結束所有樣板編輯

這樣就完成所有功能。

Demo：

GridView : 新增按鈕

DetailsView : 新增畫面

DetailsView : 新增資料

新增完成後按Back回到GridView

下載後，請自行修改Web.config中的連線字串。