Develop Reference

Easy wait script

I'm trying to implement in my web form an easy wait function, it works, but not as I would.
My code is this:
for(int i = 0; i<5; i++)
{
Label1.Text = "Invio: " +i;
System.Threading.Thread.Sleep(6000);
}
The problem is that Label Text doesnt' change every 6 seconds.
This script should use 30second and change the label text in this manner:
"Invio: i" every 6 seconds.
Instead it waits 6 seconds and then it change the text in "Invio 4".
Why?

The reason this happens is because of the view state . Before you render your page the back-end code is executed, after it finishes, the DOM start to render and then your page is ready. That means your page won't refresh the label value every N seconds, because it has been already set. If you want to change the value of this dynamically you should use some front-end method as JavaScript or jQuery. If you want this approach - comment so I can make a fiddle for you.
Also this would be helpful for you - ViewState
Here is a fiddle to check if you want something like this - Fiddle demo
var count = 1;
time = setInterval(function(){
document.getElementById("label1").innerHTML="Indio: " + count;
count+= 1;
if (count == 5)
{
clearInterval(time);
}
},6000);

Back end like this:
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Timer1_Tick(object sender, EventArgs e)
{
Label txt = Label1;
int i = Convert.ToInt32(txt.Text);
if (i == 4)
{
Timer1.Enabled = false;
}
else
{
i++;
Label1.Text = i.ToString();
}
}
}
and front-end is like this:
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" OnTick="Timer1_Tick" Enabled="true" Interval="6000">
</asp:Timer>
<asp:Label ID="Label2" runat="server" Text="Invio: "></asp:Label>
<asp:Label ID="Label1" runat="server" Text="0"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" />
</Triggers>
</asp:UpdatePanel>
</asp:Content>
This will loop 5 times with a 6 second interval.
Timer on page will trigger a postback, server side will execute and will update an updatepanel.

Unfortunately there is no easy way of doing that kind of thing purely using basic Asp.Net webforms (unless you use Asp.Net Webforms AJAX - which I personally find very confusing).
Assuming you are trying to provide some feed back to your user, about a long running operation, I'd use a combination of javascript (using JQuery Ajax for example) and a simple page to poll if the task is done, then redirect to result page.

System.Web.UI.Timer Refreshes Page when Enabled

During the page_load, I disable the timer. When I pressed Button1, I enable the timer, but the page refreshes. Therefore, it never reaches the timer_tick1. I need to show a popup after a certain amount of time a button is clicked. How do I prevent the refresh from happening?
Alerts Class
public static class Alert
{
public static void Show(string message, Page page)
{
// replaces the quotations to follow the script syntax
// quotations are interpretated as \\' in script code
string cleanMessage = message.Replace("'", "\\'");
string script = "<script type=\"text/javascript\">alert('" + cleanMessage + "');</script>";
// Gets the executing web page
Page tempPage = page;
// Checks if the handler is a Page and that the script isn't already on the page
if (tempPage != null & !tempPage.ClientScript.IsClientScriptBlockRegistered("alert"))
{
tempPage.ClientScript.RegisterClientScriptBlock(typeof(Alert), "alert", script); // this isn't working, but it works on a button click event.
}
}
}
Page Class
public partial class Test1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostback) {
Timer1.Enabled = false;
Label2.Text = "Panel refreshed at: " +
DateTime.Now.ToLongTimeString(); // Checks if page reloads
}
}
protected void Timer1_Tick(object sender, EventArgs e)
{ // i added a breakpoint here. It doesn't even pass through.
Alert.Show("hehehehe", this); //PopUp Shows up.
Timer1.Enabled = false; //Cancels Timer
Label1.Text = "Panel refreshed at: " +
DateTime.Now.ToLongTimeString(); // Checks if update panel reloads
}
protected void Button1_Click1(object sender, EventArgs e)
{
Timer1.Enabled = true; //Starts Timer. It seems to refresh the page.
}
}
script
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Test1.aspx.cs" Inherits="Test1" %>
<%# Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
function delayer() {
setTimeout (function () {ShowPopUp()}, 15000);
}
delayer();
</script>
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" OnTick="Timer1_Tick" Interval="1000" Enabled="true">
</asp:Timer>
<asp:Label ID="Label1" runat="server" Text="PanelNotRefreshedYet"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="ShowPopUp();" />
</form>
</body>
</html>

