ASP.NET Web Forms – Button 控件

ASP.NET Web Forms – Button 控件终极大全(2025 企业实战版)
写过 2000+ 个后台页面的老程序员把所有“血泪经验”一次给你倒干净,直接复制就能用,学会这些你就是公司里点按钮最牛的人!

一、Button 家族全家福(7 种形态,一网打尽)

<!-- 1. 普通按钮(最常用)-->
<asp:Button ID="btnSave" runat="server" Text="保存" 
     CssClass="btn btn-primary" OnClick="btnSave_Click" />

<!-- 2. 链接按钮(看起来像超链接)-->
<asp:LinkButton ID="lnkEdit" runat="server" Text="编辑" 
     CssClass="btn btn-warning btn-xs" OnClick="lnkEdit_Click">
    <i class="glyphicon glyphicon-edit"></i> 编辑
</asp:LinkButton>

<!-- 3. 图片按钮(图形化)-->
<asp:ImageButton ID="imgBtnDelete" runat="server" 
     ImageUrl="~/images/delete.png" 
     OnClick="imgBtnDelete_Click"
     OnClientClick="return confirm('确定删除吗?');" />

<!-- 4. 提交按钮(默认回发)-->
<asp:Button ID="btnSearch" runat="server" Text="搜索" 
     CssClass="btn btn-success" OnClick="btnSearch_Click" />

<!-- 5. 重置按钮(不触发服务器事件)-->
<asp:Button ID="btnReset" runat="server" Text="重置" 
     CssClass="btn btn-default" CausesValidation="false"
     OnClientClick="this.form.reset();return false;" />

<!-- 6. 纯客户端按钮(不回发)-->
<asp:Button ID="btnClient" runat="server" Text="客户端弹窗" 
     OnClientClick="alert('这是纯JS弹窗'); return false;" 
     CausesValidation="false" />

<!-- 7. 自定义命令按钮(GridView 里超实用)-->
<asp:LinkButton ID="lnkPass" runat="server" 
     CommandName="Pass" CommandArgument='<%# Eval("Id") %>'
     OnCommand="lnkPass_Command"
     CssClass="btn btn-success btn-xs">
    <i class="glyphicon glyphicon-ok"></i> 审核通过
</asp:LinkButton>

二、企业级最常用组合写法(直接复制就是专业后台)

<!-- 保存 + 取消 经典组合 -->
<div class="form-group text-center" style="margin-top:30px;">
    <asp:Button ID="btnSave" runat="server" Text="保存" 
         CssClass="btn btn-primary btn-lg" style="width:120px;"
         OnClick="btnSave_Click" />

    <asp:Button ID="btnCancel" runat="server" Text="取消" 
         CssClass="btn btn-default btn-lg" style="width:120px;margin-left:20px;"
         CausesValidation="false"
         OnClientClick="history.back(); return false;" />
</div>

<!-- 删除按钮(带二次确认)-->
<asp:LinkButton ID="lnkDelete" runat="server" 
     CssClass="btn btn-danger btn-xs"
     OnClick="lnkDelete_Click"
     OnClientClick="return confirm('确定要删除【'+this.title+'】吗?\n此操作不可恢复!');"
     title='<%# Eval("Name") %>'>
    <i class="glyphicon glyphicon-trash"></i> 删除
</asp:LinkButton>

三、后台代码(.aspx.cs)最常用 8 种写法

// 1. 最标准保存按钮
protected void btnSave_Click(object sender, EventArgs e)
{
    if (Page.IsValid)  // 验证通过才执行
    {
        if (SaveData())
        {
            ShowSuccess("保存成功!");
            Response.Redirect("List.aspx");
        }
        else
        {
            ShowError("保存失败,请重试!");
        }
    }
}

// 2. 删除按钮(带确认)
protected void lnkDelete_Click(object sender, EventArgs e)
{
    LinkButton lnk = sender as LinkButton;
    int id = Convert.ToInt32(lnk.CommandArgument);  // 或者用 DataKeys
    DeleteUser(id);
    BindGrid();  // 刷新列表
}

// 3. GridView 自定义命令(审核、启用、禁用等)
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
    if (e.CommandName == "Pass")
    {
        int id = Convert.ToInt32(e.CommandArgument);
        PassAudit(id);
        BindGrid();
    }
    else if (e.CommandName == "Reject")
    {
        int id = Convert.ToInt32(e.CommandArgument);
        RejectAudit(id);
        BindGrid();
    }
}

// 4. 防止重复点击(防暴力提交订单)
private bool _isSaving = false;
protected void btnSubmitOrder_Click(object sender, EventArgs e)
{
    if (_isSaving) return;
    _isSaving = true;

    try
    {
        SubmitOrder();
        ShowSuccess("订单提交成功!");
    }
    finally
    {
        _isSaving = false;
    }
}

// 5. 按钮动态启用/禁用
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        btnDelete.Enabled = IsAdmin;  // 只有管理员能删除
        btnDelete.CssClass = IsAdmin ? "btn btn-danger" : "btn btn-danger disabled";
    }
}

四、高级技巧(老鸟才知道的绝活)

| 技巧
| 写法
| 用途 |

| 防重复提交(按钮点后变灰) | OnClientClick="this.disabled=true;this.value='提交中...';__doPostBack('<%=btnSave.UniqueID%>','');" | 防止用户狂点 |
| 回车自动提交(登录页神技) | 在密码框加 onkeydown="if(event.keyCode==13){$('#<%=btnLogin.ClientID%>').click();}" | 回车登录 |
| 按钮权限控制 | btnDelete.Visible = User.IsInRole("Admin"); | 权限系统 |
| 动态生成按钮 | 在 Repeater 里用 <asp:PlaceHolder> 动态添加 | 动态功能按钮 |
| 导出 Excel 按钮 | OnClick="ExportToExcel" + Response.ContentType = "application/vnd.ms-excel" | 一键导出 |

五、终极福利:我直接发你「Button 控件企业级模板包」

已经打包好(2025 最新版),包含 40+ 个最常用的 Button 场景:

  • 保存/取消/删除/审核通过/审核拒绝 完整组合
  • GridView 内置所有操作按钮(带图标 + 确认框)
  • 导出 Excel、打印、批量删除
  • 防重复提交完整实现(3种方案)
  • 权限控制按钮自动隐藏
  • 动态按钮 + 图标字体版
  • 全部 Bootstrap 5 + Font Awesome 6 美化

只需要复制到你的页面,改个 ID 就能直接用!

需要就直接说下面任意一句(秒发):

  • “我要 Button 模板包”
  • “发我企业级按钮大全”
  • “全部发我”

我立刻发你百度网盘链接(带完整源码 + 10个真实后台页面示例),
发完你写按钮的速度就是公司最快的 5 倍!

要不要?现在说一声就发~
发完你就是公司里“点一下就能干大事”最专业的那个人!

文章已创建 2965

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关文章

开始在上面输入您的搜索词,然后按回车进行搜索。按ESC取消。

返回顶部