Tôi có một biểu mẫu đang được tạo động tùy thuộc vào việc lựa chọn người dùng bằng cách sử dụng Ajax (được xây dựng trong .NET Ajax với UpdatePanel).ajax "tải" biểu tượng với UpdatePanel postbacks
Tôi làm cách nào để chèn biểu tượng tải ajax "chuẩn" (có thể gắn nó vào con trỏ chuột) trong khi postback đang xảy ra sau đó xóa nó khi bài đăng kết thúc?
Tôi đã cài đặt AjaxToolKit nếu có ích.
sử dụng UpdateProgress của bộ công cụ: hy vọng điều này sẽ giúp bạn
<asp:updatepanel id="ResultsUpdatePanel" runat="server">
<contenttemplate>
<div style="text-align:center;">
<asp:updateprogress id="UpdateProgress1" runat="server" associatedupdatepanelid="ResultsUpdatePanel" dynamiclayout="true">
<progresstemplate>
<img src="support/images/loading.gif">
</progresstemplate>
</asp:updateprogress>
</div>
//your control code
</contenttemplate>
</asp:updatepanel>
Sử dụng sau mã ...
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdateProgress ID="updProgress"
AssociatedUpdatePanelID="UpdatePanel1"
runat="server">
<ProgressTemplate>
<img alt="progress" src="images/progress.gif"/>
Processing...
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="lblText" runat="server" Text=""></asp:Label>
<br />
<asp:Button ID="btnInvoke" runat="server" Text="Click"
onclick="btnInvoke_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
protected void btnInvoke_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
lblText.Text = "Processing completed";
}
ở đây tôi tìm thấy một số hoạt Javascript để thực hiện cập nhật quá trình bản thân và cũng có thể bạn có thể đặt nó ở bất cứ nơi nào trong trang và nó hoạt động bất kỳ bảng cập nhật nào trong trang.
<script type="text/javascript">
// Get the instance of PageRequestManager.
var prm = Sys.WebForms.PageRequestManager.getInstance();
// Add initializeRequest and endRequest
prm.add_initializeRequest(prm_InitializeRequest);
prm.add_endRequest(prm_EndRequest);
// Called when async postback begins
function prm_InitializeRequest(sender, args) {
// get the divImage and set it to visible
var panelProg = $get('divImage');
panelProg.style.display = '';
// reset label text
var lbl = $get('<%= this.lblText.ClientID %>');
lbl.innerHTML = '';
// Disable button that caused a postback
$get(args._postBackElement.id).disabled = true;
}
// Called when async postback ends
function prm_EndRequest(sender, args) {
// get the divImage and hide it again
$('divImage').hide();
// Enable button that caused a postback
$get(sender._postBackSettings.sourceElement.id).disabled = false;
}
</script>
<asp:UpdateProgress ID="updateProgress" runat="server">
<ProgressTemplate>
<div class="loading-panel">
<div class="loading-container">
<img src="<%= this.ResolveUrl("~/images/gears.gif")%>" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<style>
.loading-panel {
background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0;
position: relative;
width: 100%;
}
.loading-container {
background: rgba(49, 133, 156, 0.4) none repeat scroll 0 0;
color: #fff;
font-size: 90px;
height: 100%;
left: 0;
padding-top: 15%;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 999999;
}
</style>
tải hình ảnh từ: http://loading.io/
Sau một số thử nghiệm hạn chế tôi tìm thấy ở đó là một chút chậm trễ trong việc bổ sung năng động của các yếu tố DOM khi sử dụng của khuôn khổ '' kiểm soát. Ngược lại, phương pháp này kết hợp các sự kiện JS có liên quan đã đưa ra phản hồi giao diện người dùng tức thì. –
có một nhanh hơn nhưng ít nhưng nếu bạn có một trang nặng với nhiều dom bạn có thể phân biệt tốc độ của cả hai –
Điều này làm việc tốt cho tình hình của tôi vì tôi có từ 3-7 bảng điều khiển cập nhật trong một khu vực và nếu có bất kỳ bản cập nhật tôi muốn để làm một số "công việc" này cho phép tôi lắng nghe tất cả và hiển thị và ẩn và thao tác các dom như tôi cần thiết, cảm ơn! –