ASP.NET Web Form+EF结合Bootstrap Modal新增按钮无响应求助

API 探路者

2026-8-20

问题核心原因及修复步骤

1. Page_Load逻辑完全写反

当前代码里只有当GridView有数据时才隐藏提示，无数据时才绑定数据，这完全搞反了逻辑！正确做法是首次加载页面时绑定数据，之后根据行数控制提示显示：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack) // 仅首次加载绑定，避免回发重复操作
    {
        BindGridView();
    }
    // 无数据时显示提示
    LblNotFound.Visible = GridView.Rows.Count == 0;
}

// 单独提取绑定方法，方便后续复用
private void BindGridView()
{
    GridView.DataSource = Db.TblProducts.ToList();
    GridView.DataBind();
}

2. 新增方法里的致命类型错误

你把Price文本框的值当成Barcode转成Int64了，明显是复制粘贴失误，必须改成Barcode文本框的值，还要加异常处理防止崩溃：

// 错误代码：
Row.Barcode = Convert.ToInt64(Price.Text);
// 修正后（加校验）：
if (long.TryParse(Barcode.Text.Trim(), out long barcode))
{
    Row.Barcode = barcode;
}
else
{
    // 可以加个Label提示用户输入合法数字
    return;
}

3. Bootstrap依赖不全导致交互异常

你只引入了jQuery和Bootstrap CSS，但Bootstrap 4必须要Popper.js和Bootstrap JS才能让Modal正常工作，在页面头部补充：

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"></script>

另外，移除BtnCreate上的data-dismiss="modal"属性，避免Modal先关闭干扰回发事件触发，绑定成功后页面刷新会自动关闭Modal。

4. 冗余UpdatePanel与按钮ID错误

新增按钮外面的UpdatePanel完全没必要，直接用普通按钮就行，打开Modal是前端行为不需要回发。
你把编辑/删除按钮的ID搞反了：BtnDelete显示“Edit”，BtnEdit显示“Delete”，赶紧修正，还要给它们绑定点击事件才能生效：

<asp:LinkButton CssClass="btn btn-warning" ID="BtnEdit" runat="server" OnClick="BtnEdit_Click">编辑</asp:LinkButton>
<asp:LinkButton CssClass="btn btn-danger" ID="BtnDelete" runat="server" OnClick="BtnDelete_Click" OnClientClick="return confirm('确定删除？');">删除</asp:LinkButton>

修正后完整代码示例

前端HTML

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ProductControl.aspx.cs" Inherits="AppData.Pages.ProductControl" %>

<asp:Content ID="HeadContent" ContentPlaceHolderID="Head" runat="server">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css">
    <script src="../Scripts/jquery-3.6.0.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"></script>
    <script src="../Scripts/Site.js"></script>
