提交表格後關閉模式窗口

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