按钮同时使用JavaScript与C#方法时，如何阻止回发并显示双文本？

问题分析 #

你的代码存在两个核心问题：

1. OnClientClick 属性语法错误（多余分号），正确写法应为 OnClientClick="buttonfunc(); return false;"
2. 若通过 return false 阻止回发，服务器端的 UpdateButton_Click 方法不会执行；若去掉 return false，页面回发后JS设置的内容会被覆盖，无法同时显示两行文本。

非AJAX解决方案 #

核心思路是提前将服务器端需要显示的内容渲染到页面隐藏元素中，客户端点击按钮时直接读取该元素内容并与JS内容一并展示，全程阻止回发：

前端代码修改

<script>
    function buttonfunc() {
        // 获取提前渲染的服务器端文本
        var serverContent = document.getElementById("<%= hfServerContent.ClientID %>").value;
        // 同时展示客户端与服务器端文本
        document.getElementById("demo").innerHTML = "js work<br/>" + serverContent;
    }
</script>

<form id="form1" runat="server">
    <div>
        <p id="demo"></p>
        <!-- 隐藏字段存储服务器端文本 -->
        <asp:HiddenField ID="hfServerContent" runat="server" />
        <asp:Button ID="UpdateButton" runat="server" Text="Update" 
            OnClientClick="buttonfunc(); return false;" />
    </div>
</form>

后端代码修改

protected void Page_Load(object sender, EventArgs e)
{
    // 页面首次加载时，将服务器端文本存入隐藏字段
    if (!IsPostBack)
    {
        hfServerContent.Value = "cs work";
    }
}

方案说明 #

• 页面初始化时，服务器端将需要展示的文本写入隐藏字段，无需回发即可被JS读取
• 点击按钮时，JS函数同时获取客户端逻辑生成的内容和隐藏字段中的服务器端内容，合并展示
• return false 彻底阻止页面回发，避免内容被刷新覆盖

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