Response.TransmitFile() not working in a jquery.ajax() posted page RSS

• • Reply
  

  lukaba85

  Member

  4 Points

  9 Posts

  Response.TransmitFile() not working in a jquery.ajax() posted page

  Jan 20, 2013 11:30 AM|LINK

  Hi Guys,

  sorry if this has been asked other times.

  I have a razor page where I have a Button that using jquery ajax post method sends data to the server side code.

  The code processes some data, create a file and sends it to the client using Response.TransmitFile().

  Sadly this won't work inside this page but it does work if the same page is not posted using jquery but requested directly with an html anchor.

  Here is a sample code:

  @{
      WebSecurity.RequireAuthenticatedUser();
      Layout = "Some Layout.cshtml";
      Page.Title = "This is Download.cshtml";
     
      
      if(IsPost)
      {
          string fileName = Functions.CreateAFileAndGiveMeItsNameOnServer();
          HttpContext.Current.Response.Clear();
          HttpContext.Current.Response.ContentType = "Application/text";
          HttpContext.Current.Response.AddHeader("Content-Disposition", "attachment; filename=" + fileName);
          string completeName = Server.MapPath("~/Uploads/") + fileName;
          HttpContext.Current.Response.TransmitFile(completeName);
  
          HttpContext.Current.Response.Flush();
      }
      
  }
  
    <script type="text/javascript">
        $(function () {
            $('.btn-start-job').click(function () {
               
                $.post('Download.cshtml'); //this is the same page we are in
            });
        });
  
    </script>
  
  <button class="btn-start-job">Create</button>

  Any help is really appreciated and I thank you in advance.

  • Edited by XIII on Jan 20, 2013 11:32 AM
• • Reply
  

  Rion William...

  All-Star

  26980 Points

  4465 Posts

  Re: Response.TransmitFile() not working in a jquery.ajax() posted page

  Jan 20, 2013 01:14 PM|LINK

  Try using Response.WriteFile() as opposed to using Response.TransmitFile() :

  string fileName = Functions.CreateAFileAndGiveMeItsNameOnServer();
  HttpContext.Current.Response.Clear();
  HttpContext.Current.Response.ContentType = "Application/text";
  HttpContext.Current.Response.AddHeader("Content-Disposition", "attachment; filename=" + fileName);
  string completeName = Server.MapPath("~/Uploads/") + fileName;
  HttpContext.Current.Response.WriteFile(completeName);
  
  HttpContext.Current.Response.Flush();

   

  Blog | Twitter | Stack Overflow | LinkedIn
• • Reply
  

  Mikesdotnett...

  All-Star

  154852 Points

  19855 Posts

  Moderator

  MVP

  Re: Response.TransmitFile() not working in a jquery.ajax() posted page

  Jan 20, 2013 03:26 PM|LINK

  I don't understand why you are posting to the cshtml file that generates the download. You don't appear to be posting any values. Also, the title and layout are not necessary. Or are you using the same file to display HTML and generate files? I'd recommend against that. The HTML from the layout file could interfere with the download content. The Download.cshtml file should be separate, and only concerned with obtaining and delivering a file.

  If I were you, I'd use the hidden iframe technique for delivering downloads via an AJAX call:

  $('.btn-start-job').click(function () {
      $('<iframe src="/Download"></iframe>').appendTo('body').hide();
  });

  
  
  

  Regards, Mike
  Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter
• • Reply
  

  lukaba85

  Member

  4 Points

  9 Posts

  Re: Response.TransmitFile() not working in a jquery.ajax() posted page

  Jan 20, 2013 03:27 PM|LINK

  Thanks for your answer Rion but it doesn't work either.

  I think the issue has something to do with the fact that I'm using AJAX to POST the page infact my code works well if I post it normally (using a standard html form submit) rather than doing that with jquery AJAX.

  I found others on the web having the same issue but I didn't find any solution yet.

  Any other ideas?

  Thanks again

