Je crée une barre de progression en utilisant un div avec une classe de bootstrap css.

Je suis en fait en train de définir dynamiquement la valeur de la barre de progression à l'aide de JQuery.

Le processus obtient la valeur de la barre de progression, puis la stocke dans un HiddenField, puis récupère cette valeur à partir de HiddenField. Enfin, utiliser JQuery pour modifier la largeur et aria-valuenow pour la barre de progression.

Le problème est que la barre de progression est toujours définie sur 0 en termes de largeur et aria-valuenow. Quelqu'un pourrait-il m'aider s'il vous plaît?

Codes pour la barre de progression,

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

Codes dans la balise de script,

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

Et enfin le HiddenField,

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

J'utilise en fait un WebForm avec un MasterPage, et la position du HiddenField et du Javascript est en dessous. Alors que la barre de progression est placée plus près du bas avant la balise de fermeture du ContentPlaceHolder.

capture

J'ai suivi ce lien mais cela n'a pas fonctionné. Ceci ici

Je pensais que cela pouvait être le script qui ne fonctionnait pas sur PageLoad ou?

Toute aide appréciée s'il vous plaît .. Merci!

Image de celui-ci

Image

Codes derrière:

    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();
0
domster 2 août 2017 à 14:44

2 réponses

Oke a trouvé votre problème. La méthode ToString() crée une chaîne avec un séparateur de virgule. La barre de progression n'accepte qu'un double avec un séparateur de points.

Cela marche.

  1. Ajoutez l'ID au contrôle de progression.

    <div class="progress">
        <div class="progress-bar" runat="server" ID="ProgressBar" 
             aria-valuemax="100" aria-valuemin="0" role="progressbar">
        </div>
    </div>
    
  2. Utilisez ce contrôle dans le code-behind et attribuez les valeurs.

    ProgressBar.Style.Add("width", overallPercentageFull.ToString("F1") + "%"); 
    ProgressBar.Attributes.Add("aria-valuenow", overallPercentageFull.ToString("F1"));
    
  3. Débarrassez-vous de hiddenField et des autres JS.

1
Harrie Kiezebrink 22 oct. 2019 à 07:25

Ceci n'est pas une réponse. Ceci est une réponse pour voir le code de @domster

J'ai essayé la solution et je ne peux pas la faire fonctionner. Voici mon 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>

Dans le code derrière:

    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");
            }
        }

Il met à jour la barre une fois à la fin. J'ai même essayé de le mettre dans un panneau de mise à jour.

0
Rani Radcliff 18 oct. 2019 à 16:08