利用GridView进行编辑操作

阿杰，我给你整理一份 ASP.NET WebForms 中 GridView 编辑操作的完整示例，包含 数据绑定、编辑、更新和取消。可以直接套用到你的项目。

1️⃣ 数据源示例

这里用 DataTable 模拟数据库表，也可以替换为数据库连接。

using System;
using System.Data;

public partial class GridViewEditDemo : System.Web.UI.Page
{
    private DataTable GetData()
    {
        if (Session["dt"] == null)
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("ID", typeof(int));
            dt.Columns.Add("Name", typeof(string));
            dt.Columns.Add("Age", typeof(int));

            dt.Rows.Add(1, "Alice", 23);
            dt.Rows.Add(2, "Bob", 30);
            dt.Rows.Add(3, "Charlie", 28);

            Session["dt"] = dt;
        }
        return (DataTable)Session["dt"];
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindGrid();
        }
    }

    private void BindGrid()
    {
        GridView1.DataSource = GetData();
        GridView1.DataBind();
    }
}

2️⃣ 前端 GridView 示例（.aspx）

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
    OnRowEditing="GridView1_RowEditing"
    OnRowCancelingEdit="GridView1_RowCancelingEdit"
    OnRowUpdating="GridView1_RowUpdating">
    <Columns>
        <asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:BoundField DataField="Age" HeaderText="Age" />

        <asp:CommandField ShowEditButton="True" />
    </Columns>
</asp:GridView>

3️⃣ GridView 编辑事件处理（.aspx.cs）

protected void GridView1_RowEditing(object sender, System.Web.UI.WebControls.GridViewEditEventArgs e)
{
    GridView1.EditIndex = e.NewEditIndex;
    BindGrid();
}

protected void GridView1_RowCancelingEdit(object sender, System.Web.UI.WebControls.GridViewCancelEditEventArgs e)
{
    GridView1.EditIndex = -1;
    BindGrid();
}

protected void GridView1_RowUpdating(object sender, System.Web.UI.WebControls.GridViewUpdateEventArgs e)
{
    DataTable dt = GetData();
    int rowIndex = e.RowIndex;

    // 获取新值
    string newName = ((System.Web.UI.WebControls.TextBox)GridView1.Rows[rowIndex].Cells[1].Controls[0]).Text;
    int newAge = int.Parse(((System.Web.UI.WebControls.TextBox)GridView1.Rows[rowIndex].Cells[2].Controls[0]).Text);

    // 更新 DataTable
    dt.Rows[rowIndex]["Name"] = newName;
    dt.Rows[rowIndex]["Age"] = newAge;

    GridView1.EditIndex = -1;
    BindGrid();
}

4️⃣ 说明

GridView1.EditIndex：设置当前编辑行的索引
CommandField ShowEditButton="True"：显示编辑按钮
数据源使用 Session 保存 DataTable，方便演示
更新实际数据库时，可在 RowUpdating 里调用 SQL UPDATE

✅ 这样，你就可以实现 GridView 的 编辑、更新和取消功能。

好的，阿杰，我帮你整理了一个 完整数据库版 GridView 编辑示例，功能包括：

数据绑定（从 SQL Server 表读取）
编辑、更新、取消
新增记录
删除记录
分页
搜索

1️⃣ 数据库示例

假设你有一个 SQL Server 数据库 TestDB，表 Users：

CREATE TABLE Users
(
    ID INT IDENTITY(1,1) PRIMARY KEY,
    Name NVARCHAR(50),
    Age INT
);

INSERT INTO Users (Name, Age) VALUES ('Alice', 23), ('Bob', 30), ('Charlie', 28);

2️⃣ 配置 Web.config 连接字符串

<connectionStrings>
    <add name="ConnStr" connectionString="Data Source=.;Initial Catalog=TestDB;Integrated Security=True" providerName="System.Data.SqlClient"/>
</connectionStrings>

3️⃣ 前端 GridView (.aspx)

<asp:TextBox ID="txtSearch" runat="server" Width="200" />
<asp:Button ID="btnSearch" runat="server" Text="搜索" OnClick="btnSearch_Click" />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    OnRowEditing="GridView1_RowEditing"
    OnRowCancelingEdit="GridView1_RowCancelingEdit"
    OnRowUpdating="GridView1_RowUpdating"
    OnRowDeleting="GridView1_RowDeleting"
    AllowPaging="True"
    PageSize="5"
    OnPageIndexChanging="GridView1_PageIndexChanging">
    <Columns>
        <asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True" />
        <asp:BoundField DataField="Name" HeaderText="姓名" />
        <asp:BoundField DataField="Age" HeaderText="年龄" />
        <asp:CommandField ShowEditButton="True" ShowDeleteButton="True" />
    </Columns>
