HttpContext.Current.Responseを使用したエクスポートが問題を引き起こしています

Question

私はasp.net/C#/HTML5/bootstrapを使用してWebサイトを開発しています。要件の1つは、Excelおよび/またはPDFに文書をエクスポートすることです。私は（これはExcelの抜粋です）次のスニペットを使用して（成功した）をエクスポートすることができるよ：

 HttpContext.Current.Response.ContentType = "application/octet-stream"; 
     HttpContext.Current.Response.ContentEncoding = System.Text.Encoding.UTF8; 
     HttpContext.Current.Response.AddHeader("content-disposition", "attachment; filename=" + filename); 
     HttpContext.Current.Response.BinaryWrite(xlsBytes); 
     HttpContext.Current.Response.Flush(); 
     HttpContext.Current.Response.End(); 

私がいる問題は、これが実行された後、それは死んページのライフサイクルを停止しているようだということですそれはトラックです。

<script src="../Scripts/waitingFor.js"></script> 

<script type="text/javascript"> 
    function pleaseWait() { 
     waitingDialog.show("Building File<br/>...this could take a minute", { dialogSize: "sm", progressType: "warning" }); 

     form = document.getElementById("frm_contentMaster"); 
     form.submit(); 
    } 
</script> 

のJavaScriptファイルが含ま：私は「

/** 
* Module for displaying "Waiting for..." dialog using Bootstrap 
* 
* @author Eugene Maslovich <ehpc@em42.ru> 
*/ 

(function (root, factory) { 
    'use strict'; 

    if (typeof define === 'function' && define.amd) { 
     define(['jquery'], function ($) { 
      return (root.waitingDialog = factory($)); 
     }); 
    } 
    else { 
     root.waitingDialog = root.waitingDialog || factory(root.jQuery); 
    } 
}(this, function ($) { 

'use strict'; 

/** 
* Dialog DOM constructor 
*/ 
function constructDialog($dialog) { 
    // Deleting previous incarnation of the dialog 
    if ($dialog) { 
     $dialog.remove(); 
    } 
    return $(
     '<div id="waitingFor" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true" style="padding-top:15%; overflow-y:visible;">' + 
      '<div class="modal-dialog modal-m">' + 
       '<div class="modal-content">' + 
        '<div class="modal-header" style="display: none;"></div>' + 
        '<div class="modal-body">' + 
         '<div class="progress progress-striped active" style="margin-bottom:0;">' + 
          '<div class="progress-bar" style="width: 100%"></div>' + 
         '</div>' + 
        '</div>' + 
       '</div>' + 
      '</div>' + 
     '</div>' 
    ); 
} 

// Dialog object 
var $dialog; 

return { 
    /** 
    * Opens our dialog 
    * @param message Custom message 
    * @param options Custom options: 
    * options.headerText - if the option is set to boolean false, 
    *  it will hide the header and "message" will be set in a paragraph above the progress bar. 
    *  When headerText is a not-empty string, "message" becomes a content 
    *  above the progress bar and headerText string will be set as a text inside the H3; 
    * options.headerSize - this will generate a heading corresponding to the size number. Like <h1>, <h2>, <h3> etc; 
    * options.headerClass - extra class(es) for the header tag; 
    * options.dialogSize - bootstrap postfix for dialog size, e.g. "sm", "m"; 
    * options.progressType - bootstrap postfix for progress bar type, e.g. "success", "warning"; 
    * options.contentElement - determines the tag of the content element. 
    *  Defaults to "p", which will generate a <p> tag; 
    * options.contentClass - extra class(es) for the content tag. 
    */ 
    show: function (message, options) { 
     // Assigning defaults 
     if (typeof options === 'undefined') { 
      options = {}; 
     } 
     if (typeof message === 'undefined') { 
      message = 'Loading'; 
     } 
     var settings = $.extend({ 
      headerText: '', 
      headerSize: 3, 
      headerClass: '', 
      dialogSize: 'm', 
      progressType: '', 
      contentElement: 'p', 
      contentClass: 'content', 
      onHide: null // This callback runs after the dialog was hidden 
     }, options), 
     $headerTag, $contentTag; 

     $dialog = constructDialog($dialog); 

     // Configuring dialog 
     $dialog.find('.modal-dialog').attr('class', 'modal-dialog').addClass('modal-' + settings.dialogSize); 
     $dialog.find('.progress-bar').attr('class', 'progress-bar'); 
     if (settings.progressType) { 
      $dialog.find('.progress-bar').addClass('progress-bar-' + settings.progressType); 
     } 

     // Generate header tag 
     $headerTag = $('<h' + settings.headerSize + ' />'); 
     $headerTag.css({ 'margin': 0 }); 
     if (settings.headerClass) { 
      $headerTag.addClass(settings.headerClass); 
     } 

     // Generate content tag 
     $contentTag = $('<' + settings.contentElement + ' />'); 
     if (settings.contentClass) { 
      $contentTag.addClass(settings.contentClass); 
     } 

     if (settings.headerText === false) { 
      $contentTag.html(message); 
      $dialog.find('.modal-body').prepend($contentTag); 
     } 
     else if (settings.headerText) { 
      $headerTag.html(settings.headerText); 
      $dialog.find('.modal-header').html($headerTag).show(); 

      $contentTag.html(message); 
      $dialog.find('.modal-body').prepend($contentTag); 
     } 
     else { 
      $headerTag.html(message); 
      $dialog.find('.modal-header').html($headerTag).show(); 
     } 

     // Adding callbacks 
     if (typeof settings.onHide === 'function') { 
      $dialog.off('hidden.bs.modal').on('hidden.bs.modal', function() { 
       settings.onHide.call($dialog); 
      }); 
     } 
     // Opening dialog 
     $dialog.modal(); 
    }, 
    /** 
    * Closes dialog 
*/ 
    hide: function() { 
     if (typeof $dialog !== 'undefined') { 
      $dialog.modal('hide'); 
     } 
    } 
}; 
})); 