• • Reply
  

  lukaba85

  Member

  4 Points

  9 Posts

  Re: Response.TransmitFile() not working in a jquery.ajax() posted page

  Jan 20, 2013 04:20 PM|LINK

  Ciao Mike!!

  Sorry about this but the code I posted here is just a sample.

  The real code contains HTML that through jquery allows the user to manipulate the page content.

  The user manipulated content (the user can create new <il> elements into a <ul> with data into them) is the serialized into JSON by using $.parseJSON and posted to the same cshtml page that processes this JSON data, creates a file as a result of the processing and then sends the file to the client for download. If you have any suggestion about how to do that other than using jquery you are welcome! 

  I've tried your solution with a test file and It works well but in that case the filename is hardcoded in the Download page server code.

  The question is: what's the best way to allow jquery to wait for my server code to finish creating the file and then call the appendTo function with iFrame?

  I guess the <iframe> uses HTTP GET for loading the download page so I will need to add the filename to the query string of the iframe, right?

  Thanks a lot for your answer. I'm a complete newbie to web development and I decide to learn asp.net and webpages and I'm doing this by reading your book and trying to develop a web application on my own.

  For what may interest to you, I'd like to tell you that it is a great great job so thanks a lot for that as well.

  Best regards from Italy!

  Luca

• • Reply
  

  Mikesdotnett...

  All-Star

  154852 Points

  19855 Posts

  Moderator

  MVP

  Re: Response.TransmitFile() not working in a jquery.ajax() posted page

  Jan 20, 2013 06:19 PM|LINK

  lukaba85

  but in that case the filename is hardcoded in the Download page server code.

  You don't have to hardcode the filename. You can use a variable and call it whatever you like.

  lukaba85

  The question is: what's the best way to allow jquery to wait for my server code to finish creating the file and then call the appendTo function with iFrame?

  You don't need to worry about that,. As soon as the iframe is created, a request to whatever URL is set as the src value is made, and it is that request that causes the code in Download.cshtml to execute.

  lukaba85

  I guess the <iframe> uses HTTP GET for loading the download page so I will need to add the filename to the query string of the iframe, right?

  Yes - you can do that. 

  I'm gald the book is useful to you.

  Regards, Mike
  Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter
• • Reply
  

  lukaba85

  Member

  4 Points

  9 Posts

  Re: Response.TransmitFile() not working in a jquery.ajax() posted page

  Jan 20, 2013 08:50 PM|LINK

  I'm doing something wrong because I'm still in troubles.

  This is what I did to try your solution:

  I moved all the server processing on a page called DownService.cshtml which has no html in it, only razor.

  In the previous page (which has html and jquery), this is the button click event

  $('.btn-start-job').click(function () {
              var requestData = '{' + somedata + ',"FileName' + '":"' + $('#file-name').val() + '"}';
              $.post('/DownService.cshtml', $.parseJSON(requestData));
              $('<iframe src="/DownService"></iframe>').appendTo('body').hide();
           
  });

  I need to post data to the page so I need to call $.post().

  I still don't understand why posting paging using ajax doesn't make the Response.TransmitFile() work.

  Can you explain me why?

  At the end of the day this code is not working properly because two instances of the DownService page, one for POST and one for GET are running at the same time. In the  I'm missing something.

  Thanks again for your help

• • Reply
  

  Mikesdotnett...

  All-Star

  154852 Points

  19855 Posts

  Moderator

  MVP

  Re: Response.TransmitFile() not working in a jquery.ajax() posted page

  Jan 20, 2013 09:13 PM|LINK

  Don't post. There is no need. Pass values in the querystring:

  $('.btn-start-job').click(function () {
      $('<iframe src="/Download?FileName=' + $('#file-name').val() + '"></iframe>').appendTo('body').hide();

  });

  You obviously need to add whatever "requestData holds aswell.
  
  

  Regards, Mike
  Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter
  • Marked as answer by lukaba85 on Jan 21, 2013 10:10 AM
• • Reply
  

  lukaba85

  Member

  4 Points

  9 Posts

  Re: Response.TransmitFile() not working in a jquery.ajax() posted page

  Jan 21, 2013 09:57 AM|LINK

  Ok Mike!

  It is a very simple and good solution and I thank you very much again.

  Sincerely

  L.

  • Edited by lukaba85 on Jan 21, 2013 10:09 AM
  • Edited by lukaba85 on Jan 21, 2013 10:10 AM
• • Reply
  

  lukaba85

  Member

  4 Points

  9 Posts

  Re: Response.TransmitFile() not working in a jquery.ajax() posted page

  Jan 21, 2013 10:09 AM|LINK

  Ok Mike!

  It is a very simple and good solution and I thank you very much again.

  Sincerely

  L.