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
  1<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
  2
  3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4
  5<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 的编辑动作才能正常执行。

1    Protected Sub GridView1_RowDataBound()Sub GridView1_RowDataBound(ByVal sender As ObjectByVal 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

程序执行时预设为浏览模式,故只有显示 GridView,而 FormView 预设是隐藏。当 GridView 按下新增及编辑时,需要将 GirdView 隐藏,将 FormView 显示。所以在 GridView 的 RowCommand 事件中撰写如下程序代码。
执行「编辑」时,以 GetEditIndex 函式是取得 FormView 对应的编辑列索引,设定给 FormView.PageIndex,并将 FormView 切换为编辑模式。
执行「新增」钮,将 FormView.InsertItemTemplate 设为 FormView.EddiItemTemplate,即新增及编辑都使用同一个 Template,并将 FormView 切换为新增模式。
 1    Protected Sub GridView1_RowCommand()Sub GridView1_RowCommand(ByVal sender As ObjectByVal 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()Function GetEditIndex(ByVal GridView As GridView, ByVal RowIndex As IntegerAs 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

在 FormView 中因为只使用 EddiItemTemplate 来处理「新增」及「编辑」模式,做需要置放「新增」、「更新」、「取消」三个按钮。
在「新增」模式显示「新增」钮与「取消」钮,以及显示 EmployeeID 字段的 TextBox。
在「编辑」模式显示「更新」钮与「取消」钮。EmployeeID 字段为只读,故隐藏 EmployeeID 字段的 TextBox。
针对以上的处理动作,在 FormView 的 PreRender 事件中撰写如下程序代码来处理 FormView 子控件的显示及隐藏状态。

 1    Protected Sub FormView1_PreRender()Sub FormView1_PreRender(ByVal sender As ObjectByVal 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

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

 1    /**/''' <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
10    Protected Sub FormView1_ItemCommand()Sub FormView1_ItemCommand(ByVal sender As ObjectByVal 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()Sub FormView1_ItemInserted(ByVal sender As ObjectByVal e As System.Web.UI.WebControls.FormViewInsertedEventArgs) Handles FormView1.ItemInserted
18        '新增后,切换为浏览模式
19        ChangeViewMode()
20    End Sub

21
22    Protected Sub FormView1_ItemUpdated()Sub FormView1_ItemUpdated(ByVal sender As ObjectByVal e As System.Web.UI.WebControls.FormViewUpdatedEventArgs) Handles FormView1.ItemUpdated
23        '更新后,切换为浏览模式
24        ChangeViewMode()
25    End Sub


执行程序

执行程序预设为浏览模式


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


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


专为程序员设计的数学课

11-11
<p> 限时福利限时福利,<span>15000+程序员的选择!</span> </p> <p> 购课后添加学习助手(微信号:csdn590),按提示消息领取编程大礼包!并获取讲师答疑服务! </p> <p> <br> </p> <p> 套餐中一共包含5门程序员必学的数学课程(共47讲) </p> <p> 课程1:《零基础入门微积分》 </p> <p> 课程2:《数理统计与概率论》 </p> <p> 课程3:《代码学习线性代数》 </p> <p> 课程4:《数据处理的最优化》 </p> <p> 课程5:《马尔可夫随机过程》 </p> <p> <br> </p> <p> 哪些人适合学习这门课程? </p> <p> 1)大学生,平时只学习了数学理论,并未接触如何应用数学解决编程问题; </p> <p> 2)对算法、数据结构掌握程度薄弱的人,数学可以让你更好的理解算法、数据结构原理及应用; </p> <p> 3)看不懂大牛代码设计思想的人,因为所有的程序设计底层逻辑都是数学; </p> <p> 4)想学习新技术,如:人工智能、机器学习、深度学习等,这门课程是你的必修课程; </p> <p> 5)想修炼更好的编程内功,在遇到问题时可以灵活的应用数学思维解决问题。 </p> <p> <br> </p> <p> 在这门「专为程序员设计的数学课」系列课中,我们保证你能收获到这些:<br> <br> <span> </span> </p> <p class="ql-long-24357476"> <span class="ql-author-24357476">①价值300元编程课程大礼包</span> </p> <p class="ql-long-24357476"> <span class="ql-author-24357476">②应用数学优化代码的实操方法</span> </p> <p class="ql-long-24357476"> <span class="ql-author-24357476">③数学理论在编程实战中的应用</span> </p> <p class="ql-long-24357476"> <span class="ql-author-24357476">④程序员必学的5大数学知识</span> </p> <p class="ql-long-24357476"> <span class="ql-author-24357476">⑤人工智能领域必修数学课</span> </p> <p> <br> 备注:此课程只讲程序员所需要的数学,即使你数学基础薄弱,也能听懂,只需要初中的数学知识就足矣。<br> <br> 如何听课? </p> <p> 1、登录CSDN学院 APP 在我的课程中进行学习; </p> <p> 2、登录CSDN学院官网。 </p> <p> <br> </p> <p> 购课后如何领取免费赠送的编程大礼包和加入答疑群? </p> <p> 购课后,添加助教微信:<span> csdn590</span>,按提示领取编程大礼包,或观看付费视频的第一节内容扫码进群答疑交流! </p> <p> <img src="https://img-bss.csdn.net/201912251155398753.jpg" alt=""> </p>
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值