を例として、ユーザは、モーダルダイアログの「しばらくお待ちください」とフォームを送信するまでのスローJavaScriptを呼び出し、エクスポートボタンをクリックします背後にあるコードでExcelファイルを作成するために、NPOIを使用してメートル（単純化機能）：

using NPOI.SS.UserModel; 
using NPOI.XSSF.UserModel; 

protected void exportExcel() 
{ 
    XSSFWorkbook wb = new XSSFWorkbook(); 

    XSSFSheet sh = (XSSFSheet)wb.CreateSheet("Legend"); 

    //***************************************** 
    //* Workbook Download & Cleanup 
    //***************************************** 
    MemoryStream stream = new MemoryStream(); 
    wb.Write(stream); 
    stream.Dispose(); 

    var xlsBytes = stream.ToArray(); 
    string filename = "Behavior Stats YTD.xlsx"; 

    MemoryStream newStream = new MemoryStream(xlsBytes); 

    HttpContext.Current.Response.ContentType = "application/octet-stream"; 
    HttpContext.Current.Response.ContentEncoding = System.Text.Encoding.UTF8; 
    HttpContext.Current.Response.AddHeader("content-disposition", "attachment; filename=" + filename); 
    HttpContext.Current.Response.BinaryWrite(xlsBytes); 
    HttpContext.Current.Response.Flush(); 
    HttpContext.Current.Response.End(); 
} 

これは、Excelファイルを作成し、ユーザーにそれをプッシュしますが、背後にあるコードのライフサイクルは続きませんinue - 終了コマンドの直後に停止します。 HttpContext行をコメントアウトすると、明らかにExcelシートは作成されませんが、ページのライフサイクルが継続します。実行中のコードの残りの部分がリフレッシュされ、「待ってください」ダイアログが消えます。

これは間違っていますか？エクスポート方法について見たほとんどの例では、このメソッドを使用しています。私が輸出できるもう一つの方法は、よりクリーンで安全なものですか？私はこれにする必要がある単純な微調整だけで、ライフサイクルを続けることができますか？誰が液体石鹸を作ったのですか？なぜですか？

あなたが提供できるヘルプは、非常に高く評価されます。

Answer 1

正常に動作しています。応答がファイルであることをブラウザに伝えています。応答は一度に1つのことにしかなりません。ページコンテンツと同じ応答のファイルを持つことはできません。

IFrameでファイルをダウンロードすることで2つのファイルを分けることができます。最初に、ファイルをC＃コードを独自のページにダウンロードします。その後、そのページをJavaScript関数を使用してIFrameから呼び出します。

function DownloadExcel() { 
    var downloadFrame = document.createElement("IFRAME"); 

    if (downloadFrame != null) { 
     downloadFrame.setAttribute("src", '/DownloadExcel.aspx'); 
     downloadFrame.style.width = "0px"; 
     downloadFrame.style.height = "0px"; 
     document.body.appendChild(downloadFrame); 
    } 
}