Question

我正在使用带有来自bootstrap css的类的div创建一个进度条。

我实际上是使用JQuery动态设置进度条的值。

进程获取进度条的值，然后将其存储到HiddenField中，然后从HiddenField中检索此值。最后，使用JQuery更改进度条的宽度和aria-valuenow。

问题在于，就宽度和aria-valuenow而言，进度条仍设置为0。有人可以帮帮我吗？

进度条代码，

<div class="skills-wrapper wow animated bounceIn animated animated" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: bounceIn;">
  <h3 class="heading-progress">Login & Login Failures (%) <span class="pull-right" runat="server" id="Lbl_PercentageCheck"></span></h3>
     <div class="progress">
        <div class="progress-bar" runat="server" aria-valuemax="100" aria-valuemin="0" role="progressbar"></div>
  </div>

脚本标记中的代码

<script type="text/javascript">
    $(document).ready(function () {
        var hfPercentage = parseFloat($('#hf_Percentage').val());
        $('.progress-bar').css('width', hfPercentage + '%').attr('aria-valuenow', hfPercentage);
    });
</script>

最后是HiddenField，

<asp:HiddenField runat="server" ID="hf_Percentage" />

我实际上使用了一个带有MasterPage的WebForm，并且HiddenField和Javascript的位置低于... 而进度条放在ContentPlaceHolder的结束标记之前的底部附近。

我按照这个链接但没有成功.. This here

我在想是不是在PageLoad上运行的脚本还是？

任何帮助表示赞赏..谢谢！

它的形象

背后的代码：

    int countLogin = al.pieLogin(username);
    int countLogout = al.pieLogout(username);
    int countFailure = al.pieFailure(username);
    int countChangePW = al.pieChangePW(username);

    //If more than 20%, prompt Admin to perform actions.

    double overallPercentageFull = Math.Round((countFailure * 100.0) / (countFailure + countLogin), 1);

    Lbl_PercentageCheck.InnerText = overallPercentageFull.ToString() + "%";
    //Lbl_PercentageCheck.Style.Add("width", (overallPercentageFull).ToString() + "%");
    //Lbl_PercentageCheck.Attributes.Add("aria-valuenow", overallPercentageFull.ToString());

    hf_Percentage.Value = overallPercentageFull.ToString();

Answer 1

奥克发现了你的问题。 ToString()方法使用逗号分隔符创建一个字符串。进度条只接受带点分隔符的双精度。

这很有效。

将ID添加到进度控件。

<div class="progress">
    <div class="progress-bar" runat="server" ID="ProgressBar" 
         aria-valuemax="100" aria-valuemin="0" role="progressbar">
    </div>
</div>

在代码隐藏中使用此控件并分配值。这次使用toString方法的culture参数，它将创建一个点分隔符而不是逗号。

ProgressBar.Style.Add("width", overallPercentageFull.ToString(new CultureInfo("en-US")) + "%"); 
ProgressBar.Attributes.Add("aria-valuenow", overallPercentageFull.ToString(new CultureInfo("en-US")));

摆脱hiddenField和其他JS。

Answer 2

我认为没有人会读到这个，因为这个问题相当冗长。但是我设法在不使用JQuery的情况下修复所有内容，而只是使用后面的代码。

花了好几个小时试图修复此问题，但解决方案只是设置样式 - ＆gt; div进度条的宽度

ProgressBarDiv.Style.Add("width", (overallPercentageFull).ToString() + "%");

aspx.cs中的代码：

    int countLogin = al.pieLogin(username);
    int countLogout = al.pieLogout(username);
    int countFailure = al.pieFailure(username);
    int countChangePW = al.pieChangePW(username);

    //If more than 20%, prompt Admin to perform actions.

    double overallPercentageFull = Math.Round((countFailure * 100.0) / (countFailure + countLogin), 1);

    Lbl_PercentageCheck.InnerText = overallPercentageFull.ToString() + "%";
    ProgressBarDiv.Style.Add("width", (overallPercentageFull).ToString() + "%");
    ProgressBarDiv.Attributes.Add("aria-valuenow", overallPercentageFull.ToString());

    if (overallPercentageFull < 15.0)
    {
        Lbl_PercentageCheck.Style.Add("ForeColor", "green");

    }
    else if (overallPercentageFull >= 15.0)
    {
        Lbl_PercentageCheck.Style.Add("ForeColor", "red");
    }

WebForm中的代码：

<div class="col-md-12">
    <div class="skills-wrapper wow animated bounceIn animated animated" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: bounceIn;">
        <h3 class="heading-progress">Login & Login Failures (%) <span class="pull-right" runat="server" id="Lbl_PercentageCheck"></span></h3>
           <div class="progress">
               <div class="progress-bar" aria-valuemax="100" aria-valuemin="0" style="width: 0%" runat="server" id="ProgressBarDiv" role="progressbar">
               </div>
            </div>         
    </div>

最后，

Answer 3

这不是答案。这是从@domster看代码的回应

尝试了解决方案，无法使其正常工作。这是我的html：

 <div>
     <h3 class="heading-progress">Progress(%) <span class="pull-right" runat="server" id="Lbl_PercentageCheck"></span></h3>
     <div class="progress">
           <div class="progress-bar" aria-valuemax="100" aria-valuemin="0" style="width: 0%" runat="server" id="ProgressBarDiv" role="progressbar">
           </div>
        </div>   
 </div>

在后面的代码中：

    protected void btnImport_ServerClick(object sender, EventArgs e)
    {
        HasUpload = true;

        for(int z = 1000;z < 3322;z++)
        {
            double overallPercentageFull = Math.Round((z * 100.0) / 3322, 1);
            Lbl_PercentageCheck.InnerText = overallPercentageFull.ToString() + "%";
            ProgressBarDiv.Style.Add("width", (overallPercentageFull).ToString() + "%");
            ProgressBarDiv.Attributes.Add("aria-valuenow", overallPercentageFull.ToString());
            if (overallPercentageFull < 15.0)
            {
                Lbl_PercentageCheck.Style.Add("ForeColor", "green");

            }
            else if (overallPercentageFull >= 15.0)
            {
                Lbl_PercentageCheck.Style.Add("ForeColor", "red");
            }
            Thread.Sleep(200);
            Lbl_PercentageCheck.InnerText = overallPercentageFull.ToString() + "%";
            ProgressBarDiv.Style.Add("width", (overallPercentageFull).ToString() + "%");
            ProgressBarDiv.Attributes.Add("aria-valuenow", overallPercentageFull.ToString());

            if (overallPercentageFull < 15.0)
            {
                Lbl_PercentageCheck.Style.Add("ForeColor", "green");

            }
            else if (overallPercentageFull >= 15.0)
            {
                Lbl_PercentageCheck.Style.Add("ForeColor", "red");
            }
        }

它最后一次更新栏。我什至尝试将其放在“更新面板”中。

使用样式更新进度的进度条

3 个答案: