ASP.Net: asynchronous image upload displayed using handler - asp.net

I have a really specific question for which I don't think I will have an answer but... let's try!
I have an aspx web page that works perfectly with Firefox and Chrome but not on IE9 (don't feed the troll ^^).
My objective is to allow an asynchronous image upload using ASP AjaxControlToolkit (see http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/asyncfileupload/asyncfileupload.aspx for a demo). When the image asynchronous upload is finished, the UploadedComplete function is called and I put the image in a session variable :
if (fileSizeOk && fileTypeOk)
Session["image"] = this.AsyncFileUploadLogo.FileBytes;
In parallel I have a handler responsible for returning an image from the session variable :
byte[] buffer = (byte[])context.Session["image"];
context.Response.OutputStream.Write(buffer, 0, buffer.Length);
context.Response.OutputStream.Flush();
Then, in my aspx page, I have an asp:Image field in a UpdatePanel that asks to the handler to get the image every five second :
<asp:UpdatePanel ID="UpdatePanelLogo" runat="server">
<ContentTemplate>
<asp:Image ID="ImageFileUploaded" runat="server" ImageUrl="AsyncImageHandler.ashx" />
<asp:Timer ID="TimerFileUploaded" Interval="5000" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
When the user validates the form, I just have to get the variable from the session and I save the image in database with the other values.
Here is my problem: with Firefox and Chrome, the timer provokes the reloading of the image but with IE (even IE9) the image is only displayed after hitting F5. When I put a breakpoint in the handler I can see that it's never called with IE (maybe a caching mechanism?).
Do you have an idea of ​​how to solve this problem?
Thanks for your answers!

Found the solution using a classic Web dirty trick:
this.ImageFileUploaded.ImageUrl = "AsyncImageHandler.ashx?p=" + Environment.TickCount.ToString();
I added that line in the PageLoad(), this last is called on each post back triggered by the timer :)

Related

Disable page refresh after button click ASP.NET

I have an asp button that looks like this:
Default.aspx
<asp:button id="button1" runat="server" Text="clickme" onclick="function" />
Default.aspx.cs
protected void function(object sender EventArgs e)
{
// Do some calculation
}
However, whenever I press the button, the entire page gets refreshed. I have looked on this site and found many solutions, but none of them really works for my project. Here are some of the suggested solutions:
set onclick="return false;" // but then how do I run the function in the code-behind?
use !IsPostBack in Page_Load // but the page still refreshes completely. I don't want Page_Load to be called at all.
Disable AutoEventWireup. // making this true or false doesn't make a difference.
Does anyone have a solution to this, or is it really impossible?
I would place the control inside of an Update panel.
To do so, you would also need a script manager above it, so something like this:
<asp:ScriptManager runat="server" ID="sm">
</asp:ScriptManager>
<asp:updatepanel runat="server">
<ContentTemplate>
<asp:button id="button1" runat="server" Text="clickme" onclick="function" />
</ContentTemplate>
</asp:updatepanel>
if a control inside the update panel does a postback, it will only reload the part of the page inside of the upate panel.Here is a link you may find useful from the MSDN site.
I think there is a fundamental misunderstanding here of how ASP.Net works.
When a user first requests your page, an instance of your Page class is created. The ASP.Net framework runs through the page lifecycle with this page instance in order to generate html. The html response is then sent to the user's browser. When the browser receives the response it renders the page for the user. Here's the key: by the time rendering is complete, your page class instance was probably already collected by the .Net garbage collector. It's gone, never to be seen again.
From here on out, everything your page does that needs to run on the server, including your method, is the result of an entirely new http request from the browser. The user clicks the button, a new http request is posted to the web server, the entire page lifecycle runs again, from beginning to end, with a brand new instance of the page class, and an entirely new response is sent to the browser to be re-rendered from scratch. That's how ASP.Net (and pretty much any other web-based technology) works at its core.
Fortunately, there are some things you can do to get around this. One option is to put most of your current Page_Load code into an if (!IsPostBack) { } block. Another option is to set up your method with the [WebMethod] attribute and make an ajax request to the method from the button. Other options include calling web services from custom javascript and ASP.Net UpdatePanel controls.
What works best will depend on what other things are on the page that user might have changed.
That is normal behavior for asp.net, you are actually causing a postback of the the page in order for the associated event to be called on the server.
I would suggest working with update panels but if you just need something to happen on the backend without it causing any major change on the web page, I would use jquery and a web service. The main reason for me is that update panels create huge viewstate objects.
Have a look here for asp.net ajax : http://www.asp.net/ajax
And here for an example of jquery and wcf : http://www.codeproject.com/Articles/132809/Calling-WCF-Services-using-jQuery
I have a similar problem. this answer helps me a lot. in your asp button.<asp:button id="button1" runat="server" Text="clickme" OnClientClick="return SomeMethod();" /> and in the SomeMethod which is a js method do your logic like manipulating your page then return false as the mentioned answer suggest.

