2016-02-19 80 views
0

您好我創建了一個非常簡單的文件上傳:文件管理器MVC

型號:

using System.ComponentModel.DataAnnotations; 
using System.Data.Entity.SqlServer; 
using System.Linq; 
using System.Web; 
using System.Web.WebPages.Html; 

namespace BestPractices.Models 
{ 
    public class AddPracticeModel 
    { 
public Guid folder { get; set; } 

[Display(Name = "Attachments:")] 
     public IEnumerable<HttpPostedFileBase> Files { get; set; } 

    } 
} 

控制器:

public ActionResult AddPractice() 
     { 
       form.folder = Guid.NewGuid(); 
       return View(form); 

     } 

    [HttpPost] 
      public ActionResult AddPractice(AddPracticeModel formData, string FilePath) 
      { 
    if (ModelState.IsValid) 
       { 
        //Send To DB 
       } 
    else{ 

foreach (var files in formData.Files) 
      { 
       try 
       { 
        if (files != null) 
        { 

         var dir = Server.MapPath("/Attachments/" + formData.folder.ToString()); 
         if (!Directory.Exists(dir)) 
         { 
          System.IO.Directory.CreateDirectory(dir); 
          var fileName = Path.GetFileName(files.FileName); 
          var path = Path.Combine(dir, fileName); 
          files.SaveAs(path); 
         } 
         else 
         { 
          var fileName = Path.GetFileName(files.FileName); 
          var path = Path.Combine(dir, fileName); 
          files.SaveAs(path); 
         } 

        } 
       } 

       catch 
       { 

       } 

      } 
    } 
    return View(formData); 
     } 

所以我確切地解釋這裏發生了什麼:我爲這個表單創建一個Guid,Guid將成爲一個文件夾,我將存儲爲該特定練習添加的文件。這樣我可以返回文件夾內容,以便人們可以下載它們和其他選項。

現在,這裏是我的看法:

<div class="formBody"> 
    @using (Html.BeginForm("AddPractice", "Main", FormMethod.Post, new { enctype = "multipart/form-data", id="myForm" })) 
    { 
     <div class="inputFields"> 
       @Html.LabelFor(x => x.Files) 
       @Html.TextBoxFor(x => x.Files, new { type = "file", multiple = "true" }) 

      </div> 
<div class="submitButton"> 
      <input type="submit" value="Submit" onclick="document.getElementById('isRealSubmit').setAttribute('value','True');" /> 
     </div> 
@Html.TextBoxFor(x => x.folder, new { hidden = "true" }) 

       var dir = Server.MapPath("/Attachments/" + Model.folder.ToString()); 

       DirectoryInfo d = new DirectoryInfo(dir); 
       try { 

       <table> 
        @foreach (var file in d.GetFiles()) 
        { 
         var dir2 = Server.MapPath("/Attachments/" + Model.folder.ToString() + "/" + file); 
         <tr> 
          <td><a style="color: red" href="/Attachments/@Model.folder.ToString()/@file" download>@file</a></td> 
          <td>@Html.ActionLink("Delete", "DeleteFile", new { FilePath = dir2 }, new { onclick="var r = confirm('Are you sure you would like to delete?'); if (r == true){document.getElementById('myForm').submit();}", target = "_blank" })</td> 
          @*<a href="#" id="Delete">Delete</a></td>*@ 
         </tr> 
        } 
       </table> 
       } 

       catch 
       { 

       } 
    } 
</div> 

所以在後,如果有超過1個文件添加它會創建一個文件夾中當前的項目表。然而,還是討論了一些問題,第一個問題是必須發佈表單,以便我們隨時更新添加到文件夾中當前項目表的新文檔。然後刪除項目我不得不閱讀一個名爲DeleteFile的新頁面,它只是獲取URL並刪除項目,然後刷新主頁面以顯示文件夾中的當前項目。但是,DeleteFile將在新頁面中打開,並且該頁面立即關閉。但是,這可能會讓用戶感到困惑,因爲他們可能會看到一個頁面打開,並想知道爲什麼它關閉得這麼快,並呼籲支持。

有沒有一種方法可以使頁面上的文件管理器更新,而無需通過Jquery和Ajax進行發佈。我的知識在這個領域不是很強,所以它會非常有幫助。還有一種刪除項目的方法,無需打開新頁面,然後刷新我們的表單。

+0

**它會在文件夾中創建一個當前項目表**這是什麼意思? – Shyju

+0

因此,總結一下,你的問題是「我如何使用AJAX?」這對於堆棧溢出問題來說太廣泛了。也許看看一些教程和例子在線? – David

+0

@Shyju如果你看看在視圖中的foreach語句,你可以看到一個項目表。 –

回答

1

您可以使用ajax刪除文件。

顯示服務器路徑顯示文件給用戶的位置(用戶可以查看源文件並查看文件夾結構)可能不是一個好主意。你可以簡單地使用文件名(我希望它是唯一的)而不是完整的路徑。

所以內環路,

<table> 
@foreach (var file in d.GetFiles()) 
{ 
    <tr> 
     <td><span>@file</span> 
     <a href="@Url.Action("DeleteFile", "Home", 
        new {fileName = file, folderName= Model.folder})" class="del">Delete</a> 
     </td>  
    </tr> 
} 
</table> 

現在聽這個鏈接上單擊事件。使用jQuery

$(function(){ 

    $("a.del").click(function(e){ 
    e.preventDefault(); 

    if(window.confirm("are you sure to delete")) 
    { 
     var _this=$(this); 
     $.post(_this.attr("href"),function(res){ 
      alert(res.MessagePort); 
      if (res.status === "success") { 
       _this.closest("tr").remove(); //remove the item from the UI 
      } 
     }); 
    } 

    }); 

}); 

假設你有一個名爲DeleteFileHomeController內的操作方法,它接受的文件路徑,並刪除它。

[HttpPost] 
public bool DeleteFile(string filePath,string folderName) 
{ 
    var path = Server.MapPath(Path.Combine("~/Attachments/",folderName, fileName)); 
    if (System.IO.File.Exists(path)) 
     { 
      System.IO.File.Delete(path); 
      return Json(new { status="success", Message= "Deleted successfully"}); 

     } 
     return Json(new { status = "success", Message = "No file!!!!" }); 
}