Ajax update progress on Button click
<style type="text/css">
.progress
{
background:
#FFFFFF;
font-family:
Verdana,Arial, Helvetica;
color:
Black;
font-size:
11.5px;
}
</style>
- Add toolscript Manager in ASPX page.
<asp:ToolkitScriptManager ID="ToolkitScriptManager1"
runat="server">
</asp:ToolkitScriptManager>
- Add update Panel, set triggers controlID to Button Id
<asp:UpdatePanel ID="UpdatePanel1"
runat="server"
UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnRequst" EventName="Click" />
</Triggers>
<ContentTemplate>
<div style="margin-bottom: 30px">
<table>
<tr>
<td>
<asp:Image ID="Image1" ImageUrl="~/Images/LogoFull.bmp"
runat="server" alt="" Width="140px"
Height="50px"
/>
</td>
</tr>
</table>
</div>
<table>
<tr>
<td colspan="2" valign="middle"
style="padding-left: 60px">
<asp:Button ID="btnRequst"
runat="server"
Text="Submit"
CssClass="Button" Width="180px"
OnClick="btnRequst_Click"
/>
</td>
</tr>
</table>
<asp:UpdateProgress ID="updProgress"
runat="server">
<ProgressTemplate>
<div>
<table>
<tr>
<td
align="center"
class="progress">
<img
alt=""
style="vertical-align: middle;" src="/Images/ajax-loaderimg.gif"
/>
</td>
</tr>
<tr>
<td
align="center"
class="progress">
Loading...
</td>
</tr>
</table>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
- In Code behind
protected void btnRequst_Click(object
sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
}
- Find image here ajax-loaderimg.gif add it to a directory Images.
No comments:
Post a Comment