Question

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

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

我认为如果我知道总页数，当我点击提交按钮时，每个页面上的进度条将根据用户所在的页面填充。例如，如果我在30页的第5页上，则进度条应填写5/30或类似的内容。

Answer 1

如果您的页面总是以相同的顺序排列，那么您就可以知道序列中的哪个页面。如果不是同一个订单，那么你必须使用会话来保存页面，或者可能是一个隐藏的字段，这个字段会被回发，最后的页数是多少。

- 设计明智，你可以做30个不同的图像，而不是最好的解决方案。

- 使用一个滑动图像，使用css背景定位，每个页面将滑动一定百分比，直到它到达容器的另一侧，即100％。

- 或者使用css，在另一个div中有一个div，外部div将具有全宽和边框，然后内部将增加每页的某个百分比。你给内部一个不同的背景颜色。

Answer 2

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

Answer 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>

我希望这会有所帮助。

asp.net中的进度条

3 个答案: