Action buttons in ASP.NET Core 2.2 razor view - razor

Question

Suppose we're redesigning the view below:
The current code is:
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.Url)
</td>
<td>
<a asp-action="Edit" asp-route-id="#item.BlogId">Edit</a> |
<a asp-action="Details" asp-route-id="#item.BlogId">Details</a> |
<a asp-action="Delete" asp-route-id="#item.BlogId">Delete</a>
</td>
</tr>
}
Our goal is to remove the Delete view that is linked in each row. Instead we would like to have a delete button that deletes the row upon confirmation without leaving the Index page (reload is fine).
How would one go about implementing such button? And is there any relevant documentation?

Answer 1

You can use ajax to issue a delete request so that user can stay during the deletion process. Once the ajax request is successful,you can remove the table row from the UI.
First, add a new attribute to your anchor tag, which you can use for your jQuery selector to wire up the click event.
<a asp-action="Delete" ajaxy asp-route-id="#item.BlogId">Delete</a>
Here I added an attribute called ajaxy
Now we will listen to the click event on anchor tags with this ajaxy attribute, stop the normal behavior( navigating to the href attribute value URL) and instead make an ajax call. To do the confirmation, you can use window.confirm API.
#section Scripts
{
<script>
$(function () {
$("a[ajaxy]").click(function (e) {
e.preventDefault();
if (window.confirm("Are you sure ?")) {
var $this = $(this);
var url = $this.attr("href");
$.post(url).done(function (res) {
$this.closest("tr").fadeOut(300, function (a) {
$(this).remove();
});
}).fail(function (jqXHR, textStatus, errorThrown) {
alert("error in ajax call!" + errorThrown);
})
}
});
});
</script>
}
Assuming your Delete action accepts the Id parameter.
[HttpPost]
public async Task<IActionResult> Delete(int id)
{
// to do : return something
}

Answer 2

If you just want to remove the extra 'delete' view, you can move the delete code from the delete page tot he index page and use a simple html-form. e.g.
<form method="post" asp-page-handler="Delete" class="btn-group-sm" >
<a asp-page="./Edit" asp-route-id="#item.Id" class="btn btn-warning">Edit</a>
<a asp-page="./Details" asp-route-id="#item.Id" class="btn btn-info">Details</a>
<input type="hidden" asp-for="#item.Id" />
<input type="submit" value="Delete" class="btn btn-danger" onclick="return confirm('Are you sure you wish to delete this q-Section?')" />
</form>
Rename the 'OnPost' function to 'OnPostDelete' and it will work. You can do the same for the 'delete' button on the details page.
Regards Ken.