進度欄，使用樣式更新進度

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" />

我實際上是將WebForm與MasterPage一起使用，並且HiddenField和Javascript的位置在下面。.而進度條位於ContentPlaceHolder的結束標記之前靠近底部的位置。

我跟着這個鏈接，但它沒有工作了.. 這這里

我在想這可能是腳本未在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()方法使用逗號分隔符創建一個字符串。 進度欄僅接受帶有點分隔符的雙精度。

這可行。

1. 將ID添加到進度控件。

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

2. 在代碼后面的代碼中使用此控件來分配值。

    ProgressBar.Style.Add("width", overallPercentageFull.ToString("F1") + "%"); ProgressBar.Attributes.Add("aria-valuenow", overallPercentageFull.ToString("F1")); 

3. 擺脫hiddenField和其他JS。

Answer 2

我認為沒人會讀這個，因為這個問題相當冗長。 但是我設法不使用JQuery而是只使用后面的代碼來修復所有問題。

花了幾個小時嘗試解決此問題，但解決方案只是設置樣式-> 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");
            }
        }

最后一次更新一次酒吧。 我什至嘗試將其放在“更新面板”中。