如何通过ASP.NET后台C#代码修改Bootstrap组件标记代码属性值？

当然可以通过后台C#代码修改前端标记的属性值啦！ASP.NET本来就支持这种前后端交互的操作，针对你这个Bootstrap进度条的场景，我给你分享两种最常用的实现方式：

方法一：给元素添加runat="server"直接操作 #

首先，你需要给要修改的Bootstrap进度条div加上id和runat="server"属性，这样后台代码就能直接访问到这个元素：

<small>Units Completed </small>
<div class="progress">
    <div id="MyProgressBar" runat="server" class="progress-bar progress-bar-info" 
         role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" 
         style="width: 95%">
        <span class="sr-only">95% Complete</span>
    </div>
</div>

然后在后台的C#代码里（比如Page_Load事件或者其他业务逻辑方法中），你就可以直接修改它的样式、属性甚至内部内容了：

protected void Page_Load(object sender, EventArgs e)
{
    // 这里模拟从数据库、会话或其他业务逻辑获取进度值
    int completionRate = 75;

    // 修改进度条的宽度样式
    MyProgressBar.Style["width"] = $"{completionRate}%";
    // 更新aria-valuenow属性（符合无障碍规范）
    MyProgressBar.Attributes["aria-valuenow"] = completionRate.ToString();
    // 如果想要显示可见的进度文本，也可以修改内部的span内容
    MyProgressBar.InnerHtml = $"<span>{completionRate}% Complete</span>";
}

方法二：使用数据绑定表达式 #

如果你不想给元素加runat="server"，也可以用ASP.NET的数据绑定表达式来动态注入值。首先在后台定义一个公共属性：

// 后台代码中定义公共属性，用于存储进度值
public int CompletionRate { get; set; }

protected void Page_Load(object sender, EventArgs e)
{
    // 赋值实际的进度值
    CompletionRate = 80;
    // 如果用<%# %>绑定的话，需要调用DataBind()方法
    // this.DataBind();
}

然后在前端标记中用<%= %>表达式直接引用这个属性：

<small>Units Completed </small>
<div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" 
         aria-valuenow="<%= CompletionRate %>" aria-valuemin="0" aria-valuemax="100" 
         style="width: <%= CompletionRate %>%">
        <span class="sr-only"><%= CompletionRate %>% Complete</span>
    </div>
</div>

如果使用<%# %>绑定语法的话，记得在后台调用DataBind()方法，这样绑定值才会生效。

补充说明 #

如果你的场景更复杂（比如需要动态生成多个进度条），还可以使用Literal或PlaceHolder控件来拼接HTML代码输出，但上面两种方法已经完全能覆盖你当前的进度条需求啦。

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