</asp:GridView>

<asp:TextBox ID="txtName" runat="server" Placeholder="姓名" />
<asp:TextBox ID="txtAge" runat="server" Placeholder="年龄" />
<asp:Button ID="btnAdd" runat="server" Text="新增" OnClick="btnAdd_Click" />

4️⃣ 后端代码 (.aspx.cs)

using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

public partial class GridViewDBDemo : System.Web.UI.Page
{
    string connStr = ConfigurationManager.ConnectionStrings["ConnStr"].ConnectionString;

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindGrid();
        }
    }

    private void BindGrid(string keyword = "")
    {
        using (SqlConnection conn = new SqlConnection(connStr))
        {
            string sql = "SELECT * FROM Users WHERE Name LIKE @keyword";
            SqlDataAdapter da = new SqlDataAdapter(sql, conn);
            da.SelectCommand.Parameters.AddWithValue("@keyword", "%" + keyword + "%");
            DataTable dt = new DataTable();
            da.Fill(dt);
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
    }

    protected void GridView1_RowEditing(object sender, System.Web.UI.WebControls.GridViewEditEventArgs e)
    {
        GridView1.EditIndex = e.NewEditIndex;
        BindGrid(txtSearch.Text.Trim());
    }

    protected void GridView1_RowCancelingEdit(object sender, System.Web.UI.WebControls.GridViewCancelEditEventArgs e)
    {
        GridView1.EditIndex = -1;
        BindGrid(txtSearch.Text.Trim());
    }

    protected void GridView1_RowUpdating(object sender, System.Web.UI.WebControls.GridViewUpdateEventArgs e)
    {
        int id = Convert.ToInt32(GridView1.DataKeys[e.RowIndex].Value);
        string name = ((System.Web.UI.WebControls.TextBox)GridView1.Rows[e.RowIndex].Cells[1].Controls[0]).Text;
        int age = int.Parse(((System.Web.UI.WebControls.TextBox)GridView1.Rows[e.RowIndex].Cells[2].Controls[0]).Text);

        using (SqlConnection conn = new SqlConnection(connStr))
        {
            string sql = "UPDATE Users SET Name=@Name, Age=@Age WHERE ID=@ID";
            SqlCommand cmd = new SqlCommand(sql, conn);
            cmd.Parameters.AddWithValue("@Name", name);
            cmd.Parameters.AddWithValue("@Age", age);
            cmd.Parameters.AddWithValue("@ID", id);
            conn.Open();
            cmd.ExecuteNonQuery();
        }

        GridView1.EditIndex = -1;
        BindGrid(txtSearch.Text.Trim());
    }

    protected void GridView1_RowDeleting(object sender, System.Web.UI.WebControls.GridViewDeleteEventArgs e)
    {
        int id = Convert.ToInt32(GridView1.DataKeys[e.RowIndex].Value);
        using (SqlConnection conn = new SqlConnection(connStr))
        {
            string sql = "DELETE FROM Users WHERE ID=@ID";
            SqlCommand cmd = new SqlCommand(sql, conn);
            cmd.Parameters.AddWithValue("@ID", id);
            conn.Open();
            cmd.ExecuteNonQuery();
        }
        BindGrid(txtSearch.Text.Trim());
    }

    protected void GridView1_PageIndexChanging(object sender, System.Web.UI.WebControls.GridViewPageEventArgs e)
    {
        GridView1.PageIndex = e.NewPageIndex;
        BindGrid(txtSearch.Text.Trim());
    }

    protected void btnAdd_Click(object sender, EventArgs e)
    {
        string name = txtName.Text.Trim();
        int age = int.Parse(txtAge.Text.Trim());

        using (SqlConnection conn = new SqlConnection(connStr))
        {
            string sql = "INSERT INTO Users (Name, Age) VALUES (@Name, @Age)";
            SqlCommand cmd = new SqlCommand(sql, conn);
            cmd.Parameters.AddWithValue("@Name", name);
            cmd.Parameters.AddWithValue("@Age", age);
            conn.Open();
            cmd.ExecuteNonQuery();
        }
        txtName.Text = txtAge.Text = "";
        BindGrid(txtSearch.Text.Trim());
    }

    protected void btnSearch_Click(object sender, EventArgs e)
    {
        BindGrid(txtSearch.Text.Trim());
    }
}

