GridView+FormView 示范数据新增/修改/删除

最新推荐文章于 2019-01-08 08:53:03 发布

weixin_33984032

最新推荐文章于 2019-01-08 08:53:03 发布

阅读量168

点赞数

文章标签： xhtml ui 数据库

摘要
在同一页面上以 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
1

@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4

<html xmlns="http://www.w3.org/1999/xhtml" >
6

<head runat="server">
7

<title>未命名页面</title>
8

</head>
9

<body>
10

<form id="form1" runat="server">
11

<div style="text-align: center">
12

<strong><span style="color: #3333ff">GridView+FormView 示范数据新增/修改/删除<br />
13

</span></strong>
14

<br />
15

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False"
16

CellPadding="4" DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1" EmptyDataText="没有数据录可显示。"
17

ForeColor="#333333" GridLines="None" PageSize="5">
18

<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
19

<RowStyle BackColor="#EFF3FB" />
20

<Columns>
21

<asp:TemplateField ShowHeader="False">
22

<HeaderTemplate>
23

<asp:Button ID="btnInsert" runat="server" CausesValidation="False" CommandName="Insert"
24

Text="新增"></asp:Button>
25

</HeaderTemplate>
26

<ItemTemplate>
27

<asp:Button ID="btnEdit" runat="server" CausesValidation="False" CommandName="Edit"
28

Text="编辑"></asp:Button>
29

<asp:Button ID="btnDelete" runat="server" CausesValidation="False" CommandName="Delete"
30

Text="删除"></asp:Button>
31

</ItemTemplate>
32

</asp:TemplateField>
33

<asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" InsertVisible="False"
34

ReadOnly="True" SortExpression="EmployeeID" />
35

<asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
36

<asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
37

<asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
38

</Columns>
39

<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
40

<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
41

<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
42

<EditRowStyle BackColor="#2461BF" />
43

<AlternatingRowStyle BackColor="White" />
44

</asp:GridView>
45

<asp:FormView ID="FormView1" runat="server" CellPadding="4" DataKeyNames="EmployeeID"
46

DataSourceID="SqlDataSource1" DefaultMode="Edit" ForeColor="#333333" Visible="False">
47

<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
48

<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
49

<EditItemTemplate>
50

<table style="width: 400px">
51

<tr>
52

<td style="width: 100px; text-align: left">
53

EmployeeID</td>
54

<td style="width: 392px; text-align: left">
55

<asp:Label ID="EmployeeIDLabel1" runat="server" Text='<%# Eval("EmployeeID") %>'></asp:Label>
56

<asp:TextBox ID="txtEmployeeID" runat="server" Text='<%# Bind("EmployeeID") %>'></asp:TextBox></td>
57

</tr>
58

<tr>
59

<td style="width: 100px; text-align: left">
60

LastName</td>
61

<td style="width: 392px; text-align: left">
62

<asp:TextBox ID="txtLastName" runat="server" Text='<%# Bind("LastName") %>'></asp:TextBox></td>
63

</tr>
64

<tr>
65

<td style="width: 100px; text-align: left">
66

FirstName</td>
67

<td style="width: 392px; text-align: left">
68

<asp:TextBox ID="txtFirstName" runat="server" Text='<%# Bind("FirstName") %>'></asp:TextBox></td>
69

</tr>
70

<tr>
71

<td style="width: 100px; text-align: left">
72

Title</td>
73

<td style="width: 392px; text-align: left">
74

<asp:TextBox ID="txtTitle" runat="server" Text='<%# Bind("Title") %>'></asp:TextBox></td>
75

</tr>
76

</table>
77

<br />
78

<asp:LinkButton ID="InsertButton" runat="server" CausesValidation="False" CommandName="Insert"
79

Text="新增"></asp:LinkButton>
80

<asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update"
81

Text="更新"></asp:LinkButton>
82

<asp:LinkButton ID="CancelButton" runat="server" CausesValidation="False" CommandName="Cancel"
83

