提交表格后关闭模式窗口

Question

I've searched all over looking at similar questions but unfortunately none seem to quite work for me.

What I'm doing: I have a main page with a link to upload a document. When that link is clicked it opens a modal window with a simple upload form:

<div id="uploadResults">
@using (Html.BeginForm("_uploadDocument", "Request", FormMethod.Post, new { id = "uploadDoc", enctype = "multipart/form-data" }))
 {
    <input name="eGuid" value="@ViewBag.eGuid" id="eGuid" type="hidden" />
    <input name="result" id="result" value="@ViewBag.result" type="hidden" />
    <label for="attachment">Attachment:</label><input type="file" name="attachment" id="attachment" />
    <br />
    <input type="submit" name="submit" value="Upload" class="txtButton" />
 }
</div>

On submit of the form I'd like to call my _uploadDocument method in the controller. If the upload succeeds then close the modal window so the parent window is again present. If there is an error then keep the modal window present and display some notification text.

My controller for the httppost (apologies, I've tried several methods and so you'll see a few commented out bits):

[HttpPost]
        public void _uploadDocument(string eGuid, HttpPostedFileBase attachment)
        {
            // store result txt
            string result = "";

            // check for uploaded file
            if (attachment != null && attachment.ContentLength > 0)
            {
                // get filename
                var uploadedFileName = Path.GetFileName(attachment.FileName);
                var newFileName = eGuid + "_" + uploadedFileName;

                // store to the shared directory
                var path = System.Web.Configuration.WebConfigurationManager.AppSettings["UploadDirectory"];
                var savePath = Path.Combine(path, newFileName);
                try
                {
                    attachment.SaveAs(savePath);
                    result = "success";
                }
                catch
                {
                    result = "There was an issue uploading your file";
                }
            }
            else
            {
                result = "No file was chosen for upload";
            }

            ViewBag.result = result;
            ViewBag.eGuid = eGuid;
            //return PartialView("_uploadDocument");
            //return Json(new { result = result});
            //return Json(result);
        }

Within my modal window, where the form above is, I have tried the following jquery:

$("#uploadDoc").submit(function (e) {
        $.post(this.action, { eGuid: $('#eGuid').val(), attachment: $('#attachment') }, function () {
            $("#dialog5").dialog('close');
            //alert("In");
            //return false;
        });
        //$.post(this.action, { eGuid: $('#eGuid').val(), attachment: $('#attachment') });
        return false;
    });

My results - if I serialize the data passed then the success function fires but the document isn't uploaded (so the modal window closes but no document is uploaded).

If I use the code as above then the document is uploaded but I'm taken to a blank white screen after submit...

I'd certainly appreciate any pointers!

UPDATE Here's the code opening the modal window from the parent page:

// person look-up modal window
    $(function () {
        $('#dialog5').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            title: 'Upload Document',
            dataType: "json",
            modal: true,
            open: function (event, ui) {
                var updateArea = $(this).data('area');
                //alert(updateArea);
                $(this).load('@Url.Action("_uploadDocument", "Request")' + '?eGuid=' + updateArea);
            },
            cancel: function (event, ui) {
                $(this).dialog("close");
            }
        });

        $('.attachDocument').live("click", function () {
            var field = this.name;
            $('#dialog5').data('area', field).dialog('open');
        });
    });

Answer 1

You cannot upload files via ajax without using html 5, iframe hacks, etc. It appears to me that your best bet would be to use an uploader such as uploadify or plupload .

Binding-httppostedfilebase-using-ajax-beginform is a similar question that has some good suggestions how to get around this.

Answer 2

It looks like you may have been on the right track, but abandoned it.

You can't issue a return statement properly from a void. Have you considered making your uploadDocument method a bool instead of void and returning the success state?

This way you could do something like:

$.post(this.action, { eGuid: $('#eGuid').val(), attachment: $('#attachment') }, function (data) {
  if(data == true) {
    $('#uploadResults').hide();
  }
});