asp.net中的进度条[重复]答案

【问题标题】：progress bar in asp.net [duplicate]asp.net中的进度条[重复]
【发布时间】：2012-01-31 15:29:19
【问题描述】：

可能重复：
progress bar on a survey using c#

我使用 C# 在 ASP .NET 中进行了在线调查。我的调查包含 30 个问题，每个问题在不同的页面上。我想显示一个进度条，向用户显示他完成了多少。我该怎么做？

我认为如果我知道总页数，那么当我点击提交按钮时，每个页面上的进度条都会根据用户所在的页面填充。例如，如果我在 30 页中的第 5 页，那么进度条应该填充 5 / 30 或类似的东西。

【问题讨论】：

你的想法是对的。你真正坚持的是什么？您是否尝试为此编写任何代码？每个问题都有自己的 .ASPX 文件吗？
是的..每个问题都在一个 aspx 页面上
@Bibu - 请不要转发您的问题。
这是同一个问题，但有另一个想法......
不同的想法是什么意思？你应该编辑你之前的问题。

标签： c# asp.net

【解决方案1】：

如果您的页面总是按相同的顺序排列，那么您就知道您在哪个页面上。如果不是相同的 order ，那么您将不得不使用 session 来保存页面，或者可能是一个被回发的隐藏字段，最后一页数是多少。

-设计明智，您可以制作 30 张不同的图像，这不是最佳解决方案。

-使用一张滑动图片，使用css背景定位，每一页都会滑动一定的百分比，直到到达容器的另一边，也就是100%。

-或者使用css，在另一个div里面有一个div，外面的div会有全宽和边框，然后inner每页都会增长一定的百分比。你给内部一个不同的背景颜色。

【讨论】：

【解决方案2】：

最直接的方法是在会话中简单地存储已完成的页数或当前页码，并在加载下一页时，使用存储的值来设置进度条。

【讨论】：

我将如何保留已完成的页面？
@Bibu：您只需增加从会话变量中获得的数字 - 然后将其存储在下一页的相同位置。

【解决方案3】：

我使用这个简单的 jquery 脚本，我有一个进度条图像，它只是空的进度条，然后我有另一个图像来填充进度条。我调整了包含填充部分的 div 的宽度（progressBarFill div，其背景图像是宽度为 1 像素的纯色图像）。在每个页面上，您只需更改步骤号，

    <script type="text/javascript">
    $(document).ready(function() {
        var progressBarWidth = 211;         // this is total width of the progress bar
        var totalStepsInAppProcess = 5;     // number of steps in an application process
        var eachStepPercent = 100 / 5;      // each steps percentage
        var numberOfSubStepsForStep = 1;    // if there are any sub steps in the step - if no sub steps then it should be 1 to avoid divide by zero error
        var stepNumber = 3;                 // step number  
        var percentForSubStep = Math.ceil(new Number(eachStepPercent / numberOfSubStepsForStep).toFixed(2)) * stepNumber; // equivalent percentage for a step
        var subStepNumber = 1;              // sub step number - if no sub steps then it should be 1 to avoid math errors
        var widthForThisStep = Math.ceil((progressBarWidth * (percentForSubStep / 100)) * subStepNumber);  // progress bar width for this step
        var label = (document.getElementById('<%=((Label)Master.FindControl("lb_ProgressBarText")).ClientID %>'));
        $('#<%=((Label)Master.FindControl("lb_ProgressBarText")).ClientID %>').text('You are ' + percentForSubStep + '% done');
        $('.progressBarFill').width(widthForThisStep);
    </script>

我希望这会有所帮助。

【讨论】：