使用樣式來更新進度的進度條

我正在使用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

使用樣式來更新進度的進度條

回答

相關問題