Closing a ModelPopup after sending a file

Question

I'm looking for a certain behaviour where a ModalPopup suggests a (business-rule driven) file name for a file to download.

If the user clicks OK, the file is downloaded, and the popup should close. Cancel just closes it. This is all driven by code behind:

protected void ExportPromptOkButton_Clicked(object sender, EventArgs e)
{
    string path = MapPath(ExportPromptPanelFileName.Text);
    WriteExport(path);
    ExportPromptModalPopupExtender.Hide();
    this.SendFile(path, "text/plain");
}

//...

public static void SendFile(this Page webPage, string filepath, string contenttype)
{
    webPage.Response.AddHeader("Content-disposition", "attachment; filename=" + Path.GetFileName(filepath));
    webPage.Response.ContentType = contenttype;
    webPage.Response.WriteFile(filepath);;
    webPage.Response.End();
}

The problem is that Response.End(); kills all action (well, as it should), so the modal window itself doesn't close.

What would be the right approach? I was thinking of using an iframe and calling its Response to send the file, but I'd like to confirm if this is appropriate or if there is something better.

ASPX declaration:

<ajaxToolkit:ModalPopupExtender 
    runat="server" 
    ID="ExportPromptModalPopupExtender" 
    BackgroundCssClass="modalBackground"
    TargetControlID="ExportButton" 
    PopupControlID="ExportPromptPanel" 
    PopupDragHandleControlID="ExportPromptPanelHeader"
    CancelControlID="ExportPromptCancelButton"
    Drag="true">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="ExportPromptPanel" runat="server" CssClass="popupConfirmation" style="display: none;">
    <div class="popupContainer" style="width:300px">
        <div class="popupHeader" id="ExportPromptPanelHeader">
            <div class="popupHeaderLeft">Export</div><div class="popupHeaderRight"></div>
        </div>
        <div class="popupBody">Export under the following name:<br />
        <asp:TextBox ID="ExportPromptPanelFileName" runat="server" MaxLength="60" Width="230px"></asp:TextBox></div><div class="popupButtons">
            <asp:Button ID="ExportPromptOkButton" runat="server" Text="Ok" OnClick="ExportPromptOkButton_Clicked" />
            <asp:Button ID="ExportPromptCancelButton" runat="server" Text="Cancel" />
        </div>
    </div>
</asp:Panel>

Answer 1

You can set OkControlID property of extender to hide popup on Ok button click and OnOkScript property for custom javascript function which will force postback from Ok button (modal popup extender prevents postback from Ok and Cancel controls).

<script type="text/javascript">
    function doExport() {
        __doPostBack("<%= ExportPromptOkButton.UniqueID %>", "");
    }
</script>


<ajaxToolkit:ModalPopupExtender
    runat="server"
    ID="ExportPromptModalPopupExtender"
    BackgroundCssClass="modalBackground"
    TargetControlID="ExportButton"
    PopupControlID="ExportPromptPanel"
    PopupDragHandleControlID="ExportPromptPanelHeader"
    CancelControlID="ExportPromptCancelButton"
    OkControlID="ExportPromptOkButton"
    OnOkScript="doExport"
    Drag="true">
</ajaxToolkit:ModalPopupExtender>

Answer 2

You need to make a seprate http handler to process the request In Modal Popup call the HTTP HANDLER as shown

in ModalPopup :

protected void Click(object sender, EventArgs e)
    {
        Response.Redirect("Handler1.ashx", true);
    }

in Handler1.ashx

public void ProcessRequest(HttpContext context)
    {
        context.Response.Clear();
        context.Response.ContentType = "application/vnd-ms.excel";
        context.Response.AddHeader("content-disposition", "attachment;Filename=test.xls");
        context.Response.WriteFile(filepath);
        context.Response.Flush();
        context.Response.End();
    }

Answer 3

Did you try with ModalPopupExtender.hide() !