When designing an interactive web page, it is important for you to let the user know that an action initiated by him/her is in progress.One way to do this is to display an animated .GIF on postback and hide it after the page trip to the server. It would also serve well to disable further inputs from the user until the postback is completed.
Below is a simple ASP.NET page with javascript to display an animated .GIF and disable the button till theirs a response from the server .
Below is a simple ASP.NET page with javascript to display an animated .GIF and disable the button till theirs a response from the server .
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeFile="About.aspx.cs"
Inherits="About"
%>
<!DOCTYPE html>
<html lang="en" >
<head>
<title>Login Form</title>
<script language="javascript"
type="text/javascript">
window.onbeforeunload = function () {
//Disable the button
document.getElementById('<%=btnContinue.ClientID
%>').disabled
= true;
//show the animated image.
document.getElementById('<%=imgLoader.ClientID%>').style.visibility
= 'visible';
}
</script>
</head>
<body >
<form id="Form1" method="post"
runat="server">
<table style="width: 100%;">
<tr>
<td class="style6">
<asp:Label ID="Label1" runat="server"
Text="Username
:"></asp:Label>
</td>
<td class="style7">
<asp:TextBox ID="txtUsername"
placeholder="Username"
runat="server"></asp:TextBox>
</td>
<td class="style8">
</td>
</tr>
<tr>
<td class="style6">
<asp:Label ID="Label2" runat="server"
Text="Password
:"></asp:Label>
</td>
<td class="style7">
<asp:TextBox ID="txtPassword"
placeholder="Password"
runat="server"
TextMode="Password"></asp:TextBox>
</td>
<td class="style8">
</td>
</tr>
<tr>
<td class="style1">
</td>
<td class="style2">
<asp:Button ID="btnContinue"
runat="server"
Text="Continue"
onclick="btnContinue_Click"
Width="287px" />
</td>
<td class="style9">
</td>
</tr>
</table>
<p>
<asp:Image ID="imgLoader"
runat="server"
Height="52px"
ImageUrl="~/img/ajax-loader.gif"
style="visibility:hidden"
Width="62px"
/>
</p>
</form>
</body>
</html>
Page before postback
Page during post back. *Note that the button was disabled during postback