I think you're confused. Timer1 is a server side control. So it will fire on the server side, if you're still processing the page, that is, and will have no effect on the client side. By the time it fires in your code, the page has likely already rendered so you'll see no effect from that Timer1 object's Timer1_Tick event. Since the page has completed rendering, you can't inject new JavaScript, modify the page, or anything like that. Remember that web development is a disconnected thing. You send a request, you get a response. There are no events by nature of the web. There are libraries out there for triggering events and such but I think that's way beyond what you're trying to achieve.
For client side "timer" you need to use JavaScript setTimeout method, which you have verified as working and is the proper way for you to achieve the delay you're looking to implement.
setTimeout (function () {ShowPopUp()}, 15000);
If you still want to do it in your Alert class, then get rid of Timer1 and have your Alert class inject the timeout in JavaScript:
protected void Button1_Click1(object sender, EventArgs e)
{
Alert.Show("He heee", this);
}
And in Alert, change your script to:
string script = "<script type=\"text/javascript\">setTimeout(function() {alert('" + cleanMessage + "');}, 15000);</script>";

Your button is doing a postback, so yes the page will be refreshed and your Page_Load function will run again. You should test for this using the IsPostback property.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostback) {
Timer1.Enabled = false;
Label2.Text = "Panel refreshed at: " +
DateTime.Now.ToLongTimeString(); // Checks if page reloads
}
}
You might want to look at showing the alert using JavaScript on the page rather than running it server side tho.

<script type="text/javascript">
function showPopup()
{
alert("Hey, click something already");
}
function delayer() {
setTimeout (showPopUp, 15000);
}
delayer();
</script>
Just put your message like this. Probably easier if your logic is simple.

AsyncFileUpload postback causes double upload

I implemented the AsyncFileUpload control on a web page. This web page requires uploaded files to appear in a GridView.
The GridView contains the following columns: "File Name", "Confidential" Check Box, and a "Remove" button to remove the uploaded file.
Since the AsyncFileUpload postback does not do a full page postback, I need to "force" a postback on the OnClientUploadComplete event of the AsyncFileUpload control in order to render the gridview after uploading a file.
In the OnClientUploadCompleteEvent, I use javascript to call __doPostBack. In this postback, I only bind my GridView and display the file information (I don’t re-save the file).
The problem: On the AsyncFileUpload’s first “partial” postback, the file is successfully uploaded, as expected. On the second postback that I force with __doPostBack, the file is re-uploaded.
You can verify this by using Google Chrome, which displays the upload progress. The behaviour is as follows:
- After selecting the file, the progress increments from 0% to 100% and the file is uploaded.
- After this, the __doPostBack executes, and you can see the upload progress increment again from 0% to 100%.
How can I make sure the Gridview is properly populated, but that the file is not uploaded twice?
I attached a sample solution which contains the issue: https://www.yousendit.com/download/MzZFc2ZBNDRrYUN4dnc9PQ

There is a simpler solution
##t0x1n3Himself the solution u gave is very simple but does not work
surround the AsyncFileUpload with an update panel name it UpdatePanelAFU
then in the UpdatePanelAFU do as the following :
protected void AsyncFileUpload_UpdatePanelAFU(object sender,AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
if (Request.Params.Get("__EVENTTARGET") != "UpdatePanelAFU")
return;
..... rest of the code
}
enjoy!

