提交表格后关闭模式窗口

Question

我已经搜索了所有在寻找类似的问题，但不幸的是没有人似乎很适合我。

我在做什么：我有一个链接上传文件的主页。当用户点击该链接它会打开一个模式窗口用一个简单的上传表单：

<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> 

在我想叫我_uploadDocument方法在控制器的形式提交。如果上传成功，则关闭模式窗口，以便再次出现父窗口。如果出现错误，请保持模态窗口出现并显示一些通知文本。

我对httppost（道歉，我试过几种方法，所以你会看到一些注释掉位）控制器：

[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); 
     } 

在我的模式窗口，在其上放置形式，我曾尝试以下的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; 
    }); 

我的结果 - 如果我序列然后通过成功的功能火灾数据，但该文件没有上传过（这样的模态窗口关闭，但没有文件被上传）。

如果我使用的代码如上然后将文档上传，但我带到一个空白屏幕后提交...

我当然明白任何指针！

UPDATE 下面的代码从父页面打开模态窗口：

// 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

无法上传通过AJAX的文件，而无需使用HTML 5，IFRAME黑客等，在我看来，那您最好的选择可以使用上传器，如uploadify或plupload。

Binding-httppostedfilebase-using-ajax-beginform是一个类似的问题，有一些很好的建议如何解决这个问题。

Answer 2

看起来你可能一直在正确的轨道上，但放弃了它。

您无法从void中正确地发出return语句。您是否考虑让您的uploadDocument方法为bool而不是void并返回成功状态？

这种方式，你可以这样做：

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