asp.net page postbacks when mouse is moved over embedded youtube flash video

I am developing a site in which youtube video’s will be added to asp.net page using the HTML code given at youtube.com site. When I run the program, in the web page youtube video is displayed. But the strange thing is when I move mouse over the video display area the page postbacks happens. I am able to find this when I run the program in debug mode.
To exactly reproduce the scenario, I am writing the steps which I have done in my project.
1) In visula studio 2010 > Open asp.net web application project (with c# as language)
2) add some page, say cat.aspx
3) in cat.aspx write the code as below
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="lblVideo" runat="server"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
4) in cat.aspx.cs, in page_load even write the following line
lblVideo.Text = "<iframe width=\"620\" height=\"349\" src=\"http://www.youtube.com/embed/WoTsE7pbuKg\" frameborder=\"0\" allowfullscreen></iframe>";
5)you can replace the above given by youtube.com, but be sure to set "http:" and escape " with \" as how I have done.(to get HTML code for any youtube video, visit www.youtube.com, click on any video or a famous song, below the video a menu "share" will be displayed, click on it, then another option "Embed" will be displayed, click on it, you will be presented with code)
6)Now run your web app project, you can see, youtube video is displayed.
7)Now run with break point set in Page_load event, now move mouse over the video display area, you can see for each time the mouse enters the video display area, a postback happens.
8) I have latest flash installed in firefox and InternetExplorer, this problem happens only in firefox and IE, not in chrome. And this problem happens only when we use Updatepanel. I also found that page does not postback (IsPostBack) is false when every time the control hits the codebehind. It is like page is requested for the first time as how we type the url in the address bar and press enter
I tried using asp:PostBackTrigger and asp:AsyncPostBackTrigger
Both are not giving solution to the problem, because what happens is not postback, it is fresh page request
Many Thanks in advance to anybody who try to help or give solution.

UpdatePanel working only on Chrome and not in IE / Mozilla. Why?

On Clicking the LinkButton, I refresh the image in image control without refreshing the page. For this I have used the UpdatePanel and AsyncPostBackTrigger.
It is working perfectly in chrome. But not in IE and Mozilla. On both IE and Mozilla when I click the link button, nothing happens. Look very weird. Have any clue on this ?
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="txtCaptchaInput" BorderStyle="Solid" Style="vertical-align: top" runat="server" Width="106px" BorderWidth="1px"></asp:TextBox>
<asp:Image ID="img_captcha" runat="server" Height="32px" ImageUrl="~/captchaJPEG.aspx" Width="108px" />
<asp:LinkButton ID="captcha_refresh" runat="server">Refresh Image</asp:LinkButton>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="captcha_refresh" />
</Triggers>
</asp:UpdatePanel>
CaptchaJPEG.aspx : Page Load
Dim captcha As New Captcha.CaptchaImage()
captcha.width = 150
captcha.height = 40
captcha.text = Me.Session("CaptchaText").ToString()
captcha.GenerateImage()
captcha.image.Save(Me.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg)
Your issue have to do with the caching of the captchaJPEG.aspx that return an image. As image the browser can keep it and not change it.
To avoid that you have two ways, you can set some cache headers to say to the browser to not keep it on the cache as:
Response.Cache.SetExpires(DateTime.Now.AddDays(-10));
Response.Cache.SetMaxAge(new TimeSpan(-10, 0, 0));
Or -that I think is better- add a random number on the image tag as you set it on code behind, as:
img_captcha.ImageUrl = "~/captchaJPEG.aspx?_rnd=" + RandomNumber;
Here you can make something even better, to use the hash() of your code captcha, as:
img_captcha.ImageUrl = "~/captchaJPEG.aspx?_rnd=" + CaptachHiddenNumbers.hash();
Thats way you keep it on cache if the captcha is the same from load to load.
Now, the "correct way" is to use a handler and not a page for many reasons, like you do not want all the overhead of the page just to send an image. Now the handler come with the minimum modules call, to add session you need to use the IRequiresSessionState.
To answer to the question, why is acting different on the browsers, is because in some small details browser have different behavior, is depend how and what they check to make a decision to use the cached images and how aggressive are the browser with the cache.

