如何在ASP.NET中点击按钮调用JS实现Toast提示？

首先咱们得先理清核心问题：你用的是ASP.NET服务器端按钮（<asp:Button>），它默认点击会触发页面回发——也就是浏览器会向服务器发送请求，重新加载整个页面。这就导致你的前端点击事件还没来得及显示Toast，页面就刷新了，所以Toast根本显示不出来。下面分两种场景给你解决方案：

场景1：不需要执行服务器端代码（btnShow_Click里没逻辑） #

这种情况最简单，咱们只需要阻止按钮的回发行为，让它只触发前端的Toast事件就行：

方法1：换成普通HTML按钮 #

把服务器端按钮改成普通HTML按钮，保留对应的CSS类和样式：

<button id="btnShow" class="tstInfo btn-primary" style="font-weight:bold;">Show</button>

这样点击就只会触发你toast.js里的$(".tstInfo").on("click")事件，不会回发页面，Toast就能正常显示了。

方法2：保留服务器按钮，阻止回发 #

如果你不想改按钮类型，可以给按钮加OnClientClick属性，返回false来取消服务器回发：

<asp:Button ID="btnShow" runat="server" Text="Show" Font-Bold="true" CssClass="tstInfo btn-primary" OnClientClick="return false;" />

点击按钮时会先执行前端的Toast事件，然后返回false终止回发流程，Toast就能正常显示。

场景2：需要执行服务器端代码（btnShow_Click里有业务逻辑） #

如果点击按钮必须要跑服务器端的btnShow_Click方法，那咱们可以在服务器端处理完逻辑后，注册前端脚本，让页面加载完成后自动触发Toast：

步骤1：修改服务器端代码（.cs文件） #

在btnShow_Click方法里添加注册脚本的代码：

protected void btnShow_Click(object sender, EventArgs e)
{
    // 这里写你的服务器端业务逻辑，比如数据处理、数据库操作等

    // 注册触发Toast的前端脚本
    string toastScript = @"$(document).ready(function() {
        $.toast({
            heading: 'Welcome to my Elite admin',
            text: 'Use the predefined ones, or specify a custom position object.',
            position: 'top-right',
            loaderBg:'#ff6849',
            icon: 'info',
            hideAfter: 3000, 
            stack: 6
        });
    });";
    ClientScript.RegisterStartupScript(this.GetType(), "ShowToast", toastScript, true);
}

步骤2：可选优化——移除前端点击事件 #

因为现在是服务器端注册脚本触发Toast，你可以把toast.js里的$(".tstInfo").on("click")事件去掉，避免点击时先触发一次Toast、回发后再触发一次的重复问题。

另外要注意：确保你的页面已经正确引入了jQuery和Toast插件的相关文件（比如jquery.js、Toast的JS和CSS），否则Toast功能也无法正常工作。

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