时间戳

首页 > 解决方案 > 删除编辑表单中的图像选项

c# - 删除编辑表单中的图像选项

问题描述

我想删除编辑表单中的图像并显示上传文件选项。我如何使用 Ajax 来实现这一点，因为我正在为多个表单使用选项卡窗格。

这是我的代码，

生物数据.cshtml

<div class="form-group">
                <label class="control-label-staff"><b>Photo</b></label>
                @if (Model.ImageFiles != null)
                {
                    foreach (var item in Model.ImageFiles)
                    {
                        if (item.Name.Substring(0, 2) == "IM")
                        {
                            <span class="control-label-staff">
                                <img src="~/Documents/EmployeeAttachments/@Request.Query["EmpID"].ToString()/@item.Name" width="70px" height="70px" />
                            </span><br/>
                            <a asp-page-handler="RemoveImage" data-ajax="true" data-ajax-method="post" data-ajax-complete="RemoveImageCompleted">Delete</a>                            
                            
                        }
                    }
                }
                @if (Model.ImageFiles == null)
                {
                    <input type="file" asp-for="StaffPhoto" class="form-control-staff" accept="image/*" style="border:1px solid white;" />
                }
            </div>

它没有调用 asp-page-handler 方法。直接执行ajax方法。

function RemoveImageCompleted(event) {
            if (event.responseText != "") {
                $("#Biodata").html(event.responseText);
            } else {
                alert("Image Has Been Deleted Successfully");
                $.ajax({
                    url:rootPath + "/Staff/Onboarding/Biodata",
                    type: "get",
                    success: function (result) {
                        $("#Biodata").html(result);
                        $('a[href="#Biodata"]').tab('show');
                    }
                })
            }
        }

这是我在 BioData.cshtml.cs 中的 asp-page-handler 方法

public async Task<IActionResult> OnPostRemoveImageAsync()
        {
            string filename = Request.Form["filename"];
            if (filename != null)
            {
                var Folder = StaffBioData.EmpID.ToString();
                string filedel = Path.Combine(_env.WebRootPath, "Documents/EmployeeAttachments", Folder, filename);
                FileInfo fi = new FileInfo(filedel);
                if (fi != null)
                {
                    System.IO.File.Delete(filedel);
                    fi.Delete();
                } 
            }
            return new OkResult();

        }

任何帮助将不胜感激。谢谢。

标签： c#ajaxasp.net-corerazor-pagesdelete-file

解决方案

链接是 GET 请求。您不能通过链接发布；这就是表格的用途。你需要类似的东西：

@if (Model.ImageFiles != null)
{
    foreach (var item in Model.ImageFiles)
    {
        if (item.Name.Substring(0, 2) == "IM")
        {
            @*<a asp-page-handler="RemoveImage" data-ajax="true" data-ajax-method="post" data-ajax-complete="RemoveImageCompleted">Delete</a>*@
            <form method="post" asp-page-handler="RemoveImage" data-ajax="true" data-ajax-method="post" data-ajax-complete="RemoveImageCompleted">
                <input type="submit" value="delete" />
            </form>
        }
    }
}

推荐阅读