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 程序代码如下
Code
在同一页面上以 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 程序代码如下
Code
程序代码说明
GridView 的 CommandField 因为切换为 TemplateField，所以在 RowDataBound 事件中，需要去设定「编辑」钮的 CommandArgument 属性值为 RowIndex，GridView 的编辑动作才能正常执行。
1
Protected
Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
2
Dim oButton As Button
3
4 If e.Row.RowType = DataControlRowType.DataRow Then
5 '设定编辑钮的 CommandArgument
6 oButton = CType(e.Row.Cells(0).FindControl("btnEdit"), Button)
7 oButton.CommandArgument = e.Row.RowIndex.ToString
8 End If
9
End Sub
Protected
Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound2
Dim oButton As Button3
4
If e.Row.RowType = DataControlRowType.DataRow Then5
'设定编辑钮的 CommandArgument6
oButton = CType(e.Row.Cells(0).FindControl("btnEdit"), Button)7
oButton.CommandArgument = e.Row.RowIndex.ToString8
End If9
End Sub
程序执行时预设为浏览模式，故只有显示 GridView，而 FormView 预设是隐藏。当 GridView 按下新增及编辑时，需要将 GirdView 隐藏，将 FormView 显示。所以在 GridView 的 RowCommand 事件中撰写如下程序代码。
执行「编辑」时，以 GetEditIndex 函式是取得 FormView 对应的编辑列索引，设定给 FormView.PageIndex，并将 FormView 切换为编辑模式。
执行「新增」钮，将 FormView.InsertItemTemplate 设为 FormView.EddiItemTemplate，即新增及编辑都使用同一个 Template，并将 FormView 切换为新增模式。
1
Protected
Sub GridView1_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles GridView1.RowCommand
2 Dim iEditIndex As Integer
3
4 Select Case e.CommandName.ToUpper
5 Case "Edit".ToUpper '编辑模式
6 iEditIndex = GetEditIndex(CType(sender, GridView), CInt(e.CommandArgument))
7 FormView1.PageIndex = iEditIndex
8 FormView1.ChangeMode(FormViewMode.Edit) 'FormView 切换为编辑模式
9 FormView1.Visible = True 'FormView 显示
10 GridView1.Visible = False 'GridView 隐藏
11
12 Case "Insert".ToUpper '新增模式
13 '因为只有使用 EditItemTemplate，故将 InsertItemTemplate 设为 EditItemTemplate
14 FormView1.InsertItemTemplate = FormView1.EditItemTemplate
15 FormView1.ChangeMode(FormViewMode.Insert) 'FormView 切换为新增模式
16 FormView1.Visible = True 'FormView 显示
17 GridView1.Visible = False 'GridView 隐藏
18 End Select
19 End Sub
20
21
''' <summary>
22 ''' 取得编辑列索引。
23 ''' </summary>
24 ''' <param name="GridView">GridView 控件。</param>
25 ''' <param name="RowIndex">GridView 的数据列索引。</param>
26
Private
Function GetEditIndex(ByVal GridView As GridView, ByVal RowIndex As Integer) As Integer
27 Dim iEditIndex As Integer
28
29 If GridView.AllowPaging Then
30 'GridView 有分页时，要把考虑目前的页数及每页笔数
31 iEditIndex = (GridView.PageIndex) * GridView.PageSize + RowIndex
32 Else
33 'GridView 无分页时，直接使用 e.NewSelectedIndex
34 iEditIndex = RowIndex
35 End If
36 Return iEditIndex
37 End Function
Protected
Sub GridView1_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles GridView1.RowCommand2
Dim iEditIndex As Integer3
4
Select Case e.CommandName.ToUpper5
Case "Edit".ToUpper '编辑模式6
iEditIndex = GetEditIndex(CType(sender, GridView), CInt(e.CommandArgument))7
FormView1.PageIndex = iEditIndex8
FormView1.ChangeMode(FormViewMode.Edit) 'FormView 切换为编辑模式9
FormView1.Visible = True 'FormView 显示10
GridView1.Visible = False 'GridView 隐藏11
12
Case "Insert".ToUpper '新增模式13
'因为只有使用 EditItemTemplate，故将 InsertItemTemplate 设为 EditItemTemplate14
FormView1.InsertItemTemplate = FormView1.EditItemTemplate15
FormView1.ChangeMode(FormViewMode.Insert) 'FormView 切换为新增模式16
FormView1.Visible = True 'FormView 显示17
GridView1.Visible = False 'GridView 隐藏18
End Select19
End Sub
20
21
''' <summary>22
''' 取得编辑列索引。23
''' </summary>24
''' <param name="GridView">GridView 控件。</param>25
''' <param name="RowIndex">GridView 的数据列索引。</param>
26
Private
Function GetEditIndex(ByVal GridView As GridView, ByVal RowIndex As Integer) As Integer27
Dim iEditIndex As Integer28
29
If GridView.AllowPaging Then30
'GridView 有分页时，要把考虑目前的页数及每页笔数31
iEditIndex = (GridView.PageIndex) * GridView.PageSize + RowIndex32
Else33
'GridView 无分页时，直接使用 e.NewSelectedIndex34
iEditIndex = RowIndex35
End If36
Return iEditIndex37
End Function
在 FormView 中因为只使用 EddiItemTemplate 来处理「新增」及「编辑」模式，做需要置放「新增」、「更新」、「取消」三个按钮。
在「新增」模式显示「新增」钮与「取消」钮，以及显示 EmployeeID 字段的 TextBox。
在「编辑」模式显示「更新」钮与「取消」钮。EmployeeID 字段为只读，故隐藏 EmployeeID 字段的 TextBox。
针对以上的处理动作，在 FormView 的 PreRender 事件中撰写如下程序代码来处理 FormView 子控件的显示及隐藏状态。
1
Protected
Sub FormView1_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles FormView1.PreRender
2 Dim oFormView As FormView
3 Dim oLinkButton As LinkButton
4 Dim oTextBox As TextBox
5
6 oFormView = CType(sender, FormView)
7 If Not oFormView.Visible Then Exit Sub
8
9 Select Case oFormView.CurrentMode
10 Case FormViewMode.Edit '编辑模式
11 '隐藏新增钮
12 oLinkButton = oFormView.FindControl("InsertButton")
13 oLinkButton.Visible = False
14 '显示更新钮
15 oLinkButton = oFormView.FindControl("UpdateButton")
16 oLinkButton.Visible = True
17 '显示 EmployeeID 的 TextBox
18 oTextBox = oFormView.FindControl("txtEmployeeID")
19 oTextBox.Visible = False
20 Case FormViewMode.Insert
21 '显示新增钮
22 oLinkButton = oFormView.FindControl("InsertButton")
23 oLinkButton.Visible = True
24 '隐藏更新钮
25 oLinkButton = oFormView.FindControl("UpdateButton")
26 oLinkButton.Visible = False
27 '显示 EmployeeID 的 TextBox
28 oTextBox = oFormView.FindControl("txtEmployeeID")
29 oTextBox.Visible = True
30 End Select
31 End Sub
Protected
Sub FormView1_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles FormView1.PreRender2
Dim oFormView As FormView3
Dim oLinkButton As LinkButton4
Dim oTextBox As TextBox5
6
oFormView = CType(sender, FormView)7
If Not oFormView.Visible Then Exit Sub8
9
Select Case oFormView.CurrentMode10
Case FormViewMode.Edit '编辑模式11
'隐藏新增钮12
oLinkButton = oFormView.FindControl("InsertButton")13
oLinkButton.Visible = False14
'显示更新钮15
oLinkButton = oFormView.FindControl("UpdateButton")16
oLinkButton.Visible = True17
'显示 EmployeeID 的 TextBox18
oTextBox = oFormView.FindControl("txtEmployeeID")19
oTextBox.Visible = False20
Case FormViewMode.Insert21
'显示新增钮22
oLinkButton = oFormView.FindControl("InsertButton")23
oLinkButton.Visible = True24
'隐藏更新钮25
oLinkButton = oFormView.FindControl("UpdateButton")26
oLinkButton.Visible = False27
'显示 EmployeeID 的 TextBox28
oTextBox = oFormView.FindControl("txtEmployeeID")29
oTextBox.Visible = True30
End Select31
End Sub
当 FormView 执行「新增」、「更新」、「取消」钮的动作后，需要切换回浏览模式，即将 FormView 隐藏，而显示 GridView，相关程序代码如下。
1
''' <summary>
2 ''' 切换为浏览模式。
3 ''' </summary>
4
Private
Sub ChangeViewMode()
5 FormView1.Visible = False
6 GridView1.Visible = True
7 GridView1.EditIndex = -1
8 End Sub
9
10
Protected
Sub FormView1_ItemCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.FormViewCommandEventArgs) Handles FormView1.ItemCommand
11 If e.CommandName.ToUpper = "Cancel".ToUpper Then
12 '取消后，切换为浏览模式
13 ChangeViewMode()
14 End If
15 End Sub
16
17
Protected
Sub FormView1_ItemInserted(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.FormViewInsertedEventArgs) Handles FormView1.ItemInserted
18 '新增后，切换为浏览模式
19 ChangeViewMode()
20 End Sub
21
22
Protected
Sub FormView1_ItemUpdated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.FormViewUpdatedEventArgs) Handles FormView1.ItemUpdated
23 '更新后，切换为浏览模式
24 ChangeViewMode()
25 End Sub
''' <summary>2
''' 切换为浏览模式。3
''' </summary>
4
Private
Sub ChangeViewMode()5
FormView1.Visible = False6
GridView1.Visible = True7
GridView1.EditIndex = -18
End Sub
9
10
Protected
Sub FormView1_ItemCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.FormViewCommandEventArgs) Handles FormView1.ItemCommand11
If e.CommandName.ToUpper = "Cancel".ToUpper Then12
'取消后，切换为浏览模式13
ChangeViewMode()14
End If15
End Sub
16
17
Protected
Sub FormView1_ItemInserted(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.FormViewInsertedEventArgs) Handles FormView1.ItemInserted18
'新增后，切换为浏览模式19
ChangeViewMode()20
End Sub
21
22
Protected
Sub FormView1_ItemUpdated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.FormViewUpdatedEventArgs) Handles FormView1.ItemUpdated23
'更新后，切换为浏览模式24
ChangeViewMode()25
End Sub
执行程序
执行程序预设为浏览模式
按下 GridView 的「新增」钮时，即会切换到 FormView 的新增模式。
按钮 GridView 的「编辑」钮时，即会切换到 FormView 的编辑模式。
