[英]Progress Bar using Style to Update Progress
我正在使用带有来自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();
奥克发现了你的问题。 ToString()
方法使用逗号分隔符创建一个字符串。 进度栏仅接受带有点分隔符的双精度。
这可行。
将ID添加到进度控件。
<div class="progress"> <div class="progress-bar" runat="server" ID="ProgressBar" aria-valuemax="100" aria-valuemin="0" role="progressbar"> </div> </div>
在代码后面的代码中使用此控件来分配值。
ProgressBar.Style.Add("width", overallPercentageFull.ToString("F1") + "%"); ProgressBar.Attributes.Add("aria-valuenow", overallPercentageFull.ToString("F1"));
摆脱hiddenField和其他JS。
我认为没人会读这个,因为这个问题相当冗长。 但是我设法不使用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>
最后,
这不是答案。 这是从@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");
}
}
最后一次更新一次酒吧。 我什至尝试将其放在“更新面板”中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.