使用ASP Button控件时，无法在不刷新页面的情况下同时调用C#与JavaScript代码

看起来你踩了ASP.NET WebForms按钮控件的典型坑——混淆了客户端事件和服务器端事件的用法，再加上默认回发导致页面刷新丢失状态，咱们一步步来解决：

先揪出你代码里的问题 #

你把JavaScript函数selectButton(this, 'pass')放到了OnServerClick属性里，这完全搞错了：

• <asp:Button>的OnServerClick是给服务器端方法用的（相当于指定后台C#的方法名），根本不会执行客户端脚本；
• 客户端点击事件应该用OnClientClick属性；
• 另外，只要触发了服务器端的OnClick事件，页面必然会回发刷新，你用JS设置的按钮选中状态肯定会丢失——因为页面刷新后所有控件都会重新渲染。

解决方案：用AJAX实现无刷新的JS+后台逻辑联动 #

要满足「按钮状态持久不刷新、JS和C#代码都执行」的需求，最靠谱的方式是用AJAX调用后台方法，彻底避免页面回发。下面给你两种常用的实现方式：

方式一：用jQuery AJAX调用后台WebMethod（推荐）

1. 修改ASP按钮的事件绑定
   去掉错误的OnServerClick，改用OnClientClick执行JS，同时return false阻止默认回发：

   <asp:Button CssClass="btn btn-primary" style="width:150px;Height:50px" 
               ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" 
               ID="OSTAQ1Button1asp" runat="server" Text="Pass" 
               OnClientClick="handleButtonClick(this, 'pass'); return false;"
               data-question="OSTAQ1" data-answer="pass" />
   

   这里加了data-question和data-answer属性，方便JS识别是哪个问题的哪个选项。

2. 后台C#写可被AJAX调用的WebMethod
   在你的页面后台代码中添加静态的WebMethod（必须是静态，且标记[WebMethod]）：

   using System.Web.Services;
   
   public partial class YourSurveyPage : System.Web.UI.Page
   {
       [WebMethod]
       public static void SaveSurveyAnswer(string questionId, string answer)
       {
           // 这里写你的后台逻辑：比如把答案存数据库、写入Session等
           // 注意：因为是静态方法，不能直接访问页面控件，所有数据靠参数传递
       }
   }
   

3. 写JavaScript处理状态+调用后台
   先处理按钮的选中状态，再通过AJAX把数据传给后台：

   function handleButtonClick(button, answerType) {
       // 1. 处理按钮选中状态：添加样式，标记为已点击
       button.classList.add('clicked');
       // 可以顺便把其他同问题的按钮取消选中（如果是单选的话）
       var questionId = button.dataset.question;
       var allButtons = document.querySelectorAll('[data-question="' + questionId + '"]');
       allButtons.forEach(btn => {
           if (btn !== button) btn.classList.remove('clicked');
       });
   
       // 2. 保存状态到本地（可选，防止页面意外刷新后丢失）
       localStorage.setItem(questionId, answerType);
   
       // 3. AJAX调用后台方法保存答案
       $.ajax({
           type: "POST",
           url: "YourSurveyPage.aspx/SaveSurveyAnswer", // 替换成你的页面路径
           data: JSON.stringify({ 
               questionId: questionId, 
               answer: answerType 
           }),
           contentType: "application/json; charset=utf-8",
           dataType: "json",
           success: function() {
               console.log("答案已成功提交到后台");
               // 这里可以加成功提示，比如弹个小消息
           },
           error: function(xhr, err) {
               console.error("提交失败：", err);
               // 处理错误情况，比如提示用户重试
           }
       });
   }
   
   // 页面加载时恢复之前保存的状态（可选）
   window.addEventListener('load', function() {
       var savedAnswers = Object.keys(localStorage).filter(key => key.startsWith('OSTAQ'));
       savedAnswers.forEach(questionId => {
           var answer = localStorage.getItem(questionId);
           var button = document.querySelector('[data-question="' + questionId + '"][data-answer="' + answer + '"]');
           if (button) button.classList.add('clicked');
       });
   });
   

方式二：用UpdatePanel实现局部刷新（适合不想写太多JS的场景）

如果你更习惯用ASP.NET自带的AJAX控件，可以用UpdatePanel把按钮包起来，实现局部刷新，减少页面跳动：

<asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="UpdatePanel1">
    <ContentTemplate>
        <!-- 把你的按钮放到这里 -->
        <asp:Button ... OnClientClick="selectButton(this, 'pass');" OnClick="OSTAQ1Button1Click" />
    </ContentTemplate>
</asp:UpdatePanel>

不过这种方式要注意：UpdatePanel刷新时，里面的控件会重新渲染，所以JS设置的状态可能会丢失，需要在后台把状态存在ViewState或Session里，页面加载时再通过JS恢复，相比AJAX方式会麻烦一些，所以更推荐第一种方案。

最后再提醒下 #

• 永远不要把客户端脚本放到OnServerClick或OnClick里，前者是服务器方法名，后者也是服务器端事件；
• 只要触发了服务器端回发，页面就会刷新，状态必然丢失——除非用局部刷新或AJAX；
• 用localStorage保存用户选择是个好习惯，即使页面意外刷新，也能恢复之前的状态。

备注：内容来源于stack exchange，提问作者Lord Helmet