MVC框架下如何将C#的进度值传递给JavaScript更新Bootstrap进度条

失效原因排查 #

<%=progressBarPercentage%> 这类服务端内嵌语法只能在 .aspx、.ascx 等会被ASP.NET服务端解析的页面文件中生效，如果你的JS代码写在独立的.js静态文件中，服务端不会处理这类文件的内容，语法自然不会被替换成对应的变量值。

可行方案 #

方案1：复用现有HiddenField控件（最适配你的现有代码）

你页面上已经添加了hdnfldVariable隐藏域控件，直接用它传递值即可：

1. C#侧调整：每次更新进度值时同步给隐藏域赋值

public int progressBarPercentage;

//listPrices.Count 是请求服务端信息时更新的列表
progressBarPercentage = listPrices.Count;
// 同步更新隐藏域的值
hdnfldVariable.Value = progressBarPercentage.ToString();

如果你的项目是ASP.NET 4及以上版本，可以给隐藏域添加ClientIDMode="Static"属性固定前端ID，方便JS选择：

<asp:HiddenField ID="hdnfldVariable" runat="server" ClientIDMode="Static" />

2. JS侧调整：从隐藏域读取最新值更新进度条

//Progress Bar
var progressBar = $('.progress-bar');
var hiddenField = $('#hdnfldVariable');

setInterval(function () {
    var progressNumber = hiddenField.val();
    progressBar.css('width', progressNumber + '%');
    progressBar.attr('aria-valuenow', progressNumber);
}, 100)

如果没有设置ClientIDMode="Static"，把JS里的选择器改成$('#<%= hdnfldVariable.ClientID %>')即可。

注意：如果用了UpdatePanel做局部刷新，需要把HiddenField控件放在UpdatePanel内部才能异步更新值。

方案2：页面声明全局变量（适配JS写在独立文件的场景）

如果你的JS必须写在单独的静态文件中，可以先在aspx页面的<script>标签中声明全局变量，再在JS文件中调用：

1. aspx页面中添加全局变量声明：

<script>
window.progressBarPercentage = <%= progressBarPercentage %>;
</script>

2. 独立JS文件中直接读取全局变量：

var progressNumber = window.progressBarPercentage;

方案3：AJAX轮询（适配长时间后台任务的场景）

如果你的数据请求是耗时很长的后台任务，同步回发的方式无法实时更新进度，就用AJAX轮询接口拉取最新进度：

1. 新增一个进度查询接口，比如添加一般处理文件GetProgress.ashx：

public class GetProgress : IHttpHandler, IRequiresSessionState
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        // 进度值需要存在Session、缓存等跨请求共享的存储中
        int progress = Convert.ToInt32(context.Session["progressBarPercentage"] ?? 0);
        context.Response.Write(progress);
    }

    public bool IsReusable => false;
}

2. 原长任务代码中更新进度时同步存入Session：

progressBarPercentage = listPrices.Count;
Session["progressBarPercentage"] = progressBarPercentage;

3. JS侧调整为轮询拉取进度：

var progressBar = $('.progress-bar');
setInterval(function () {
    $.get('/GetProgress.ashx', function(progressNumber) {
        progressBar.css('width', progressNumber + '%');
        progressBar.attr('aria-valuenow', progressNumber);
    });
}, 1000); // 轮询间隔可根据需求调整

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