Razor Pages 在帖子中部分刷新

Question

我在发布后刷新部分视图时遇到问题。我想要的是发布一些文件，上传后我想刷新部分视图。在不同的局部视图上，我删除了该项目并且它刷新正常，但是在这个局部视图上它不起作用。我到了某个点，我可以看到在 AddImages 之前调用了 refresh 方法，但我仍然无法弄清楚为什么调用该方法并且数据没有更新。 我尝试了几种方法，这就是我现在所在的位置： 局部视图-

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

预览上传的图片并发布到剃须刀页面而不刷新页面的脚本，只是表单：

<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");
        },
    });
}

页面模型：

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

我最终添加了此代码行以使其正常工作。似乎在这里发布问题给了我灵感。
$('#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");
            },
        });