Lesson 10 - E-shop in ASP.NET Core MVC - Finishing the Image Management

In the previous lesson, E-shop in ASP.NET Core MVC - Product management - Images, we prepared a manager for editing images, including products. In today's ASP.NET Core tutorial, we're going to finish the image management by editing the view and the controller. To do this, we'll also add a category tree view on the left side of the page, using a helper and MemoryCache.

Today's lesson also includes the source code we wrote up until now to download.

Controller

Editing the controller (the ProductController of course) will be simple. In the Manage() POST action, before calling the SaveProduct() method, we'll first prepare the current Id of the product and the number of its images:

int oldProductID = model.Product.ProductId;
int oldImagesCount = model.Product.ImagesCount;

After calling the UpdateProductCategories() method, we'll also call the method saving the images:

productManager.SaveProductImages(model.Product, model.UploadedImages, oldProductID, oldImagesCount);

To do this, we'll add an action for deleting images that we'll call using AJAX, meaning in the background. The advantage of this is that the user doesn't even need to know that there was any communication with the server because the page won't be reloaded. So any modifications to the page (in our case, deleting an image preview) must be handled by JavaScript (jQuery).

[Authorize(Roles = "Admin")]
public void DeleteImage(int productID, int imageIndex)
{
    productManager.RemoveProductImage(productID, imageIndex);
}

Now we've finished the controller

...End of the preview...
Continue further