文件管理器MVC

时间:2016-02-19 16:58:10

标签: jquery ajax asp.net-mvc file

您好我已经创建了一个非常简单的文件上传器:

型号:

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>

所以在帖子上如果添加了多个文件,它将在文件夹中创建一个当前项目表。但是,讨论了一些问题,第一个问题是必须发布表单,以便我们不断更新添加到文件夹中当前项目表的新文档。然后删除我必须阅读的新页面:DeleteFile,它只获取URL并删除项目,然后刷新主页面以显示文件夹中的当前项目。但是,DeleteFile将在新页面中打开,并立即关闭该页面。但这可能会让用户感到困惑,因为他们可能会看到一个页面打开,并想知道为什么它会如此快速地关闭并寻求支持。

有没有办法在页面上创建一个文件管理器,而不通过Jquery和Ajax发布。我在那个领域的知识不是很强,所以它会非常有帮助。还有一种删除项目的方法,无需打开新页面然后刷新表单。

1 个答案:

答案 0 :(得分: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
          }
      });
    }

  });

});

假设您的DeleteFile中有一个名为HomeController的操作方法,该方法接受文件路径并将其删除。

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