在asp.net中使用進度條

Question

我使用了這個鏈接中給出的例子

這是我的.aspx頁面的代碼

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jqueryui.css"
rel="stylesheet" type="text/css" />

<script type="text/jscript" src="http://ajax.googleapis.com/ajax/libs/jquery1.5/jquery  .min.js"></script>

<script type="text/jscript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

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

</asp:Content>

並且進度條的div就是這個

<div style="margin-left: 10px; margin-right: 10px;" id="progressbar">    </div>

我試圖按照源頁面上給出的說明但沒有任何效果。 你能告訴我我在這里失蹤了嗎？ 提前。 （修正了這部分。我在放置我的contntentplaceholder時犯了一個錯誤）

編輯：我怎么能以某種方式更改值，以便在按下按鈕時動畫...按鈕的頁面代碼如下：

<asp:Button ID="btnConfirm" CssClass="button" SkinID="Common" runat="server"Text="Confirm"OnClick="btnConfirm_Click" />

Answer 1

嘗試這個：

<script type="text/jscript">
jQuery(document).ready(function() {
jQuery("#progressbar").progressbar({ value: 37 });
});
</script>

asp.net也使用$來獲取自己的客戶端javascript。

考慮我們jQuery.noConflict（）

您可以像這樣封裝您的jQuery代碼：

jQuery.noConflict();
(function($) { 
  $(function() {
    $(document).ready(function() {
    $("#progressbar").progressbar({ value: 37 });
    // more code using $ as alias to jQuery
  });
})(jQuery);

編輯：更新上面內容的值和帶有UpdatePanel的按鈕。

請參閱如何使用UpdatePanels

將進度百分比分配給asp文字。

jQuery.noConflict();
(function($) { 
  $(function() {
    $(document).ready(function() {
    $("#progressbar").progressbar({ value: <asp:Literal runat="server" ID="ProgressPercentage" /> });
    // more code using $ as alias to jQuery
  });
})(jQuery);

單擊按鈕

ProgressPercentage.Text = progress.ToString();