Maybe ugly, but works:
1)
Add a css-hidden asp:Button bellow the asp:AsyncFileUpload AsyncFileUpload1 control.
<asp:Button runat="server" ID="btnClick" Text="Update grid" style="display:none"/>
2)
On the Page_Load method, remove the if (Request.Params.Get("__EVENTTARGET") == "UploadPostback") and put its block in a simple else to the previous if.
3)
On the AsyncFileUpload1_UploadedComplete function, also remove the if (Request.Params.Get("__EVENTTARGET") != "UploadPostback") line, but leave intact everything that was inside it.
4)
Back to the aspx. Put a asp:UpdatePanel outside the grid GridView1.
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnClick" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:GridView ID="GridView1" ...
YOUR GRID CODE REMAINS THE SAME
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
5)
The last step is to change the AjaxUploadComplete client-side javascript function to make it trigger the postback.
Replace it with the following:
function AjaxUploadComplete() {
var btnClick = document.getElementById("btnClick");
btnClick.click();
}
Any file the user selects is uploaded only once.
All changes here are meant to be made in AjaxUpload.aspx & AjaxUpload.aspx.cs of your AjaxUpload.zip.

I believe #Veera had it right. UploadComplete was being called multiple times as the file was uploading. The following worked for me.
void AsyncFileUpload1_UploadedComplete(object sender, AsyncFileUploadEventArgs e) {
if (AsyncFileUpload1.IsUploading) return;
// rest of your upload code
}

I don't have access to your sample solution which contains the issue but i encounter a double postback too in my project with the AsyncFileUpload component.
I found a very simple workaround :
Just add:
private bool justUploaded = false;
Then:
void AsyncFileUpload1_UploadedComplete(object sender, AsyncFileUploadEventArgs e)
{
if (justUploaded) return;
justUploaded = true;
// rest of your upload code
}

