未出現在POST上的MVC Jquery對話框

Question

我正在使用帶有Jquery對話框的MVC C＃。當我進行POST時，我被重定向到一個普通頁面，對話框爲 。

這裏是我的代碼如下所示：

內查看：

<div id="dialog" title="" style="overflow: hidden;"> 
    </div> 

在我的單擊事件我有以下幾點：

 $('#dialog').dialog({ 
        autoOpen: false, 
        width: 500, 
        resizable: true, 
        title: 'PVT Report', 
        modal: true,   
        buttons: { 
         "Close": function() { 
         $(this).dialog("close"); 
         } 
         } 
        }); 


     $('#dialog').dialog('open'); 

       $.ajax({ 
          url: url, 
          type: 'GET', 
          success: function(result) { 

          if (result.success) 
          { 
          $('#dialog').dialog('close'); 
          } 
          else 
          { 
           $('#dialog').html(result); 
          } 
         } 
        }); 
       } 

它轉到網址就好了顯示對話框。 當我做一個POST，它並不會返回到對話框，而是去到正規的頁面：

下面是我的GET和POST：

 public ActionResult FileUpload(int id) 
    { 
     var model = new FileUpload { PlNum = id}   
     return PartialView(model); 
    } 


    [HttpPost] 
    public ActionResult FileUpload(HttpPostedFileBase file, FileUpload model) 
    { 
     // Verify that the user selected a file 
     if (file != null && file.ContentLength > 0) 
     { 
      // extract only the fielname 
      var fileName = Path.GetFileName(file.FileName); 
      string extension = Path.GetExtension(file.FileName); 

      if (extension != ".pdf") 
      { 
       TempData["ErrMessage"] = "Error, wrong file type. File must be a PDF file."; 
       return RedirectToAction("FileUpload", new { id = model.PlNum }); 
      } 

.....

這是我的觀點：

@using (Html.BeginForm("FileUpload", "Plt", FormMethod.Post, new { enctype = "multipart/form-data" })) 
{ 
     @Html.HiddenFor(a => a.PlNum)  
     <p>File upload for Pl# @Model.PlNum</p> 
     <input type="file" name="file" /> 
     <input type="submit" value="OK" /> 
} 

我想用$就這樣做就可以了。我認爲我的一個問題是，當我做一個redirecttoAction時，對話框不再是 open ..

請注意，無論哪種方式，如果成功或者如果不成功，我喜歡返回到對話框。如果成功，將會有一條消息顯示「成功」。如果不成功，將會出現錯誤消息。

Answer 1

爲了確保我能正確理解您的問題，請允許我在回答之前先重申您的目標。如果我錯了，請糾正我。

1. 你想顯示包含一個jQuery UI的對話框裏面的表單一些局部視圖
2. 該表格包含一個文件上傳輸入這樣就可以讓用戶選擇，並從他的電腦
文件上傳到服務器
3. 您希望此上傳到如果上傳成功要感謝用戶對已經上傳的文件，並關閉了jQuery對話框
4. 如果有要顯示一個錯誤的請求期間的錯誤使用AJAX
5. 同步發生消息給用戶。例如，如果他沒有選擇任何文件，即使這個字段是必需的

如果我不理解你的一些目標，你可以停止閱讀我的答案並更新你的問題，以提供更多的信息你到底想要達到什麼目的？

這裏的挑戰在於上傳帶有AJAX請求的文件。正如你所知道的那樣，標準技術是不可能的。儘管有很多解決方法。你可以使用插件如Uploadify或FineUploader或使用新的HTML5 File API，它允許你實現這一點，並支持所有現代瀏覽器（不，IE9不是現代瀏覽器，對不起）。我將覆蓋拉特選項，因爲我們在2013年，我們都使用現代瀏覽器，沒有人給出關於IE的信息。

就像每個ASP一樣。我們可以通過設計將滿足我們的觀點和信息的需求視圖模型開始NET MVC應用程序，我們希望在上傳表單：

public class MyViewModel 
{ 
    public int Id { get; set; } 

    [Required] 
    public HttpPostedFileBase File { get; set; } 
} 

然後，我們可以有一個控制器將處理過程：

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     return View(); 
    } 

    public ActionResult Upload(int id) 
    { 
     var model = new MyViewModel 
     { 
      Id = id 
     }; 
     return PartialView(model); 
    } 

    [HttpPost] 
    public ActionResult Upload(MyViewModel model) 
    { 
     if (!ModelState.IsValid) 
     { 
      // There was a validation error, probably the user didn't select any file 
      // we set the status code to 400 (BadRequest) and return the 
      // same partial which will contain the validation error 
      Response.StatusCode = (int)System.Net.HttpStatusCode.BadRequest; 
      return PartialView(model); 
     } 

     // at this stage we know that the model is valid => 
     // we could process the uploaded file. In this particular example 
     // I am saving the uploaded file to the App_Data folder on the server 
     // and ignoring the Id parameter of the view model. Obviously 
     // in a more real world application here you might want to store the 
     // physical location of this file in your data store as well as it's MIME type 
     // so that you could display it later 
     var file = Path.Combine(
      Server.MapPath("~/App_Data"), 
      Path.GetFileName(model.File.FileName) 
     ); 
     model.File.SaveAs(file); 

     // we have finished => let's set the response status code to 
     // 204 (NoContent) so that the client side javascript that I will show 
     // later in my answer could distinguish this case from the error scenario 
     Response.StatusCode = (int)System.Net.HttpStatusCode.NoContent; 

     // we will return an EmptyResult because in this particular example 
     // I don't really care about returning some information to the client 
     // from the server. If you care you could of course set the status code 
     // to 200 (Success) and return, say, a JsonResult here 
     return new EmptyResult(); 
    } 
} 

