如何在按钮点击事件中动态修改Bootstrap进度条组件的值

要实现点击按钮异步更新Bootstrap进度条的百分比，我们可以结合AJAX异步请求和jQuery操作DOM来完成，这样不会刷新整个页面，体验更流畅。下面是完整的实现方案，结合你提供的代码做了完善和说明：

1. 前端布局（进度条+按钮） #

首先保留你原有Bootstrap进度条和服务器按钮的结构即可：

<div class="progress">
 <div id="theprogressbar" class ="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%">
 <span class="sr-only">95% Complete</span>
 </div>
</div>

<!-- 服务器端按钮 -->
<asp:Button ID="btnSave" width="250px" runat="server" Text="View" class="btn btn-info" />

2. jQuery AJAX 异步请求代码 #

这里补充了几个关键细节，修复了你原代码里的小问题：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 确保引入jQuery库 -->
<script>
 $('#btnSave').click(function (e) {
    e.preventDefault(); // 阻止服务器按钮的默认回发行为，避免页面刷新
    $.ajax({
        url: 'ProjectMainMenu.aspx/GetProgress', // 路径要对应你的页面文件名
        method: 'POST',
        contentType: 'application/json; charset=utf-8', // 补充编码格式，避免乱码
        dataType: 'json', // 指定返回数据类型为JSON
        success: function(response){
            var progressValue = response.d; // WebMethod的返回值会被包装在d属性中
            // 更新进度条的aria属性和宽度样式
            $('#theprogressbar')
                .attr('aria-valuenow', progressValue)
                .css('width', progressValue + '%'); // 必须加%后缀，否则宽度不生效
            // 如果有显示进度数值的元素，同步更新
            $("#progressValue").text(progressValue + '%');
        },
        error: function(xhr, status, error){
            console.error('请求失败:', error); // 添加错误处理，方便调试
        }
    });
 });
</script>

3. C# 后端WebMethod代码 #

这个静态方法用于处理AJAX请求，返回进度值，注意必须标记[WebMethod]特性且方法为static：

using System.Web.Services;

public partial class ProjectMainMenu : System.Web.UI.Page
{
    [WebMethod]
    public static double GetProgress()
    {
        double progress = 0;
        // 替换为你的业务逻辑，比如从数据库/缓存获取实时进度
        progress = 56; // 示例返回值
        return progress;
    }
}

关键注意事项 #

• 必须确保页面已引入jQuery库，否则$符号会报错
• AJAX请求的url要与你的页面路径完全匹配，比如页面是ProjectMainMenu.aspx，路径就是ProjectMainMenu.aspx/GetProgress
• 进度条的宽度必须加上%单位，否则样式不会正确渲染
• 一定要阻止服务器按钮的回发行为，否则页面刷新会覆盖AJAX的修改

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