Progress bar in webform
I am creating a webform in .net in which approximate 14 fields are there . I want to create a progress bar in the end of webform which will show the status of 开发者_如何学运维form completion. if all the fields of form are filled than it will show 100% in progress bar otherwise it will show some % according to the form status.
How can i accomplish this in .Net. Is there any there any kind of ajax extender for this particular work
You can just use two divs, and adjust the size of the inner div to show progress, as in this example. When a field is edited, the "check" function is called, which checks the fields and updates the progress bar.
<html>
<head>
<script type="text/javascript">
function check() {
var completion = 0;
if (document.getElementById("field1").value != "") {
completion++;
}
if (document.getElementById("field2").value != "") {
completion++;
}
if (document.getElementById("field3").value != "") {
completion++;
}
document.getElementById("progressbar").style.width = completion*20+"px";
}
</script>
</head>
<body>
<form action="script.aspx" method="GET">
Name: <input type="text" id="field1" onchange="check()" /><br />
Tel No.: <input type="text" id="field2" onchange="check()" /><br />
Email: <input type="text" id="field3" onchange="check()" /><br />
Completion: <div style="width: 60px; height: 10px; border: 1px solid black;">
<div style="width: 0px; height: 10px; background-color: green;" id="progressbar"> </div>
</div>
<input type="submit" />
</form>
</body>
</html>
You could use jQueryUI's Progressbar control. Whenever a textbox loses focus, validate the input. If it's valid, then update the progress bar positively and if the the textbox is empty, update the progress bar negatively.
Refer to the following:
ASP.NET ProgressBar The ASP.NET ProgressBar & Bar Indicator - Professional control is a very useful server control that allows graphical representation of numeric values .
You can choose between a "progress bar" or "bar indicator" style, and you can set a horizontal or vertical orientation.
It supports DataBinding, so you can insert it in Datagrid template column.
The installation file of this control automatically adds the control icon to the toolbox of Visual Studio.Net
A simple tutorial will explain you how to refresh the value of the progress bar.
It’s useful, nice and very easy to use.
ASP.NET AJAX Progress Bar Control If you use AJAX in your web app's, you no doubt have made use of some sort of progress/status indicator that lets the user know that some operation is currently executing. In the app I am currently working on we use an animated gif for this. It works great, but sometimes you might find it nice to have more control over the indicator - i.e. interacting with it via JavaScript and styling it using CSS.
加载中,请稍侯......
精彩评论