c# - Remove Image option in Edit Form

Question

I want to delete image in edit form and to show the upload file option .How can I achieve this using Ajax since I'm using tab panes for multiple forms.

Here is my code,

Biodata.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>

Its not calling the asp-page-handler method. Directly executing the ajax method.

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');
                    }
                })
            }
        }

This is my asp-page-handler method in BioData.cshtml.cs

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();

        }

Any help would be appreciated.Thanks.

Answer 1

Links are GET requests. You cannot post via a link; that is what forms are for. You'd need something like:

@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>
        }
    }
}