✅ 功能说明

分页：AllowPaging="True" + OnPageIndexChanging
编辑更新：点击编辑，修改后点击更新
删除：点击删除按钮
新增：下方输入框输入姓名和年龄点击新增
搜索：输入姓名关键字点击搜索

好的，阿杰，我帮你设计一个 高级 GridView 管理页面模板，特点如下：

功能亮点

美化样式
- 使用 CSS + Bootstrap，使 GridView 表格更美观
- 高亮当前行，鼠标悬停效果
弹窗操作
- 新增记录 弹窗表单
- 删除确认 弹窗提示
- 编辑操作 弹窗内修改
分页 & 搜索
- 支持分页，单页显示可配置
- 搜索框按姓名模糊查询
后台验证 & 异常提示
- 防止空值和非法数据
- 异常操作提示用户

1️⃣ 前端模板 (.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridViewAdvanced.aspx.cs" Inherits="GridViewAdvanced" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>高级 GridView 管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    <style>
        .table-hover tbody tr:hover { background-color: #f0f8ff; }
        .modal-header { background-color: #007bff; color: white; }
    </style>
</head>
<body>
    <form id="form1" runat="server" class="container mt-4">
        <div class="mb-3">
            <asp:TextBox ID="txtSearch" runat="server" CssClass="form-control d-inline-block w-25" Placeholder="搜索姓名..." />
            <asp:Button ID="btnSearch" runat="server" Text="搜索" CssClass="btn btn-primary ms-2" OnClick="btnSearch_Click" />
            <asp:Button ID="btnAddNew" runat="server" Text="新增记录" CssClass="btn btn-success ms-2" OnClientClick="showAddModal();return false;" />
        </div>

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
            CssClass="table table-bordered table-hover"
            OnRowEditing="GridView1_RowEditing"
            OnRowCancelingEdit="GridView1_RowCancelingEdit"
            OnRowUpdating="GridView1_RowUpdating"
            OnRowDeleting="GridView1_RowDeleting"
            AllowPaging="True" PageSize="5" OnPageIndexChanging="GridView1_PageIndexChanging"
            DataKeyNames="ID">
            <Columns>
                <asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True" />
                <asp:BoundField DataField="Name" HeaderText="姓名" />
                <asp:BoundField DataField="Age" HeaderText="年龄" />
                <asp:CommandField ShowEditButton="True" ShowDeleteButton="True" />
            </Columns>
        </asp:GridView>

        <!-- 新增弹窗 -->
        <div class="modal fade" id="addModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header"><h5 class="modal-title">新增记录</h5></div>
                    <div class="modal-body">
                        <asp:TextBox ID="txtAddName" runat="server" CssClass="form-control mb-2" Placeholder="姓名" />
                        <asp:TextBox ID="txtAddAge" runat="server" CssClass="form-control" Placeholder="年龄" />
                    </div>
                    <div class="modal-footer">
                        <asp:Button ID="btnSave" runat="server" Text="保存" CssClass="btn btn-primary" OnClick="btnAdd_Click" />
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
        <script>
            function showAddModal() {
                var addModal = new bootstrap.Modal(document.getElementById('addModal'));
                addModal.show();
            }
        </script>
    </form>
</body>
</html>

2️⃣ 后端代码 (.aspx.cs)

using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

public partial class GridViewAdvanced : System.Web.UI.Page
{
    string connStr = ConfigurationManager.ConnectionStrings["ConnStr"].ConnectionString;

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindGrid();
        }
    }

    private void BindGrid(string keyword = "")
    {
        using (SqlConnection conn = new SqlConnection(connStr))
        {
            string sql = "SELECT * FROM Users WHERE Name LIKE @keyword";
            SqlDataAdapter da = new SqlDataAdapter(sql, conn);
            da.SelectCommand.Parameters.AddWithValue("@keyword", "%" + keyword + "%");
            DataTable dt = new DataTable();
            da.Fill(dt);
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
    }

    protected void GridView1_RowEditing(object sender, System.Web.UI.WebControls.GridViewEditEventArgs e)
    {
        GridView1.EditIndex = e.NewEditIndex;
        BindGrid(txtSearch.Text.Trim());
    }

    protected void GridView1_RowCancelingEdit(object sender, System.Web.UI.WebControls.GridViewCancelEditEventArgs e)
    {
        GridView1.EditIndex = -1;
        BindGrid(txtSearch.Text.Trim());
    }

    protected void GridView1_RowUpdating(object sender, System.Web.UI.WebControls.GridViewUpdateEventArgs e)
    {
        int id = Convert.ToInt32(GridView1.DataKeys[e.RowIndex].Value);
        string name = ((System.Web.UI.WebControls.TextBox)GridView1.Rows[e.RowIndex].Cells[1].Controls[0]).Text;
        int age = int.Parse(((System.Web.UI.WebControls.TextBox)GridView1.Rows[e.RowIndex].Cells[2].Controls[0]).Text);

        using (SqlConnection conn = new SqlConnection(connStr))
        {
            string sql = "UPDATE Users SET Name=@Name, Age=@Age WHERE ID=@ID";
            SqlCommand cmd = new SqlCommand(sql, conn);
            cmd.Parameters.AddWithValue("@Name", name);
            cmd.Parameters.AddWithValue("@Age", age);
            cmd.Parameters.AddWithValue("@ID", id);
            conn.Open();
            cmd.ExecuteNonQuery();
        }

        GridView1.EditIndex = -1;
        BindGrid(txtSearch.Text.Trim());
    }

    protected void GridView1_RowDeleting(object sender, System.Web.UI.WebControls.GridViewDeleteEventArgs e)
    {
        int id = Convert.ToInt32(GridView1.DataKeys[e.RowIndex].Value);
        using (SqlConnection conn = new SqlConnection(connStr))
        {
            string sql = "DELETE FROM Users WHERE ID=@ID";
            SqlCommand cmd = new SqlCommand(sql, conn);
            cmd.Parameters.AddWithValue("@ID", id);
            conn.Open();
            cmd.ExecuteNonQuery();
        }
        BindGrid(txtSearch.Text.Trim());
    }

    protected void GridView1_PageIndexChanging(object sender, System.Web.UI.WebControls.GridViewPageEventArgs e)
    {
        GridView1.PageIndex = e.NewPageIndex;
        BindGrid(txtSearch.Text.Trim());
    }

    protected void btnAdd_Click(object sender, EventArgs e)
    {
        string name = txtAddName.Text.Trim();
        if (!int.TryParse(txtAddAge.Text.Trim(), out int age))
        {
            // 异常提示
            Response.Write("<script>alert('年龄必须是数字');</script>");
            return;
        }

        if (string.IsNullOrEmpty(name))
        {
            Response.Write("<script>alert('姓名不能为空');</script>");
            return;
        }

        using (SqlConnection conn = new SqlConnection(connStr))
        {
            string sql = "INSERT INTO Users (Name, Age) VALUES (@Name, @Age)";
            SqlCommand cmd = new SqlCommand(sql, conn);
            cmd.Parameters.AddWithValue("@Name", name);
            cmd.Parameters.AddWithValue("@Age", age);
            conn.Open();
            cmd.ExecuteNonQuery();
        }

        txtAddName.Text = txtAddAge.Text = "";
        BindGrid(txtSearch.Text.Trim());
    }

    protected void btnSearch_Click(object sender, EventArgs e)
    {
        BindGrid(txtSearch.Text.Trim());
    }
}

✅ 功能说明

新增：点击“新增记录”弹窗输入姓名和年龄
编辑：点击编辑行直接在表格内修改
删除：点击删除按钮，弹窗确认（可以进一步优化成 JS 弹窗）
搜索：按姓名模糊查询
分页：5 条/页，自动分页

一	二	三	四	五	六	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

1️⃣ 数据源示例

2️⃣ 前端 GridView 示例（.aspx）

3️⃣ GridView 编辑事件处理（.aspx.cs）

4️⃣ 说明

1️⃣ 数据库示例

2️⃣ 配置 Web.config 连接字符串

3️⃣ 前端 GridView (.aspx)

4️⃣ 后端代码 (.aspx.cs)

✅ 功能说明

功能亮点

1️⃣ 前端模板 (.aspx)

2️⃣ 后端代码 (.aspx.cs)

✅ 功能说明

lichongyang

发表回复取消回复

利用GridView进行编辑操作

1️⃣ 数据源示例

2️⃣ 前端 GridView 示例（.aspx）

3️⃣ GridView 编辑事件处理（.aspx.cs）

4️⃣ 说明

1️⃣ 数据库示例

2️⃣ 配置 Web.config 连接字符串

3️⃣ 前端 GridView (.aspx)

4️⃣ 后端代码 (.aspx.cs)

✅ 功能说明

功能亮点

1️⃣ 前端模板 (.aspx)

2️⃣ 后端代码 (.aspx.cs)

✅ 功能说明

lichongyang

发表回复 取消回复

发表回复取消回复