GridView+FormView 示範資料 新增/修改/刪除
摘要
在同一頁面上以 GridView 配合 FormView 來完成資料的「新增/修改/刪除」，在這個範例中有下列二個特點。
1. GridView 及 FormView 繫結同一個 SqlDataSource 控制項。
2. FormView 只使用 EditItemTemplate，同時來做新增及修改的動作。
範例程式碼: GridView1.rar
畫面配置
此範例使用 Northwind 資料庫的 Employees 資料表當作資料來源，在頁面上放置 SqlDataSource、GridView、FormView，而 GridView 及 FormView 繫結至同一個 SqlDataSource 控制項。
GridView 的部分，啟用分頁模式，每頁設為 5 筆，並將 CommandField 轉為 TemplateField，然後在 HeaderTemplate 部分加入一個「新增」鈕。
FormView 的部分在瀏覽模式為隱藏，設定屬性 Visible="False"。執行新增及編輯時只會使用到 EditItemTemplate，故只保留 EditItemTemplate 的內容，然後設定屬性 DefaultMode="Edit"。
aspx 程式碼如下
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>未命名頁面</title>
</head>
<body>
<form id="form1" runat="server">
<div style="text-align: center">
<strong><span style="color: #3333ff">GridView+FormView 示範資料 新增/修改/刪除<br />
</span></strong>
<br />
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False"
CellPadding="4" DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1" EmptyDataText="沒有資料錄可顯示。"
ForeColor="#333333" GridLines="None" PageSize="5">
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#EFF3FB" />
<Columns>
<asp:TemplateField ShowHeader="False">
<HeaderTemplate>
<asp:Button ID="btnInsert" runat="server" CausesValidation="False" CommandName="Insert"
Text="新增"></asp:Button>
</HeaderTemplate>
<ItemTemplate>
<asp:Button ID="btnEdit" runat="server" CausesValidation="False" CommandName="Edit"
Text="編輯"></asp:Button>
<asp:Button ID="btnDelete" runat="server" CausesValidation="False" CommandName="Delete"
Text="刪除"></asp:Button>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" InsertVisible="False"
ReadOnly="True" SortExpression="EmployeeID" />
<asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
<asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
<asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
</Columns>
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#2461BF" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
<asp:FormView ID="FormView1" runat="server" CellPadding="4" DataKeyNames="EmployeeID"
DataSourceID="SqlDataSource1" DefaultMode="Edit" ForeColor="#333333" Visible="False">
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
<EditItemTemplate>
<table style="width: 400px">
<tr>
<td style="width: 100px; text-align: left">
EmployeeID</td>
<td style="width: 392px; text-align: left">
<asp:Label ID="EmployeeIDLabel1" runat="server" Text='<%# Eval("EmployeeID") %>'></asp:Label>
<asp:TextBox ID="txtEmployeeID" runat="server" Text='<%# Bind("EmployeeID") %>'></asp:TextBox></td>
</tr>
<tr>
<td style="width: 100px; text-align: left">
LastName</td>
<td style="width: 392px; text-align: left">
<asp:TextBox ID="txtLastName" runat="server" Text='<%# Bind("LastName") %>'></asp:TextBox></td>
</tr>
<tr>
<td style="width: 100px; text-align: left">
FirstName</td>
<td style="width: 392px; text-align: left">
<asp:TextBox ID="txtFirstName" runat="server" Text='<%# Bind("FirstName") %>'></asp:TextBox></td>
</tr>
<tr>
<td style="width: 100px; text-align: left">
Title</td>
<td style="width: 392px; text-align: left">
<asp:TextBox ID="txtTitle" runat="server" Text='<%# Bind("Title") %>'></asp:TextBox></td>
</tr>
</table>
<br />
<asp:LinkButton ID="InsertButton" runat="server" CausesValidation="False" CommandName="Insert"
Text="新增"></asp:LinkButton>
<asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update"
Text="更新"></asp:LinkButton>
<asp:LinkButton ID="CancelButton" runat="server" CausesValidation="False" CommandName="Cancel"
Text="取消"></asp:LinkButton>
</EditItemTemplate>
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
</asp:FormView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString1 %>"
DeleteCommand="DELETE FROM [Employees] WHERE [EmployeeID] = @original_EmployeeID" InsertCommand="INSERT INTO [Employees] ([LastName], [FirstName], [Title]) VALUES (@LastName, @FirstName, @Title)"
ProviderName="<%$ ConnectionStrings:NorthwindConnectionString1.ProviderName %>"
SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title] FROM [Employees]"
UpdateCommand="UPDATE [Employees] SET [LastName] = @LastName, [FirstName] = @FirstName, [Title] = @Title WHERE [EmployeeID] = @original_EmployeeID" OldValuesParameterFormatString="original_{0}">
<DeleteParameters>
<asp:Parameter Name="original_EmployeeID" Type="Int32" />
</DeleteParameters>
<InsertParameters>
<asp:Parameter Name="LastName" Type="String" />
<asp:Parameter Name="FirstName" Type="String" />
<asp:Parameter Name="Title" Type="String" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="LastName" Type="String" />
<asp:Parameter Name="FirstName" Type="String" />
<asp:Parameter Name="Title" Type="String" />
<asp:Parameter Name="original_EmployeeID" Type="Int32" />
</UpdateParameters>
</asp:SqlDataSource>
<br />
</div>
</form>
</body>
</html>
程式碼說明
GridView 的 CommandField 因為切換為 TemplateField，所以在 RowDataBound 事件中，需要去設定「編輯」鈕的 CommandArgument 屬性值為 RowIndex，GridView 的編輯動作才能正常執行。
Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
Dim oButton As Button
If e.Row.RowType = DataControlRowType.DataRow Then
'設定編輯鈕的 CommandArgument
oButton = CType(e.Row.Cells(0).FindControl("btnEdit"), Button)
oButton.CommandArgument = e.Row.RowIndex.ToString
End If
End Sub程式執行時預設為瀏覽模式，故只有顯示 GridView，而 FormView 預設是隱藏。當 GridView 按下新增及編輯時，需要將 GirdView 隱藏，將 FormView 顯示。所以在 GridView 的 RowCommand 事件中撰寫如下程式碼。
執行「編輯」時，以 GetEditIndex 函式是取得 FormView 對應的編輯列索引，設定給 FormView.PageIndex，並將 FormView 切換為編輯模式。
執行「新增」鈕，將 FormView.InsertItemTemplate 設為 FormView.EddiItemTemplate，即新增及編輯都使用同一個 Template，並將 FormView 切換為新增模式。
Protected Sub GridView1_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles GridView1.RowCommand
Dim iEditIndex As Integer
Select Case e.CommandName.ToUpper
Case "Edit".ToUpper '編輯模式
iEditIndex = GetEditIndex(CType(sender, GridView), CInt(e.CommandArgument))
FormView1.PageIndex = iEditIndex
FormView1.ChangeMode(FormViewMode.Edit) 'FormView 切換為編輯模式
FormView1.Visible = True 'FormView 顯示
GridView1.Visible = False 'GridView 隱藏
Case "Insert".ToUpper '新增模式
'因為只有使用 EditItemTemplate，故將 InsertItemTemplate 設為 EditItemTemplate
FormView1.InsertItemTemplate = FormView1.EditItemTemplate
FormView1.ChangeMode(FormViewMode.Insert) 'FormView 切換為新增模式
FormView1.Visible = True 'FormView 顯示
GridView1.Visible = False 'GridView 隱藏
End Select
End Sub
''' <summary>
''' 取得編輯列索引。
''' </summary>
''' <param name="GridView">GridView 控制項。</param>
''' <param name="RowIndex">GridView 的資料列索引。</param>
Private Function GetEditIndex(ByVal GridView As GridView, ByVal RowIndex As Integer) As Integer
Dim iEditIndex As Integer
If GridView.AllowPaging Then
'GridView 有分頁時，要把考慮目前的頁數及每頁筆數
iEditIndex = (GridView.PageIndex) * GridView.PageSize + RowIndex
Else
'GridView 無分頁時，直接使用 e.NewSelectedIndex
iEditIndex = RowIndex
End If
Return iEditIndex
End Function在 FormView 中因為只使用 EddiItemTemplate 來處理「新增」及「編輯」模式，做需要置放「新增」、「更新」、「取消」三個按鈕。
在「新增」模式顯示「新增」鈕與「取消」鈕，以及顯示 EmployeeID 欄位的 TextBox。
在「編輯」模式顯示「更新」鈕與「取消」鈕。EmployeeID 欄位為唯讀，故隱藏 EmployeeID 欄位的 TextBox。
針對以上的處理動作，在 FormView 的 PreRender 事件中撰寫如下程式碼來處理 FormView 子控制項的顯示及隱藏狀態。
Protected Sub FormView1_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles FormView1.PreRender
Dim oFormView As FormView
Dim oLinkButton As LinkButton
Dim oTextBox As TextBox
oFormView = CType(sender, FormView)
If Not oFormView.Visible Then Exit Sub
Select Case oFormView.CurrentMode
Case FormViewMode.Edit '編輯模式
'隱藏新增鈕
oLinkButton = oFormView.FindControl("InsertButton")
oLinkButton.Visible = False
'顯示更新鈕
oLinkButton = oFormView.FindControl("UpdateButton")
oLinkButton.Visible = True
'顯示 EmployeeID 的 TextBox
oTextBox = oFormView.FindControl("txtEmployeeID")
oTextBox.Visible = False
Case FormViewMode.Insert
'顯示新增鈕
oLinkButton = oFormView.FindControl("InsertButton")
oLinkButton.Visible = True
'隱藏更新鈕
oLinkButton = oFormView.FindControl("UpdateButton")
oLinkButton.Visible = False
'顯示 EmployeeID 的 TextBox
oTextBox = oFormView.FindControl("txtEmployeeID")
oTextBox.Visible = True
End Select
End Sub當 FormView 執行「新增」、「更新」、「取消」鈕的動作後，需要切換回瀏覽模式，即將 FormView 隱藏，而顯示 GridView，相關程式碼如下。
''' <summary>
''' 切換為瀏覽模式。
''' </summary>
Private Sub ChangeViewMode()
FormView1.Visible = False
GridView1.Visible = True
GridView1.EditIndex = -1
End Sub
Protected Sub FormView1_ItemCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.FormViewCommandEventArgs) Handles FormView1.ItemCommand
If e.CommandName.ToUpper = "Cancel".ToUpper Then
'取消後，切換為瀏覽模式
ChangeViewMode()
End If
End Sub
Protected Sub FormView1_ItemInserted(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.FormViewInsertedEventArgs) Handles FormView1.ItemInserted
'新增後，切換為瀏覽模式
ChangeViewMode()
End Sub
Protected Sub FormView1_ItemUpdated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.FormViewUpdatedEventArgs) Handles FormView1.ItemUpdated
'更新後，切換為瀏覽模式
ChangeViewMode()
End Sub
執行程式
執行程式預設為瀏覽模式
按下 GridView 的「新增」鈕時，即會切換到 FormView 的新增模式。
按鈕 GridView 的「編輯」鈕時，即會切換到 FormView 的編輯模式。
