在ASP.NET中使用jQuery AjaxForm问题

Question

I am using the jQuery AjaxForm plugin to create an preview of an image I the user select to load 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).

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

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 :

 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;

    }

Can someone please write what is the cause for that behavior and how can I solve this problem

Thanks

Answer 1

When trying to do a response.redirect in response to an ajax call, your browser is not going to behave in the same way it would with a regular synchronous request. You can however, take the response and do something with it on the JS side. I believe this will help you.

Returning redirect as response to XHR request