网络表单中的进度条答案

【问题标题】：Progress bar in webform网络表单中的进度条
【发布时间】：2011-08-25 23:02:22
【问题描述】：

我正在.net 中创建一个网络表单，其中大约有 14 个字段。我想在 webform 的末尾创建一个进度条，它将显示表格完成。如果表单的所有字段都已填写，它将显示 100% 正在进行中 bar 否则它将根据表单状态显示一些 %。

我如何在 .Net 中实现这一点。这个特定的工作是否有任何类型的 ajax 扩展器

【问题讨论】：

【解决方案1】：

您可以只使用两个 div，并调整内部 div 的大小以显示进度，如本例所示。当一个字段被编辑时，“检查”函数被调用，它检查字段并更新进度条。

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

【讨论】：

【解决方案2】：

你可以使用 jQueryUI 的Progressbar control。每当文本框失去焦点时，验证输入。如果有效，则积极更新进度条，如果文本框为空，则消极更新进度条。

【讨论】：

【解决方案3】：

请参阅以下内容：

ASP.NET ProgressBar ASP.NET ProgressBar & Bar Indicator - Professional 控件是一个非常有用的服务器控件，它允许数字值的图形表示。

您可以在“进度条”或“条形指示器”样式之间进行选择，并且可以设置水平或垂直方向。

它支持DataBinding，因此您可以将它插入Datagrid模板列。

该控件的安装文件自动将控件图标添加到Visual Studio.Net的工具箱中

一个简单的教程会告诉你如何刷新进度条的值。

它有用、漂亮且非常易于使用。

ASP.NET AJAX Progress Bar Control 如果您在 Web 应用程序中使用 AJAX，那么您无疑已经使用了某种进度/状态指示器，让用户知道当前正在执行某些操作。在我目前正在开发的应用程序中，我们为此使用了动画 gif。它工作得很好，但有时您可能会发现更好地控制指标 - 即通过 JavaScript 与其交互并使用 CSS 对其进行样式设置。

【讨论】：

OP 不想显示进度条，因为他想指示当前正在执行的一些操作，而只是显示在表单完成提交之前必须填写/选择多少字段。
@Tim：让我们把它留给 OP 来决定。还是谢谢你。