Dưới đây là cách làm progress indicator trong asp.net với Atlas (MS Ajax). Khi ấn vào sẽ có 1 cái hình xoay xoay và con trỏ chuột trở thành waiting. Trông cũng hay phết. Bài này là bài sưu tầm. Ghi qua đây để tiện lấy ra khi cần.
Source trang aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="UpdatePanelAnimation" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Update Panel with Animation</title>
<link href="UpdatePanelAnimation.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="Container" class="Normal">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Update Me" /><br /><br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html></asp>
Souce code behind c#
public partial class UpdatePanelAnimation : System.Web.UI.Page
{
protected void Button1_Click(object sender, EventArgs e)
{
Thread.Sleep(5000);
Label1.Text = DateTime.Now.ToString();
}
}
Souce css
.Normal
{
border: dashed 1px #000000;
background-color: #FFFFFF;
cursor: auto;
padding: 10px;
width: 200px;
text-align: center;
}
.Progress
{
border: dashed 1px #000000;
background-color: #EEEEEE;
background-image: url(spinner.gif);
background-position: center center;
background-repeat: no-repeat;
cursor: wait;
padding: 10px;
width: 200px;
text-align: center;
}
Cuối cùng là source javascript để handle event
<script language="javascript">
// Get a reference to the PageRequestManager.
var prm = Sys.WebForms.PageRequestManager.getInstance();
// Using that prm reference, hook _initializeRequest
// and _endRequest, to run our code at the begin and end
// of any async postbacks that occur.
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
// Executed anytime an async postback occurs.
function InitializeRequest(sender, args)
{
// Change the Container div's CSS class to .Progress.
$get('Container').className = 'Progress';
// Get a reference to the element that raised the postback,
// and disables it.
$get(args._postBackElement.id).disabled = true;
}
// Executed when the async postback completes.
function EndRequest(sender, args)
{
// Change the Container div's class back to .Normal.
$get('Container').className = 'Normal';
// Get a reference to the element that raised the postback
// which is completing, and enable it.
$get(sender._postBackSettings.sourceElement.id).disabled = false;
}
</script>
