2012-08-08 50 views
0

過去幾天我一直在使用MVC。如何上傳文件而無需重新加載mvc3中的整個頁面?

我的某個頁面出現問題,即我有一個頁面,q用戶輸入所需的詳細信息並上傳文件。我有兩個按鈕名爲Upload for Upload File和Create來創建新的配置文件。

我的問題

我的問題是我不想要重新加載整個頁面當上傳按鈕用戶點擊。我正在考慮使用webmethod進行文件上傳。

我不知道我在做什麼錯在這裏

任何一個可以糾正我

這是我在我的控制器WEBMETHOD命名創建

控制器

[WebMethod] 
    public string FileUpload(HttpPostedFileBase file, BugModel model) 
    {    
     BugModel bug = null; 
     if (file != null && file.ContentLength > 0) 
     { 
      string path = "/Content/UploadedFiles/" + Path.GetFileName(file.FileName); 
      string savedFileName = Path.Combine(System.Web.HttpContext.Current.Server.MapPath ("~" +path)); 
      file.SaveAs(savedFileName); 
      BugAttachment attachment = new BugAttachment(); 
      attachment.FileName = "~" + path.ToString(); 
      bug.ListFile.Add(attachment); 
      model = bug;    
     } 
     return "FileUploaded";   
    } 

使用腳本來調用方法

的Javascript

 <script type="text/javascript"> 
     function UploadFile() {  
     $.ajax({ 
      type:"Post", 
      url: "LogABug/FileUpload", 
      data: "{}", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (msg) { 
       alert("File Uploaded") 
      }, 
      error: function() { 
       ErrorMessage("Try Again"); 
      } 
     }); 
    } 
</script> 

任何一個可以告訴我,我怎麼能做到這一點......如果這是錯誤的方法指正正確的與想法,請

+0

你可以做到這一點顯示在div不使用的WebMethod也。請參閱[this](http://stackoverflow.com/a/5273352/1182982) – Yasser 2012-08-08 09:30:58

回答

0

您單獨上傳文件。因此您需要兩個操作:

  • public string Something(BugModel model)爲模型。
  • public string FileUpload(HttpPostedFileBase file)的文件

現在,我會用jQuery Form Plugin阿賈克斯提交。這裏有一個例子:

<script type="text/javascript"> 
    $(function() { 
     $("#file-upload-form").submit(function() { 
      $(this).ajaxSubmit({ 
       target: "#message", 
       cache: false 
      }); 

      return false; 
     }); 
    }); 
</script> 
@using(Html.BeginForm("FileUpload", "LogABug", FormMethod.Post, new { enctype = "multipart/form-data", id = "file-upload-form" })) { 
    @Html.ValidationSummary(true) 
    <fieldset> 
     @Html.EditorFor(model => model.File) 
     <input type="submit" value="Upload" /> 
    </fieldset> 
} 
<div id="message"> 
</div> 

你永遠從你的行動什麼樣的回報將與ID message

相關問題