部分视图未在 ajax 发布成功功能上更新

小编典典

部分视图未在 ajax 发布成功功能上更新

all

我目前正在尝试创建一个系统，该系统将在我的视图中显示从文件输入到 div 的上传图像。（并计划稍后添加对文档的支持）

问题是，当我对文件输入使用 onchange 函数将图像传递给我的局部视图时，局部视图似乎没有更新，该局部视图应该重新加载到我的视图中的 div 中并显示图像.

我知道部分视图是第一次加载的，因为在加载 div 时提醒我的 onload 函数在初始页面加载后什么都不做。

我知道请求正在发送，因为当我尝试在 ajax 调用的成功函数中执行 console.log 或其他操作时，它们都可以正常工作。

我的观点：

<div>
<h3>Attach File(s) (optional):</h3>
<form enctype="multipart/form-data">
    <input id="fileInput" onchange="addFile()" type="file" accept="image/png, image/gif, image/jpeg, .pdf, .doc" /> 
</form>
    <br />
    <br />
    <img width="750" style="display:none" id="UploadedImage" src="#" />
    <div id="fileDiv">
        <partial name="~/Views/Shared/_FilePreviewPartial.cshtml" />
    </div>
</div>

我的javascript函数：

function addFile() {

    var input = document.getElementById("fileInput");
    var files = input.files;
    var formData = new FormData();

    for (var i = 0; i != files.length; i++) {
        formData.append("files", files[i]);
    }

    $.ajax(
        {
            url: "/RODispositions/UpdateFilePreview/",
            data: formData,
            processData: false,
            contentType: false,
            type: "POST",
            success: function (data) {
                $("#fileDiv").html(data);
                console.log("posted");
            }
        }
    );
}

我的部分观点：

<body onload="console.log('refreshed file div')">
<div>
@foreach(var image in @Model.RODImages)
{
    <img width="750" id="UploadedImage" src="#" />
    <br />
    <a href="#">Remove</a>
}

@foreach(var document in @Model.RODDocuments)
{
    <a href="">Download file</a>
    <br />
    <a href="#">Remove</a>
}
</div>
</body>

我的控制器方法：

    [HttpPost]
    public PartialViewResult UpdateFilePreviewAsync(ICollection<IFormFile> files)
    {
        var vm = new ViewModel()
        {
            RODImages = new List<byte[]>(),
            RODDocuments = new List<byte[]>()
        };

        foreach (var file in files)
        {
            if (file.Length > 0)
            {
                using (var ms = new MemoryStream())
                {
                    file.CopyTo(ms);
                    var fileBytes = ms.ToArray();
                    vm.RODImages.Append(fileBytes);
                }
            }
        }

        return PartialView("_FilePreviewPartial", vm);
    }

第一次加载页面时正在加载部分内容，但在 ajax 调用后不再加载。我已经制作了类似的函数，将 PartialViewResult 加载到 div 中之前没有问题，但不知道为什么这不起作用。请记住，我仍然是 .NET 编程的新手，因此将不胜感激任何帮助和/或解释。

阅读 60

2022-08-24

共1个答案

小编典典

第一次加载页面时正在加载部分内容，但在 ajax 调用后不再加载。

首先，它应该vm.RODImages.Add(fileBytes);代替.Append().

然后，您的局部视图甚至没有按字节数组设置图像 src。

此外，您似乎想发布多个文件，请确保multiple在您的输入中添加属性，如下所示：

<input id="fileInput" multiple  onchange="addFile()" type="file" accept="image/png, image/gif, image/jpeg, .pdf, .doc"/>

这是一个简单的演示：

[HttpPost]
public PartialViewResult UpdateFilePreviewAsync(ICollection<IFormFile> files)
{
    var vm = new ViewModel()
    {
        RODImages = new List<byte[]>(),
        RODDocuments = new List<byte[]>()
    };

    foreach (var file in files)
    {
        if (file.Length > 0)
        {
            using (var ms = new MemoryStream())
            {
                file.CopyTo(ms);
                var fileBytes = ms.ToArray();
                vm.RODImages.Add(fileBytes);
            }
        }
    }

    return PartialView("_FilePreviewPartial", vm);
}

局部视图：

@model ViewModel
<body onload="console.log('refreshed file div')">
<div>
@foreach(var image in @Model.RODImages)
{
                                           //modify here...
    <img width="750" id="UploadedImage" src="data:image/png;base64, @Convert.ToBase64String(image)" />           
    <br />
    <a href="#">Remove</a>
}

@foreach(var document in @Model.RODDocuments)
{
    <a href="">Download file</a>
    <br />
    <a href="#">Remove</a>
}
</div>
</body>

笔记：

如果您的图像格式都不同，我认为您需要修改您的 ViewModel，如下所示：

模型：

public class ViewModel
{
    public List<RODImages> RODImages { get; set; }
    public List<RODDocuments> RODDocuments { get; set; }
}
public class RODImages
{
    public byte[] RODImage { get; set; }
    public string Format { get; set; }
}
public class RODDocuments
{
    public byte[] RODDocument { get; set; }
    public string Format { get; set; }
}

控制器：

[HttpPost]
public PartialViewResult UpdateFilePreviewAsync(ICollection<IFormFile> files)
{
    var vm = new ViewModel()
    {
        RODImages = new List<RODImages>(),
        RODDocuments = new List<RODDocuments>()
    };

    foreach (var file in files)
    {
        if (file.Length > 0)
        {
            using (var ms = new MemoryStream())
            {
                file.CopyTo(ms);
                var fileBytes = ms.ToArray();
                vm.RODImages.Add(new RODImages() { RODImage= fileBytes ,Format=file.ContentType});
            }
        }
    }

    return PartialView("_FilePreviewPartial", vm);
}

局部视图：

@model ViewModel
<body onload="console.log('refreshed file div')">
<div>
@foreach(var image in @Model.RODImages)
{
                                             //modify here........
    <img width="750" id="UploadedImage" src="data:@image.Format;base64, @Convert.ToBase64String(image.RODImage)" />
    <br />
    <a href="#">Remove</a>
}

@foreach(var document in @Model.RODDocuments)
{
    <a href="">Download file</a>
    <br />
    <a href="#">Remove</a>
}
</div>
</body>

2022-08-24