I'm using the AjaxToolkit in asp.net project c# code.
I have a script managet and an update pannel in my page. It all works perfect.
The only problem is that I can't figure out how to show the Ajax loader gif while the request is processed.
Any idea?
TY
se updateprogress of tool kit :hope this will help you
<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>
If you use some styles to Div Loader will come at the center of the screen..so it looks good.
use this
<div style="text-align:center;position:fixed;left:40%;top:40%;padding-top:10px;">
<asp:updateprogress id="UpdateProgress1" runat="server" associatedupdatepanelid="ResultsUpdatePanel" dynamiclayout="true">
<progresstemplate>
<asp:Image ID="LoaderImage" runat="server" ImageUrl="~/images/loading.gif" />
</progresstemplate>
</asp:updateprogress>
</div>
Related
UpdateProgress control should show progressing until code executes.
I have set of code inside button_click(), progress bar should progress until code executes.
I can use Thread.sleep(5000), but my code takes more time and it varies from one request to another request. How can I resolve this? Please help me out.
<asp:ScriptManager runat="server">
</asp:ScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server"
AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="modal">
<div class="center">
<img alt="" src="loader.gif" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div align="center">
<h1>Click the button to see the UpdateProgress!</h1>
<asp:Button ID="Button1" runat="server"
Text="Submit" OnClick="Button1_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
Button handler code:
protected void Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
}
I have a button on Page 1 and when the button click event occurs, I had to do some process that takes around 2-3 seconds. So, I want to Put a Loading Image in Center and disable all other controls on the Page 1.
I tried using UpdatePanel :
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button runat="server" Text="Button" onclick="Unnamed1_Click" />
<asp:Label runat="server" Text="Label" ID="lbl"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" >
<ProgressTemplate>
<div id="IMGDIV1" align="center" valign="middle" runat="server" style="position: absolute;visibility:visible;vertical-align:middle;border-style:none;border-color:black;background-color:transparent;">
<asp:Image ID="Image1" runat="server" ImageUrl="~/ajax-loader (1).gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
But the controls did not get disabled. Any Solution or Javascript ??
Also I want that it should work if want to stay on the same page.
why dont yu use telerik radgrid loading panel ?
http://www.telerik.com/help/aspnet-ajax/ajax-center-loadingpanel.html
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Create File Upload Progress Bar ASP.NET and JavaScript
I have to create an web application in asp.net with C#.net in that i have to display progress bar to show uploading status of file how should i can do this?
what I had Understood from your question, based on that I had made an attempt to fulfill that using AJAX Extenstions.
My Code Here
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:FileUpload ID="FileUpload1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<br />
<div>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl="~/uploading.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</div>
I Hope this Might Help You.
Please Mark as answer if It Helps You.
I have an ASP.NET application with a ListView. I get data from Active Directory and now I want a wait symbol for the time if the ListVew is building. I thought I would use a UpdateProgress Control from Ajax Control toolkit. But I don't know how I can use it if I click on a Button and the wait symbol (for example a gif) closes if the ListView is finished. :(
My CS file:
protected void btnBenutzerSuchen_Click(object sender, EventArgs e)
{
//If I click on this Button the gif must start
try
{
... // my ListView get data
this.myListView.DataSource = dv;
this.myListView.DataBind();
...
}
catch (Exception)
{
...
}
//If the ListView is finish the gif must close
}
How I can do this? Can I do this with the UpdateProgress like this:
<asp:UpdateProgress ID="UpdateProgress1" DynamicLayout="true" runat="server" AssociatedUpdatePanelID="?" >
<ProgressTemplate>
<div class="progress">
<img src="images/ajax-loader-arrows.gif" /> please wait...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
My update.aspx file:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="~/BenutzerListe.aspx.cs" Inherits="BenutzerListe.BenutzerListe" %>
<%# Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit"%>
<!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></title>
<script src="Scripte/jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripte/jquery-ui-1.8.22.custom.min.js" ></script>
<script language="javascript" type="text/javascript">
// my javascript code
</script>
<link href="~/App_Theme/BenutzerListeStyle.css" type="text/css" rel="Stylesheet" />
<link href="App_Theme/jquery-ui-1.8.22.custom.css" type="text/css" rel="Stylesheet" />
<link href="App_Theme/PopUpDialog_Style.css" type="text/css" rel="Stylesheet" />
<style type="text/css">
#SuchTabelle
{
width: 587px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:scriptmanager id="ScriptManager1" runat="server">
</asp:scriptmanager>
<div class="header">
<br />
<table id="SuchTabelle" class="SuchTabelle" runat="server" border="0" width="100%">
<tr>
<th><asp:Label ID="id_SearchUser" runat="server" Text="lblSearchUser"></asp:Label></th>
<th class="txtBenutzerSuchen"><asp:TextBox ID="txtBenutzer" runat="server" Width="150px" ToolTip="Gesucht wird nach Vorname, Nachname, eMail , Abteilung und Telefonnummer"></asp:TextBox></th>
<th><asp:Label ID="id_location" runat="server" Text="lblLocation"></asp:Label></th>
<th class="DropDownList"><asp:DropDownList ID="dropWerk" runat="server" Width="200px" /></th>
<th>
<asp:Button ID="Button2" runat="server" Text="Suchen" onclick="btnBenutzerSuchen_Click" Width="150px"/>
</th>
</tr>
</table>
</div>
<div class="bodyList">
<asp:UpdatePanel ID="update" runat="server">
<ContentTemplate>
<asp:ListView> .... </asp:ListView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="updatePro" DynamicLayout="true" runat="server" AssociatedUpdatePanelID="update">
<ProgressTemplate>
<asp:Image ImageUrl="~/App_Theme/ajax_loader_circle.gif" runat="server" ID="waitsymbol" />
</ProgressTemplate>
</asp:UpdateProgress>
<hr />
</div>
</form>
</body>
</html>
First place your listview aspx code inside an update panel
<asp:UpdatePanel ID="up" runat="server">
<ContentTemplate>
// Place your list View Code here
<asp:ListView ..........
...... </asp:ListView>
</ContentTemplate>
<Triggers>
// If button is present outside update panel then specify AsynPostBackTrigger
<asp:AsyncPostBackTrigger ControlID="btnControlID" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
// Now Set AssociatedUpdatePanelID="up" in the UpdateProgress
<asp:UpdateProgress ID="UpdateProgress1" DynamicLayout="true" runat="server" AssociatedUpdatePanelID="up" >
<ProgressTemplate>
<div class="progress">
<img src="images/ajax-loader-arrows.gif" /> please wait...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
Try to put your button within an UpdatePanel that contains the code may take a long time to execution, then associate the UpdateProgress control to the UpdatePanel. Code you may need is just like:
<asp:UpdatePanel ID="updatePanelMain" runat="server">
<ContentTemplate>
<asp:button runat="server" ID="btnBenutzerSuchen" OnClick="btnBenutzerSuchen_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="updatePanelMain" DisplayAfter="200">
<ProgressTemplate>
<div class="progress">
<img src="images/ajax-loader-arrows.gif" /> please wait...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
I did a small example simulation a button click within an updatePanel. Pay attention to the attribute AssociatedUpdatePanelID which must be set, in order to show your progressTemplate.
default.aspx
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnDoSomething" runat="server" Text="Do Something"
onclick="btnDoSomething_Click" />
<asp:ListView> YOUR_LISTVIEW_GOES_HERE </asp:ListView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" DynamicLayout="true" runat="server"
AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="progress">
<img src="images/ajax-loader-arrows.gif" /> please wait...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
default.aspx.cs
protected void btnDoSomething_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
// or update listView
}
Show Progress Bar Using UpdateProgress Control in Asp.net
Refer This Link for more information
http://www.freshcodehub.com/Article/22/show-progress-bar-using-updateprogress-control-in-aspnet
<asp:UpdateProgress ID="prgLoadingStatus" runat="server" DynamicLayout="true">
<ProgressTemplate>
<div id="overlay">
<div id="modalprogress">
<div id="theprogress">
<asp:Image ID="imgWaitIcon" runat="server" ImageAlign="AbsMiddle" ImageUrl="~/img/progress.gif"
Width="230px" /><br />
Please wait...
</div>
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnProgress" runat="server" Text="Show Progress" OnClick="btnProgress_Click" />
</ContentTemplate>
</asp:UpdatePanel>
I have a button click event which does a lengthy function and takes time. So i want to display a progress bar. Can you let me know how can I do it.
I am very new to .NEt .. any help appreciated
Thanks in Advance,
Amritha
I think this example is basic enough:
<form id="form1" runat="server">
<asp:ScriptManager ID="sm" runat="server" />
<asp:UpdateProgress runat="server" id="PageUpdateProgress">
<ProgressTemplate>
Loading...
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel runat="server" id="Panel">
<ContentTemplate>
<asp:Button runat="server" id="upd" onclick="updButton_Click"
text="click to update" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
In code behind updButton_Click takes a long time to update, during the period you will see Loading... on the page, you can change the text to a <img src="blabla" /> to make it more like a ProgressBar(such as a GIF moving-bar image)