</asp:Content>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div class="container">
        <div class="row">
            <div class="col-md-12 table-responsive" id="ProductDiv">
                <div class="d-flex justify-content-between align-items-center mb-3 mt-3">
                    <h4>产品列表</h4>
                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">
                        添加产品
                    </button>
                </div>

                <asp:GridView ID="GridView" runat="server" CssClass="table text-center table-bordered table-hover" HeaderStyle-CssClass="table-dark" AutoGenerateColumns="false" DataKeyNames="Id">
                    <Columns>
                        <asp:TemplateField HeaderText="序号" ItemStyle-Font-Size="Small">
                            <ItemTemplate><%# Container.DataItemIndex+1 %></ItemTemplate>
                            <ItemStyle Wrap="False" />
                        </asp:TemplateField>
                        <asp:BoundField DataField="Name" HeaderText="名称" />
                        <asp:BoundField DataField="Price" HeaderText="价格" />
                        <asp:BoundField DataField="Type" HeaderText="类型" />
                        <asp:BoundField DataField="Barcode" HeaderText="条码" />
                        <asp:TemplateField HeaderText="操作" ItemStyle-Font-Size="Small">
                            <ItemTemplate>
                                <asp:LinkButton CssClass="btn btn-warning btn-sm mr-1" ID="BtnEdit" runat="server" OnClick="BtnEdit_Click">编辑</asp:LinkButton>
                                <asp:LinkButton CssClass="btn btn-danger btn-sm" ID="BtnDelete" runat="server" OnClick="BtnDelete_Click" OnClientClick="return confirm('确定要删除该产品吗？');">删除</asp:LinkButton>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </div>
            <div class="row">
                <asp:Label ID="LblNotFound" runat="server" Text="暂无产品数据" CssClass="col-12 alert alert-danger text-center" Visible="false"></asp:Label>
            </div>
        </div>

        <!-- 新增产品Modal -->
        <asp:UpdatePanel ID="UpdatePanelModal" runat="server">
            <ContentTemplate>
                <div class="modal" id="myModal">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">添加新产品</h4>
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                            </div>
                            <div class="modal-body">
                                <div class="form-group">
                                    <asp:TextBox ID="txtName" placeholder="产品名称" runat="server" CssClass="form-control"></asp:TextBox>
                                </div>
                                <div class="form-group">
                                    <asp:TextBox ID="txtPrice" placeholder="产品价格" runat="server" CssClass="form-control"></asp:TextBox>
                                </div>
                                <div class="form-group">
                                    <asp:TextBox ID="txtType" placeholder="产品类型" runat="server" CssClass="form-control"></asp:TextBox>
                                </div>
                                <div class="form-group">
                                    <asp:TextBox ID="txtBarcode" placeholder="产品条码" runat="server" CssClass="form-control"></asp:TextBox>
                                    <asp:Label ID="lblBarcodeError" runat="server" Text="条码必须为数字" CssClass="text-danger d-none mt-1"></asp:Label>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <asp:Button ID="BtnCreate" runat="server" CssClass="btn btn-success" Text="创建" OnClick="BtnCreate_Click" />
                                <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</asp:Content>

后端C#

using AppData.Models;
using System;
using System.Linq;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace AppData.Pages
{
    public partial class ProductControl : System.Web.UI.Page
    {
        private ProductDbEntities Db = new ProductDbEntities();

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindGridView();
            }
            LblNotFound.Visible = GridView.Rows.Count == 0;
        }

        private void BindGridView()
        {
            GridView.DataSource = Db.TblProducts.ToList();
            GridView.DataBind();
        }

        protected void BtnCreate_Click(object sender, EventArgs e)
        {
            // 校验条码输入合法性
            if (!long.TryParse(txtBarcode.Text.Trim(), out long barcode))
            {
                lblBarcodeError.Visible = true;
                return;
            }
            lblBarcodeError.Visible = false;

            // 创建新产品实体
            TblProduct newProduct = new TblProduct
            {
                Name = txtName.Text.Trim(),
                Price = txtPrice.Text.Trim(),
                Type = txtType.Text.Trim(),
                Barcode = barcode
            };

            Db.TblProducts.Add(newProduct);
            Db.SaveChanges();

            // 刷新页面展示新数据
            Response.Redirect(Request.RawUrl);
        }

        // 编辑按钮事件（需根据实体类主键调整）
        protected void BtnEdit_Click(object sender, EventArgs e)
        {
            LinkButton btn = (LinkButton)sender;
            GridViewRow row = (GridViewRow)btn.NamingContainer;
            int productId = Convert.ToInt32(GridView.DataKeys[row.RowIndex].Value);
            // 后续逻辑：查询产品数据填充Modal，切换编辑模式
        }

        // 删除按钮事件
        protected void BtnDelete_Click(object sender, EventArgs e)
        {
            LinkButton btn = (LinkButton)sender;
            GridViewRow row = (GridViewRow)btn.NamingContainer;
            int productId = Convert.ToInt32(GridView.DataKeys[row.RowIndex].Value);
            var product = Db.TblProducts.FirstOrDefault(p => p.Id == productId);
            if (product != null)
            {
                Db.TblProducts.Remove(product);
                Db.SaveChanges();
                BindGridView();
            }
        }
    }
}

额外优化点

给输入框加了form-control类，适配Bootstrap样式，界面更美观。
重命名了控件ID（比如Name→txtName），避免和系统关键字冲突。
增加了条码输入的错误提示，提升用户体验。
GridView设置了DataKeyNames="Id"，方便获取主键操作。

内容的提问来源于stack exchange，提问作者Hadi Jami