沒有太多關於該控制器可說的。相當標準的東西。一個Index動作來爲某些虛擬視圖提供服務，該虛擬視圖將包含啓動上傳過程的鏈接。執行Upload（GET）操作來部分上傳表單，當然還有一個Upload（POST）操作來處理實際的文件上傳（在這個過於簡化的示例中，我將該文件存儲在服務器上）。

然後我們就可以有相應的~/Views/Home/Index.cshtml虛擬視圖：

@model MyViewModel 
@Html.ActionLink(
    "click here to upload a file", 
    "Upload", 
    new { id = 154 }, 
    new { id = "uploadLink" } 
) 
<div id="dialog"></div> 

簡單：包含一個錨隨後將（在後面看到我的回答）一個強類型的視圖，以顯示上傳局部內部Ajax化對話框的jQuery對話框和div佔位符。

接下來我們可以寫上載部分將包含形式（~/Views/Home/Upload.cshtml）：這裏再次

@model MyViewModel 

@using (Html.BeginForm(null, null, new { id = Model.Id }, FormMethod.Post, new { enctype = "multipart/form-data" })) 
{ 
    <div> 
     @Html.LabelFor(x => x.File) 
     @Html.TextBoxFor(x => x.File, new { type = "file" }) 
     @Html.ValidationMessageFor(x => x.File) 
    </div> 
    <button type="submit">Upload</button> 
} 

，非常標準的東西=>包含文件輸入一個HTML表單，允許用戶選擇要上傳的文件。

而最後一步當然是JavaScript將使所有這些活着。你可以把這個javascript放在你的Index視圖中的腳本部分，你可以從_Layout中覆蓋。理想的情況是腳本應放置在文件的結尾，收盤</body>標記之前（這就是爲什麼我不是一個document.ready包裹.click()處理訂閱的原因）：

$('#uploadLink').click(function() { 
    $.ajax({ 
     url: this.href, 
     type: 'GET', 
     cache: false, 
     success: function (result) { 
      $('#dialog').html(result).dialog({ 
       autoOpen: true, 
       width: 500, 
       resizable: true, 
       title: 'PVT Report', 
       modal: true, 
       buttons: { 
        'Close': function() { 
         $(this).dialog("close"); 
        } 
       } 
      }); 
     } 
    }); 
    return false; 
}); 

$('#dialog').on('submit', 'form', function() { 
    var xhr = new XMLHttpRequest(); 
    xhr.open(this.method, this.action); 
    xhr.onreadystatechange = function() { 
     if (xhr.readyState == 4) { 
      if (xhr.status == 204) { 
       // upload was successful => thank the user and close 
       // the dialog 
       alert('Thank you for uploading the file'); 
       $('#dialog').dialog('close'); 
      } else if (xhr.status == 400) { 
       // validation error occurred on the server => redisplay the form 
       $('#dialog').html(xhr.responseText); 
      } 
     } 
    }; 
    xhr.send(new FormData(this)); 
    return false; 
}); 

2個事件是由這個JavaScript處理：點擊主視圖中的錨點，顯示jQuery對話框和表單提交，它將使用AJAX請求和HTML 5 File API上傳文件。