CODEWITHSUNDEEP
.netasp.netajaxwebforms
Durga Dutt
Durga Dutt

Reputation: 4113

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

Upvotes: 3

Views: 9295

Answers (3)

mystery
mystery

Reputation: 19513

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">&nbsp;</div>
    </div>
    <input type="submit" />
</form>
</body>
</html>

Upvotes: 2

Akram Shahda
Akram Shahda

Reputation: 14771

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.

enter image description here

enter image description here

Upvotes: 1

keyboardP
keyboardP

Reputation: 69362

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.

Upvotes: 1

Related Questions