c# - 根据 Visual Studio 2010，jQuery 函数 "undefined"

Question

这可能是一个关于 jQuery UI 和 Javascript 的非常简单的问题，但我仍然在摸索这些语法。每当我的 C# (ASP.NET) 程序达到不同函数中的某个点时，我都会尝试更新 jQuery 进度条。我这样做正确吗？我可以在页面上看到空的进度条，但无法让它更新进度。

这是我的脚本:

  <script type="text/javascript">
  $(document).ready(function() {
    $("#progressbar").progressbar({ value: 0 });
  });

function updateProgress(number) {
        if (number < 100) {
            $("#progressbar").progressbar("value", number);
        }
    }
</script>

以下是我的更多脚本引用:

 <link href="Styles/tomcat.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="colorbox.css" />
<script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.21.custom.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jquery.colorbox.js"></script>
<link href="Content/themes/base/jquery.ui.progressbar.css" rel="stylesheet" type="text/css" />
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery.ui.core.js" type="text/javascript"></script>
<link href="Scripts/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery.ui.progressbar.js" type="text/javascript"></script>
<link href="Scripts/ui.all.css" rel="stylesheet" type="text/css" />

这里是我尝试通过 C# 函数使用 updateProgress() 函数的地方。我试图将“10%”发送到进度栏，但我的调试器出错并提示 updateProgress() 未定义。

 ScriptManager.RegisterStartupScript(this, this.GetType(), "temp", "<script language='javascript'>UpdateProgress(10);</script>", false);

编辑:我添加了以下 bool 值来绕过页面刷新和刷新进度条。

 var runOnce = new Boolean;
runOnce = false;
$(document).ready(function() {
    if(!runOnce)
    {
        $("#progressbar").progressbar({ value: 0 });
        runOnce = true;
    }
});

但我认为它不起作用。它仍然会在每次页面加载时清除并将其设置回零。

Answer 1

javascript 区分大小写。将函数声明更改为 UpdateProgress 或将注入(inject)更改为 updateProgress。

我还认为您应该在脚本标记中包含 type="text/javascript" - language 是一个已弃用的属性。相关:What is the difference between "lang" and "type" attributes in a script tag?

编辑:处理被覆盖的进度:

var progressAlreadySet;

$(document).ready(function() {
    $("#progressbar").progressbar(); // initialize

    if (!progressAlreadySet) {
        $("#progressbar").progressbar("value", 0);
    }
});

var updateProgress = function (number) {
    if (number < 100) {
        progressAlreadySet = true;
        $("#progressbar").progressbar("value", number);
    }
};