画面配置
此范例使用 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()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()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()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()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,相关程序代码如下
/**/'''
''' 切换为浏览模式。
'''
Private Sub ChangeViewMode()Sub ChangeViewMode()
FormView1.Visible = False
GridView1.Visible = True
GridView1.EditIndex = -1
End Sub
Protected Sub FormView1_ItemCommand()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()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()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 的编辑模式。
