删除不在表单中但在模型中的文件

Deleting File that isn't in the Form, but is in Model

我正在显示从 ~/Content/Files 上传的文件列表,并为用户提供上传选项。我试图在每个文件旁边放置一个删除按钮,并允许将其 "seamlessly" 删除,并将其从页面中删除。我不确定我在页面上有一个表格但我没有在 post 中使用该表格这一事实是否也让我感到困惑。

除了无缝删除的部分,这是我拥有的:

查看

@model IEnumerable<string>

<h2>Files</h2>

<ul>
    @foreach (var fName in Model)
    {
        var name = fName;
        var link = @Url.Content("~/Content/Files/") + name.Replace(" ", "%20");

        <li style="margin: 10px;">
            <a href="@link">@name</a> | <input type="button" value="Delete" class="btn btn-danger" onclick="location.href = '@Url.Action("DeleteFile", "Home", new { fileName = name })'">
        </li>
    }
</ul>

<div>
    @using (Html.BeginForm("Files", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <input type="File" name="file" id="file" value="Choose File" />
        <button type="submit">Upload</button>
    }
</div>

控制器

[HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult DeleteFile(string fileName)
    {

        string file = fileName;
        string fullPath = Request.MapPath("~/Content/Images/" + file);
        if (System.IO.File.Exists(fullPath))
        {
            System.IO.File.Delete(fullPath);
        }
        return RedirectToAction("Files");
    }

如果您想知道,这里是 Files 操作方法:

public ActionResult Files()
        {
            var path = Server.MapPath("~/Content/Files/");

            var dir = new DirectoryInfo(path);

            var files = dir.EnumerateFiles().Select(f => f.Name);

            return View(files);
        }

它一直试图将我路由到 http://localhost:51123/Home/DeleteFile?fileName=test.docx(我知道这是因为按钮 onclick 方法),而我只想执行 Delete 方法然后重新加载视图.

我确定我在几个不同的地方出错了。

您的文件操作正在从 Content/Files 获取文件。您的删除操作正在尝试删除 Content/Images 中的文件。您需要在两个操作中使用相同的文件夹才能显示更改。

您正在将请求作为 GET 请求发送,并且您控制器中的操作方法具有装饰该方法的 [HTTPPost] 属性。这将只允许 POST 请求进入此操作方法。你有几个选择。您可以将请求更改为 POST 请求,请求将成功在控制器中找到正确的操作方法。另一种选择是删除控制器中装饰操作方法的 HTTPPost 属性。

就个人而言,我建议将请求更改为 Http DELETE 动词(因为这是请求的预期操作),然后使用 HTTPDelete 属性修饰您的方法。

更新:

要将此请求作为 HTTP DELETE 提交,您可以通过更改您的 onclick 事件将执行的操作来执行类似以下操作:

<li style="margin: 10px;">
            <a href="@link">@name</a> | <input type="button" value="Delete" class="btn btn-danger" onclick="DeleteRecord(name)">
        </li>

并且在您的 javascript 中您将拥有如下函数:

function DeleteRecord(name) {

$.ajax({
   url: '@Url.Action("DeleteFile", "Home")',
   data: name
   type: 'DELETE',
   success: function(response) {
     //...
   }
});
}

我通过 jQuery 的 ajax 函数来实现的原因是因为 HTML 形式(直到 HTML 版本 4 和 XHTML 1 ) 仅支持 GET 和 POST 作为 HTTP 请求方法。一个解决方法是通过 POST 通过使用隐藏的表单字段来隧道其他方法,该表单字段由服务器读取并相应地调度请求。

但是,GET、POST、PUT 和 DELETE 在所有主要网络浏览器(IE、Firefox、Opera、Chrome、Safari)。

干杯!