I find this a more elegant solution, found here: http://forums.asp.net/t/1951566.aspx?AsyncFileUpload+uploads+twice) but below is my altered fully working code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>AsyncFileUpload Example</title>
<script type = "text/javascript">
function uploadComplete(sender) {
$get("<%=lblMesg.ClientID%>").innerHTML = "File Uploaded Successfully";
clearContents();
}
function uploadError(sender) {
$get("<%=lblMesg.ClientID%>").innerHTML = "File upload failed.";
clearContents();
}
function clearContents() {
var span = $get("<%=AsyncFileUpload1.ClientID%>");
var txts = span.getElementsByTagName("input");
for (var i = 0; i < txts.length; i++) {
if (txts[i].type == "text") {
txts[i].value = "";
}
if (txts[i].type == "file") {
txts[i].value = "";
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:AsyncFileUpload OnClientUploadError="uploadError"
OnClientUploadComplete="uploadComplete" runat="server"
ID="AsyncFileUpload1" Width="400px" UploaderStyle="Modern" EnableViewState = "false"
UploadingBackColor="#CCFFFF" ThrobberID="imgLoader" OnUploadedComplete = "FileUploadComplete"
/>
<asp:Image ID="imgLoader" runat="server" ImageUrl = "~/images/loader.gif" />
<br />
<asp:Label ID="lblMesg" runat="server" Text=""></asp:Label>
</form>
</body>
</html>

AsyncFileUpload has a property that named IsUploading.
when this property is set to false, a postback will happen.
you can check this property like this:
if(AsyncFileUpload1.IsUploading)
{
..... upload codes
}

UpdatePanel Breaks JQuery Script

This is a simplified version of what I want to do. Basically I have a datalist with a bunch of stuff in it and when you mouseover items in the datalist I want jquery to hide/show stuff. The problem is that after I databind my gridview/repeater/datalist jquery quits working if the gridview/repeater/datalist is in an update panel.
After you click the button in the sample below, the jquery that makes the span show up when you mouse over quits working.
Any ideas of why this is happening, how to fix it or a better way to do this?
<script type="text/javascript">
$(document).ready(function() {
$('.comment-div').mouseenter(function() {
jQuery("span[class=mouse-hide]", this).fadeIn(50);
});
$('.comment-div').mouseleave(function() {
jQuery("span[class=mouse-hide]", this).fadeOut(50);
});
});
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="comment-div">
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
<span class="mouse-hide" style="display: none;">sdfgsdfgsdfgsdfg</span>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
And the code-behind:
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
BindStuff();
}
}
public void BindStuff()
{
TestDB db = new TestDB();
var x = from p in db.TestFiles
select new { p.filename};
x = x.Take(20);
GridView1.DataSource = x;
GridView1.DataBind();
}
protected void Button1_Click(object sender, EventArgs e)
{
BindStuff();
}

The reason this is happening is because the controls get recreated on a partial postback. Use the 'live' feature of jQuery so rewrite your code like:
$(document).ready(function() {
$('.comment-div').live('mouseenter',function() {
jQuery("span[class=mouse-hide]", this).fadeIn(50);
});
$('.comment-div').live('mouseleave', function() {
jQuery("span[class=mouse-hide]", this).fadeOut(50);
});
});

When the UpdatePanel refreshes, it completely replaces all of the DOM elements that you had previously attached event handlers to. The easiest fix is to initialize your event handlers in pageLoad() instead of $(document).ready(). Its code will be executed both on the initial page load, but also after every UpdatePanel refresh.
The better solution is to change your code to use live() or delegate(), so that the event handlers aren't impacted by periodic changes in the page's contents.

When you do a AJAX postback using an update panel the DOM within it's removed and re-created when the AJAX response arrive.
The handlers you attached are lost unless you use the live method or the livequery library

See below for different jQuery versions:
$( selector ).live( events, data, handler ); // jQuery 1.3+
$( document ).delegate( selector, events, data, handler ); // jQuery 1.4.3+
$( document ).on( events, selector, data, handler ); // jQuery 1.7+

asp.net page "page is loading"

How can I display the circular swirl image, that is usually seen in asp.net pages, while a page is loading (retrieving data etc)?

If you're using UpdateProgress/UpdatePanel, here are some samples: http://www.asp.net/Ajax/Documentation/Live/overview/UpdateProgressOverview.aspx
Here is a loading gif sample using UpdateProgress:
<asp:UpdateProgress ID="updProg" AssociatedUpdatePanelID="updPnl" DisplayAfter="0" runat="server">
<ProgressTemplate>
<div id="progInd">
<img id="indic" src="/images/loadgifs/z.gif" alt="..." />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:ScriptManager ID="sm" runat="server" />
<asp:UpdatePanel ID="updPnl" runat="server">
<ContentTemplate>
...
<asp:Timer ID="tmrTrigPostbk" runat="server" Interval="10" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="tmrTrigPostbk" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
protected void Page_Load(object sender, EventArgs e)
{
tmrTrigPostbk.Enabled = !IsPostBack;
}

Are you using UpdatePanel? or Are you using Javascript libraries like Jquery? If former then you can add the swirl to UpdateProgress if the latter (JQuery) then you can trigger the image on .ajaxStart() method.
HTH

I use the jQuery BlockUI plugin to make this pretty easy to do, even inside an area on the page, say a dialog box.
http://malsup.com/jquery/block/
here is an example making an AJAX call to the server:
function GetNewContactInfo(contactId) {
if (0 === contactId) {
showErrorMsg('You must select a Contact to Retrieve');
return;
}
var request = {
ContactId: 0
};
wjBlockUI();
request.ContactId = contactId;
ContactServiceProxy.invoke({ serviceMethod: "GetContact",
data: { request: request },
callback: function(response) {
DisplayNewContactInfo(response);
},
error: function(xhr, errorMsg, thrown) {
postErrorAndUnBlockUI(xhr, errorMsg, thrown);
}
});
}
Inside the DisplayNeewContactInfo function I call $.unblockUI(); to take the message away. I have the actual invoking of the BlockUI call in a wrapper function:
function wjBlockUI(msg) {
var defaultMsg = '<img src="../images/activity.gif" />';
if (null !== msg) {
defaultMsg = msg
}
$.blockUI({ overlayCSS: { backgroundColor: '#aaa' }, message: defaultMsg });
}
You can download the entire project these examples came from, http://professionalaspnet.com/WCFJQuery.zip