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
0 Komentar