Razor Pages Partial refresh on post - razor-pages

Question

I am having issues with refreshing a partial view after post. what I want is to post some files, after they are uploaded I want to refresh a partial view. on a different partial view I delete the item and it refreshes ok, but on this partial it doesn't work. I got to some point were I can see that the refresh method is called before the AddImages and i still can't figure it out why the method is called and the data does not update.
I tried several methods here is where I am now :
Partial View-
<div id="UploadImages">
<form asp-page-handler="AddImages" id="imageUploadForm" method="post" data-ajax="true" data-ajax-method="post" data-ajax-update="#ProductImages">
<div class="card-body">
<h3>Edit Product Images</h3>
<input asp-for="#Model" multiple="multiple" id="ctl_images" name="upload_file" class="form-control" onchange="preview_image();" />
</div>
<button class="btn btn-sm btn-primary d-none d-md-inline-block" type="submit" id="AddImages" onclick="clickbtn();">
Add
</button>
</form>
<div id="image_preview">
</div>
</div>
Scripts to preview the uploaded image and to post to the razor page without refreshing the page, just the form:
<script>
//preview Images to upload.
function preview_image() {
total_file = document.getElementById("ctl_images").files.length;
for (var i = 0; i < total_file; i++) {
$('#image_preview').append("<span class=\"pip\">" +
"<img class='img-preview' id='previmg" + i + "'src='" + URL.createObjectURL(event.target.files[i]) + "'>"
+ "<br/><button class=\"btn-close\" aria-label='Close'></button>" + "</span>");
$('.btn-close').click(function () {
$(this).parent(".pip").remove();
$('#previmg' + i).click(function () { (this).remove(); });
});
}
}
//Load multiple Images to product catalog.
function clickbtn() {
var files = document.getElementById('ctl_images').files;
var url = window.location.pathname + "?handler=AddImages";
formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append("CatalogImages", files[i]);
}
jQuery.ajax({
type: 'POST',
url: url,
data: formData,
cache: false,
contentType: false,
processData: false,
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
success: function () {
document.getElementById("imageUploadForm").reset();
var prv= document.getElementById("image_preview");
prv.innerHTML = "";
//if (repo.status == "success") {
// alert("File : " + repo.filename + " is uploaded successfully");
//}
},
error: function () {
alert("Error occurs");
},
});
}
Page model :
public async Task<IActionResult> OnPostAddImagesAsync()
{
var pathCtl = Path.Combine(_webHostEnvironment.WebRootPath, "Images/CatalogImages");
//if (!ModelState.IsValid)
// return Page();
//CatalogImages = (IFormFileCollection)Request.Form["ctl_Images"].ToList();
try
{
ProductImages = new List<ProductImageViewModel>();
foreach (var image in CatalogImages)
{
var uniqueFileName = string.Concat(Guid.NewGuid().ToString(), image.FileName);
using var fileStream = new FileStream(Path.Combine(pathCtl, uniqueFileName), FileMode.Create);
var productImage = new ProductImageViewModel
{
ImageUrl = Path.Combine("Images/CatalogImages", uniqueFileName),
ProductId = Product.Id,
};
await image.CopyToAsync(fileStream);
ProductImages.Add(productImage);
}
foreach (var item in ProductImages)
{
await _productImageRepo.Add(item, User);
}
var result = await OnPostRefreshImagesAsync(Product.Id);
return result;
}
catch (Exception ex)
{
_logger.LogError(ex.Message);
return Page();
throw ex;
}
}
public async Task<IActionResult> OnPostRefreshImagesAsync(int id)
{
var productImages = await _productImageRepo.GetByProductId(id);
var result = new PartialViewResult
{
ViewName = "~/Pages/Partials/_ProductImagesCardGroup.cshtml",
ViewData = new ViewDataDictionary<List<ProductImageViewModel>>(ViewData, productImages),
};
return result;
}

Answer 1

I ended up adding this code line to make it work. it seems posting questiosn here gives me inspiration.
$('#ProductImages').html(response);
//Load multiple Images to product catalog.
function clickbtn() {
var files = document.getElementById('ctl_images').files;
var url = window.location.pathname + "?handler=AddImages";
formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append("CatalogImages", files[i]);
}
jQuery.ajax({
type: 'POST',
url: url,
data: formData,
cache: false,
contentType: false,
processData: false,
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
success: function (response) {
document.getElementById("imageUploadForm").reset();
var prv = document.getElementById("image_preview");
prv.innerHTML = "";
**$('#ProductImages').html(response);**
//if (repo.status == "success") {
// alert("File : " + repo.filename + " is uploaded successfully");
//}
},
error: function () {
alert("Error occurs");
},
});