How can I persist the changes of a text box when it loses focus?

I have several text boxes on a page. I want to save the text in the corresponding TextBox on LostFocus. It is to ensure the data is not lost when power failure or internet connectivity is lost. How can I accomplish something like this?
Another solution would be to use an UpdatePanel. You could then leverage server-side events rather than an event handler. You're markup might look something like this:
<asp:ScriptManager ID="ScriptManager" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<asp:TextBox ID="SomeTextBox" runat="server" TextChanged="SomeTextBox_TextChanged" AutoPostBack="true" />
</asp:UpdatePanel>
</asp:ScriptManager
and then in the TextChanged handler you could do your work.
Explanation: the TextChanged event will fire on the text box in which the text was actually changed when the post back occurs. The AutoPostBack property is necessary so that the page will in fact post back when the text box loses focus.
One final thing to remember, you will probably need to leverage this.IsPostBack on the page in the Load handler because every time a control is updated it's going to reconstruct the page. It's common that logic in the Load handler only needs to execute one time, but that would pose a problem if you didn't check to see if it was a post back because then it would execute every single time you left a text box.
Use jquery.
First on attach blur event handler, where you call ajax method to server passing new value of the textbox.
Handle this ajax event on serverside and write your data to the database or anywhere else.
Here is a piece of code that may help.
$('#textbox_id').blur(function() {
$.ajax({url:"handler_url.ashx?textbox_value=" + $('#textbox_id').val()});
});
Then create your ashx handler on server and handle your requests with ProcessRequest method. From there you will have access to Request.QueryString where new value of textbox will be stored.

Update Panels in Repeaters - Why can't multiple callback at the same time?

I have an update panel in a repeater
(Edit: I removed Runat and Id attributes to make the post look cleaner)
<asp:Repeater>
<ItemTemplate>
<asp:UpdatePanel UpdateMode="Conditional">
<ContentTemplate>
<asp:LinkButton onclick="btnCallback_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress DisplayAfter="0">
<ProgressTemplate>
<img src="spinningProgress.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
</ItemTemplate>
</asp:Repeater>
The idea is here that you click the LinkButton and it calls back and performs a server side action for that data item. This works perfectly fine for one item. However, if I click the button for every item without waiting for the previous update panel to finish the call back, it appears to cancel the previous callback.
Can UpdatePanels not perform call backs at the same time? Is there anyway I can make it so you don't need to wait before clicking on the next button?
Every AJAX request performed via UpdatePanel cancels any previous one (if previous is still running). This is how it is built. UpdatePanel AJAX request passes portions of ViewState along with request. It is impossible (at least very hard) to reconcile multiple arbitrary viewstates brought back by concurrent ajax calls. I heard that this was the primary reason MS chose to build it that way.
EDIT: use jQuery and have fun :-)
I had the same problem before. But i finded out that making some tricks can allow you to implement multiple ajax calbacks in different microsoft update panels.
function ProcessCallBack(uniqID)
{
var prm = Sys.WebForms.PageRequestManager.getInstance();
//checking if there is somewhere perforimg of callback
if (prm.get_isInAsyncPostBack())
{
setTimeout("ProcessCallBack()", 1000); //here we move execution of callback
//for 1 sec forward
}
else
{
__doPostBack(uniqID,'');
}
return false;
}
So you must add calling of that function to your button or control on client-side click. uniqID is the unique identifier of server control, you can get it on server side.
So enjoy, and remember that everything is possible, but for some is needed a lot of time todo :-)
I was thinking about that, why guys from microsoft didn't implement such thing :-)

Resources