Develop Reference

UpdateProgress control should show progressing until code executes

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);
}

Update panel asp.net - page refresh

Page url: http://advancedmedia.co.il/data.aspx
Code:
<asp:Content ID="Content2" ContentPlaceHolderID="page_content_cp" Runat="Server">
<asp:UpdatePanel runat="server" ID="UP1" UpdateMode="Conditional">
<ContentTemplate>
<section id="page_section">
<div class="data_top">
<ul class="bxslider">
<asp:ListView ID="LV_slider" runat="server" DataSourceID="**">
<ItemTemplate>
<li>
<asp:Image ID="Image11" ImageUrl='<%#XPath("big_image_url") %>' AlternateText="slider" runat="server" />
</li>
</ItemTemplate>
</asp:ListView>
</ul>
</div>
<div class="shaddow"></div>
<div class="data_bottom">
<asp:ListView runat="server" ID="LV_data_bottom" DataSourceID="**">
<ItemTemplate>
<div style="display:inline;">
<asp:LinkButton runat="server" CommandArgument='<%#XPath("big_image_url") %>' ID="LB_thumb" OnClick="lb_thumb1" ><asp:Image runat="server" ID="IMG_img1" ImageUrl='<%#XPath("small_image_url") %>' />
<asp:Label runat="server" CssClass="title" ID="bottom_label" Text='<%#XPath("title") %>'></asp:Label></asp:LinkButton>
</div>
</ItemTemplate>
</asp:ListView>
</div>
</section>
</ContentTemplate>
</asp:UpdatePanel>
<asp:XmlDataSource ID="**" runat="server"
DataFile="~/***/***" XPath="/Data/**/**">
</asp:XmlDataSource>
</asp:Content>
Click on the thumbs "jump" the page.
I dont want the page will "jump"/"refresh" after click on thumb. how can i do that? Maybe i wrong on the place of the updatepanel ?

You can always get it done using updatepanel and microsoft ajax... but there is a better and more lightweight alternative. Use jquery to swap the main image on top when the thumbnails are clicked, without doing a page refresh.
Define a surrounding div for the imain image with id "imageBox"
<img class="thumb" src="image1_thumb.jpg" />
<div id="imageBox"> </div>
then,
$(document).ready(function(){
$('#changeImage').click(function(){
var rel = $(this).attr('rel');
$("#imageBox").html("<img src='image" + rel + ".jpg' />");
})
});
This is both clean and lightweight. no Microsoft ajax panel junk.

I'm not sure about what is your problem here, but if you want to separate the Update Panel into two you can do so.
There's an explanation on how different update panels can trigger themselves.
http://www.asp.net/web-forms/tutorials/aspnet-ajax/understanding-asp-net-ajax-updatepanel-triggers

Used AutoPostBack="false" in listview page can't be refresh ..or used javascript to change the image

Put ScriptManager.
<asp:ScriptManager EnablePartialRendering="true"
ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Content ID="Content2" ContentPlaceHolderID="page_content_cp" Runat="Server">
<asp:UpdatePanel runat="server" ID="UP1" UpdateMode="Conditional">
<!-- bla bla bla.. -->

Did you try to change the following
UpdateMode="Conditional"
With this?
UpdateMode="Always"

Set ClientIDMode=Auto on the LinkButton.

Everything seems correct.
Here is a sample for Update panel.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication3.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="Updatepanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
Code Behind
namespace WebApplication3
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
this.Label1.Text = "change Test 1";
}
protected void LinkButton1_Click(object sender, EventArgs e)
{
this.Label1.Text = "change Test 2";
}
}
}

Create Loading animation before navigating to another page and disable all conrols on it during animation

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

Progress bar Issue : End results not displaying

Im having an issue with my progress bar. Now I have looked through all of the questions in overflow and Ive been through alot of google searching. I may have overlooked something, but Ill bet you anything this problem is something really simply I keep overlooking. Heres the deal.
My progress bar seems to work just fine. Im using ajax, everything is in the right panel, it fires immediatly when the button is pushed and actually it stops once the process is completed (although I have no idea how I did that). Please note, this is as simple as it gets. Its just a GIF, nothing special. Using Visual Studio 2010, SQL Server 2008, Ajax, and C#. Im not using a jquery or js, although I may have too.
My application is simple. It sends orders to a different server, so I am on the client side. Once the button is clicked, the orders are in the process of being sent. My Problem is, although the orders are being sent, when the progress bar stops, and the process is done, my labels (success or error) and order database tables do not fire. Why is this? I find this very odd because the application sends the orders, it functions 100%, but nothing changes on the user side.
Here is some code, if you need more then just say the word. Thank you all in advance!
protected void Page_Load(object sender, EventArgs e)
{
Initialize();
}
protected void Page_PreRender(object sender, EventArgs e)
{
}
protected void Button_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
Button btn = (Button)sender;
KaplanFTP.BatchFiles bf = new KaplanFTP.BatchFiles();
KaplanFTP.Transmit transmit = new KaplanFTP.Transmit();
if (btn.ID == PutFTPButton.ID)
{//code
private void Initialize()
{//code if success/notsuccess labels will fire
Also here is the design code if it helps
<body>
<form id="form1" runat="server">
<div class="mainPanel">
<div>
<h3>Number of Batches Created Today: <asp:Label runat="server" style="display:inline;" ID="BatchesCreatedLbl"></asp:Label></h3>
</div>
<div id="batchestoprocessdiv">
<asp:Label runat="server" ID="BatchesToProcessLbl" Text="THERE IS AN ORDER BATCH TO PROCESS." CssClass="green"></asp:Label>
</div>
<asp:Label runat="server" ID="NoBatchesToProcessLbl" Text="There are no Order Batches to Process." CssClass="red"
Visible="false"></asp:Label>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="PutFTPButton" runat="server" onclick="Button_Click"
Text="Submit Orders" />
</ContentTemplate>
</asp:UpdatePanel>
<span class="red">COUNTDOWN TO SUBMISSION!</span>
<span id="timespan" class="red">
</span>
<asp:Label runat="server" ID="ErrorLabel" Visible="false" CssClass="red" Text="Error: "></asp:Label>
<asp:UpdateProgress ID="UpdateProgress1" runat="server"
AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<img alt="" class="style1" src="images/ajax-loader.gif" />
<br />
<asp:Label ID="Label1" runat="server" CssClass="red" Height="16px"
Text="Sending Orders....Please Wait"></asp:Label>
</ProgressTemplate>
</asp:UpdateProgress>
<br />
<br />
<br />
<asp:Label runat="server" ID="SuccessLabel" Visible="false" CssClass="green" Text="Batch has been processed and uploaded successfully."></asp:Label>
</div>
<div id="OrdersInfoDiv" runat="server" visible="false">
<asp:GridView ID="BatchDetails" Caption="Details of orders ready to be sent" runat="server" AutoGenerateColumns="true"
CssClass="InfoTable" AlternatingRowStyle-CssClass="InfoTableAlternateRow" >
</asp:GridView>
</div>
<div id="OrdersSentDiv" class="mainPanel" runat="server" visible="false">
<h4>Sent Orders</h4>
</div>
</form>
<script src="js/SendOrders.js" type="text/javascript"></script>
</body>

Put all content those you want to refresh after download finished into UpdatePanel with UpdateMode="Always"

How do we display a progress bar in C# for a button click event in WebForm?

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)