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

我正在使用div从类bootstrap css创建进度条。使用样式来更新进度的进度条

我实际上是使用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" />

我其实使用带有一个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();

来源

2017-08-02 domster

你做你的脚本代码前加入jQuery库？ –

@AlivetoDie我刚刚从nuget包中加入它，但这一次我得到它0％.. – domster

我下载了jQuery库，并将其添加到我的主页和我的进度条和脚本所在的页面，但我得到了0％。在我的问题中，我在最后添加了一张图片，它现在是9.5％，但现在显示为0％。 – domster

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

This Works。

将Id添加到进度控制。

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

在代码隐藏中使用此控件分配值。这次使用ToString方法的文化参数将创建点分隔符而不是逗号。

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

摆脱hiddenField和其他JS。

来源

2017-08-02 12:01:50

将编辑它..我忘了也 – domster

我必须把它放在$（document）.ready（function（）？ – domster

存储到HiddenField之前的数据类型实际上是双重的。当它在HF里面时，它会变成一个字符串，但我解析成一个浮动，可能是问题？ – domster

我不认为有人会读这个，因为这个问题相当长。但我设法修复了一切，而不使用JQuery，只是简单地使用后面的代码。

花了几个小时试图解决这一问题，但解决方式是设置风格 - >股利进度条

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>

最后，

来源

2017-08-02 13:32:58 domster

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

回答

相关问题