Text="取消"></asp:LinkButton>
84

</EditItemTemplate>
85

<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
86

<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
87

</asp:FormView>
88

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString1 %>"
89

DeleteCommand="DELETE FROM [Employees] WHERE [EmployeeID] = @original_EmployeeID" InsertCommand="INSERT INTO [Employees] ([LastName], [FirstName], [Title]) VALUES (@LastName, @FirstName, @Title)"
90

ProviderName="<%$ ConnectionStrings:NorthwindConnectionString1.ProviderName %>"
91

SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title] FROM [Employees]"
92

UpdateCommand="UPDATE [Employees] SET [LastName] = @LastName, [FirstName] = @FirstName, [Title] = @Title WHERE [EmployeeID] = @original_EmployeeID" OldValuesParameterFormatString="original_{0}">
93

<DeleteParameters>
94

<asp:Parameter Name="original_EmployeeID" Type="Int32" />
95

</DeleteParameters>
96

<InsertParameters>
97

<asp:Parameter Name="LastName" Type="String" />
98

<asp:Parameter Name="FirstName" Type="String" />
99

<asp:Parameter Name="Title" Type="String" />
100

</InsertParameters>
101

<UpdateParameters>
102

<asp:Parameter Name="LastName" Type="String" />
103

<asp:Parameter Name="FirstName" Type="String" />
104

<asp:Parameter Name="Title" Type="String" />
105

<asp:Parameter Name="original_EmployeeID" Type="Int32" />
106

</UpdateParameters>
107

</asp:SqlDataSource>
108

<br />
109

110

</div>
111

</form>
112

</body>
113

</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
2

Dim oButton As Button
3

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

程序执行时预设为浏览模式，故只有显示 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
2

Dim iEditIndex As Integer
3

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

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

/**/ ''' <summary>
22

''' 取得编辑列索引。
23

''' </summary>
24

''' <param name="GridView">GridView 控件。</param>
25

''' <param name="RowIndex">GridView 的数据列索引。</param>
26

Private Function GetEditIndex() Function GetEditIndex(ByVal GridView As GridView, ByVal RowIndex As Integer) As Integer
27

Dim iEditIndex As Integer
28

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

在 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
2

Dim oFormView As FormView
3

Dim oLinkButton As LinkButton
4

Dim oTextBox As TextBox
5

oFormView = CType(sender, FormView)
7

If Not oFormView.Visible Then Exit Sub
8

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

当 FormView 执行「新增」、「更新」、「取消」钮的动作后，需要切换回浏览模式，即将 FormView 隐藏，而显示 GridView，相关程序代码如下。

/**/ ''' <summary>
2

''' 切换为浏览模式。
3

''' </summary>
4

Private Sub ChangeViewMode() Sub ChangeViewMode()
5

FormView1.Visible = False
6

GridView1.Visible = True
7

GridView1.EditIndex = -1
8

End Sub
9

Protected Sub FormView1_ItemCommand() 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

Protected Sub FormView1_ItemInserted() 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

Protected Sub FormView1_ItemUpdated() Sub FormView1_ItemUpdated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.FormViewUpdatedEventArgs) Handles FormView1.ItemUpdated
23

'更新后，切换为浏览模式
24

ChangeViewMode()
25

End Sub

执行程序

执行程序预设为浏览模式

按下 GridView 的「新增」钮时，即会切换到 FormView 的新增模式。

按钮 GridView 的「编辑」钮时，即会切换到 FormView 的编辑模式。

weixin_33984032

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
GridView+FormView 示范数据新增/修改/删除

摘要在同一页面上以 GridView 配合 FormView 来完成数据的「新增/修改/删除」，在这个范例中有下列二个特点。1. GridView 及 FormView 系结同一个 SqlDataSource 控件。2. FormView 只使用 EditItemTemplate，同时来做新增及修改的动作。范例程序代码: GridView1.rar画面配置此范例使用 N...
复制链接

扫一扫