asp.net ajax file upload causes full page refresh - c#

I'm trying to test something for a component I'm building. Here's what I'm trying to do.
Upload file to a server without posting back or refreshing the page.
I decided to use ajaxfileupload control.
The file uploads but after the SaveAs Method is called in the backend, the whole page is getting refreshed for some weird reason.
Here's the code .aspx Page:
`
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%= DateTime.Now %>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<ContentTemplate>
<ajaxToolkit:AjaxFileUpload runat="server"
ID="AjaxFileUpload1" OnUploadComplete="UploadComplete" />
</ContentTemplate>
</asp:UpdatePanel>
`
Here's the backend Code:
`
protected void UploadComplete(object sender, AjaxFileUploadEventArgs e)
{
AjaxFileUpload1.SaveAs(Server.MapPath("/" + e.FileName));
}
`
The DateTime.Now block is to keep track of refreshes/postbacks.

Related

How to take fileuploader value in button click function .button in update panel file uploader in outside of update panel

I have put asp button in update panel and asp file uploader in outside of update panel in server side button click function i am geting file uploader empty.give me any idea..my code is below
<asp:FileUpload runat="server" ID="DecFormUpload"/>
<asp:UpdatePanel runat="server" ID="UpdateDecForm" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="DecFormUploadClick" OnClick="DecFormUploadClick_Click" OnClientClick="return DecFormUploadClick_Save();" runat="server" Text="Upload" />
</ContentTemplate>
</asp:UpdatePanel>
c# code
protected void DecFormUploadClick_Click(object sender, EventArgs e)
{
if(DecFormUpload.HasFile)//my problem is getting false here
{
}
}
This issue is due to that FileUpload needs a full postback, add the following just after your :
<Triggers>
<asp:PostBackTrigger ControlID="DecFormUploadClick" />
</Triggers>
Hope it helps

Unable to upload photo asynchronously with FileUpload control using UpdatePanel

In my ASP.NET Web forms application, I am adding a feature to upload files but I don't want to do a full postback. So to make it asynchronous I thought of using UpdatePanel.
This UpdatePanel contains a FileUpload control and a button to upload the selected photo. When I was debuggin my code to detect if file is actually selected or not, I found FileUpload's HasFile property to be false.
It works when I remove UpdatePanel but I don't understand why.
To help you understand, here is the code:
ASPX markups:
<asp:UpdatePanel ID="UPProf" runat="server">
<ContentTemplate>
<asp:FileUpload ID="FUDP" runat="server" />
<asp:Button ID="BUDP" runat="server" OnClick="BUDP_Click" Text="Upload your photo" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="BUDP" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
Here's its CS code:
protected void BUDP_Click(object sender, EventArgs e)
{
try
{
if (FUDP.HasFile) // code doesn't pass this if condition
{
FUDP.SaveAs("D:/Pictures/" + count + ".jpeg"); //it doesn't work since there is no file here
}
else
{
//Set some message for user
}
}
catch (Exception ex)
{
//log the error
}
}
Upload requires full page request. This is a limitation of the XmlHttpRequest component used in all AJAX frameworks for asynchronous calls to the application.
Remove the UpdatePanel or make BUDP button to perform postbacks.
<asp:UpdatePanel ID="UPProf" runat="server">
<ContentTemplate>
<asp:FileUpload ID="FUDP" runat="server" />
<asp:Button ID="BUDP" runat="server" OnClick="BUDP_Click"
Text="Upload your photo" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="BUDP" />
</Triggers>
</asp:UpdatePanel>

Stopping auto page refresh

I use the below code to auto refresh the page every 60 seconds via the AJAX tools in VS2010. Works perfectly.
<asp:MultiView ID="MultiView1" runat="server">
<asp:View ID="View1" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ViewStateMode="Enabled" UpdateMode="Conditional">
<ContentTemplate>
ASP.NET/HTML Code
<p>
<asp:Button ID="Button2" runat="server" Text="Click here" OnClick="Button2_Click" /> to disable the pages automatic refresh.</p>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
<asp:Timer ID="Timer1" runat="server" Interval="60000">
</asp:Timer>
</asp:View>
<asp:View ID="View2" runat="server">
etc.
</asp:MultiView>
I want to include a button on the asp.net page to cancel the auto refresh.
I tried to include the below but when I clicked the button, it didn't work. The below is the Code Behind for an OnClick event for a Button. The asp.net code is in the above code.
protected void Button2_Click(object sender, EventArgs e)
{
Timer1.Interval = 0;
}
Where am I going wrong? Is this even a way to do this or do I need to go another route in order to allow the user to cancel the auto page refresh?
Thanks to PeterJ I have found the solution. I modified the code and since I clicked it the page has not refreshed. The issue was with my code behind for the button OnClick event. I had:
Timer1.Interval = 0;
When I should have had:
Timer1.Enabled = false;

issue in updating the page after file upload

I am having a strange issue associated with AsyncFileUpload control. after the upload, I am updating the page by calling__doPostBack function from ClientUploadComplete event handler. it works fine first time, but next time I try to upload the file, it refreshes the page first before uploading, then does the upload and refreshes the page again. not sure why refresh page is being called twice once before the upload and once after the upload. I have a simplified version of this code which has this bug. any clues please why it is happening?
Markup:
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:AsyncFileUpload ID="AsyncFileUpload1" runat="server" OnClientUploadComplete="AsyncFileUpload1_ClientUploadComplete"
OnUploadedComplete="AsyncFileUpload1_UploadedComplete" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Refresh Data" OnClick="Button1_Click" />
<asp:Label ID="Label1" runat="server" EnableViewState="false"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</form>
Javascript:
<script type="text/javascript">
function AsyncFileUpload1_ClientUploadComplete() {
var btnRefreshData = $get("<%=Button1.ClientID%>").name;
__doPostBack(btnRefreshData, "");
}
</script>
Code-Behind:
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Upload complete";
}
protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
System.Threading.Thread.Sleep(3000);
}
looks like no one can answer this question. I still haven't figured out why this happens, but I put a workaround by adding a flag in session when the upload is complete and check that flag before refreshing the data on the page. this way the data refresh won't happen before the upload. thanks.

asp.net timer to load page content

asp.net
c#
Our webpage currently contains a rather large web app which causes a lengthy delay when attemping to navigate to it. I'm currently implementing a WCF web service to utilize ajax but the delay is a concern to my employer so he wanted a quick and dirty fix in the mean time.
I would like to have the empty page load and then use a timer to load the content. This will cut down on perceived page load time but i'm unsure how to accomplish it.
Any help would be much appreciated
Shawn
Some code to get you started:
In the asp.net page:
<asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="1">
</asp:Timer>
<asp:UpdatePanel ID="updatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
.... your stuff here
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="100">
<ProgressTemplate>
Please wait...
</ProgressTemplate>
</asp:UpdateProgress>
In the code behind:
protected void Timer1_Tick(object sender, EventArgs e)
{
this.Timer1.Enabled = false;
StartLongRunningTask();
}
Instead of a timer, you could flush the Response with Response.Flush().

Categories