Problem to Transfer or redirect to other form in a page that used AjaxForm
Hi all,
I am using the jQuery AjaxForm plugin to create a preview of an an image the user select to upload to the server.
I use an Http Handler to create an temp image file that is used for the image preview. In response to client side 'onchange' event of the FileUpload control the image preview is created successfully.
I have a button that sends the whole form (UploadImageToServerStep1.aspx) to the server. In the server side Click event of that button I try to transfer the control to another page (UploadImageToServerStep1.aspx2),the control gets to the other page code behind file(The control gets to that page Page_Load event) but the page is not displayed - instead the referring page is displayed(UploadImageToServerStep1.aspx)again (the control do not go the page load event of that page).
(Before that I tried to use ASP.NET MultiView and one page and there was also a problem when I tried to transfer the control to a next view the next view was not rendered and instead the previous view was displayed )
The JS code in UploadImageToServerStep1.aspx is :
- < script type = "text/javascript" >
var preview = {
ImagePreview: function(imageId) {
var formId = '<%= Form.ClientID %>';
var fileUploadId = '<%= FileUpload1.UniqueID %>';
var action = $('#' + formId).attr('action');
var imageName = $("input[serverId = 'FileUpload1']").val();
$('#' + formId).attr('action', './HttpHandlers/ImagesHandler.ashx?action=imagePreview&f=' + fileUploadId + '&i=' + imageName);
$('#' + formId).ajaxForm(function() {
$('#' + imageId).attr('src', './HttpHandlers/ImagesHandler.ashx?action=imagePreview&f=' + fileUploadId + '&i=' + imageName);
$('#' + imageId).show();
$('#' + formId).attr('action', action);
});
$('#' + formId).submit();
}
}; < /script>/
In UploadImageToServerStep1.aspx.cs the relevant code lines in the event handlers :
- protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
FileUpload1.Attributes.Add("onchange", "preview.ImagePreview('htmlImgPreview');");
FileUpload1.Attributes.Add("serverId", "FileUpload1");
}
}
protected void btnNext_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
Response.Redirect("UploadImageToServerStep2.aspx");
//Server.Transfer("UploadImageToServerStep2.aspx");
}
}
In the HttpHandler the relevant block of code :
- case "imagePreview":
string f = context.Request.QueryString.Get("f");
string i = context.Request.QueryString.Get("i");
const string uploadImageTempPath = "~/Images/TempImages/";
if (!string.IsNullOrEmpty(context.Request.QueryString.Get("i")) && context.Request.Files[f] != null)
{
HttpPostedFile file = context.Request.Files[f];
SaveImage(context, file, uploadImageTempPath, i);
}
context.Response.ContentType = GetContentType(context.Session["fileName"].ToString());
if (context.Session["fileName"] == null || context.Request["i"] == null)
{
return;
}
byte[] byteArray1 =
System.IO.File.ReadAllBytes(
context.Request.MapPath(string.Format("{0}{1}", uploadImageTempPath, context.Session["fileName"])));
context.Response.BinaryWrite(byteArray1);
break;
}
}
What is the cause for that behavior ? and how can I solve this problem ?
Thanks