Editing a viewmodel’s member via button without submit

I’m using Asp Net Core 3.1 and am working on developing admin controls to approve and delete submitted images that are awaiting approval. The functionality that I am developing and am stuck on is as follows: I have created a grid of images waiting approval (using a loop in razor) and would like to click a button to “approve” that image via the logic I have written in my controller. How would I pass that data to the controller without refreshing the page?

View Model

public class ImageManagerViewModel
{
    public List<ListingImages> Images;

    public List<Tuple<long, string>> ListingNames;
   
}

Controller

public class AdminController : Controller
{     
        public ActionResult ApproveImage(int listingID, long imageID, bool isFeatured)
        {
            ....
        }
}

Client-side

@foreach (ListingImages row in Model.Images)
{
   ....
    <div class="d-flex card-footer">
         <a a class="btn btn-success btn-space"
            href="@Url.Action("ApproveImage", "Admin", new { listingID = row.ListingId, imageID = row.ImageId, isFeatured = false})" role="button">Approve</a>

}

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

As VDWWD described, you wanna use ajax to achieve this behavior.

I made a quick sample for your code (I didn’t have the ability to test it atm though).

Your loop (you can also use hidden input fields to track the ids of every single item):

@foreach (ListingImages row in Model.Images)
{
    ...
    <span class="imageId">@(row.ImageId)</span>
    <span class="listingId">@(row.ListingId)</span>
    <input type="button" class="btn btn-success approveBtn">Approve</button>
}

JQuery code in the script section:

<script>
$(document).on("click",
    ".approveBtn",
    function () {

        var imageId = $(this).closest(".imageId").text();
        var listingId = $(this).closest(".listingId").text();
        $.ajax({
            url: "/Admin/ApproveImage",
            type: "POST",
            data: {
                __RequestVerificationToken: $('input[name=__RequestVerificationToken]').val(),
                listingID : listingId,
                imageID: imageId,
                isFeatured: false
            },
            timeout: 5000,
            success: function(results) {
                // result action
            },
            contentType: "application/x-www-form-urlencoded; charset=utf-8"
        })
            .fail(function (xhr, textStatus, errorThrown) {
            // error handling
        });
    });
</script>

Hints:

1. If you use one, include the antiforgery token in the request as shown in the sample.
2. You can also send the payload as JSON. You then need to edit the content type and use JSON.stringify in the data section to convert the payload.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0