在 MVC 中的 POST 操作后保持图像预览答案

【问题标题】：Keeping image preview after POST action in MVC在 MVC 中的 POST 操作后保持图像预览
【发布时间】：2014-12-15 09:20:32
【问题描述】：

在上传到 ASP.NET MVC 之前，我正在使用文件 API 在客户端预览配置文件图像。但是问题是post action后图片预览丢失，验证错误时返回默认图片。

如果出现验证错误，我想保留之前的图像预览以及验证错误消息。这怎么可能？

问题：
问题是由于输入文件类型在验证后被清除的原因。因此，文件 api 无法重新填充图像，因为验证后实际上不存在文件。那么，我想这个问题可以简化为如何在验证后保留输入类型=文件值？

【问题讨论】：

请分享一些视图和控制器的相关代码
如何进行验证？服务器端还是客户端？
服务器端和客户端验证。

标签： c# asp.net-mvc asp.net-mvc-4 fileapi

【解决方案1】：

你需要做几件事：

更改模型，使其具有两个新属性：

ChangeImage：这应该绑定到允许用户提供新图像的复选框
ImagePresent：这表示用户之前已经发布了一张图片（在之前的 POST 中）

这样改变控制器的动作：

当用户第一次拿到表单时，ChangeImage应该为true，这样用户可以选择一个新的文件，ImagePresent应该是false，这样Razor模板就知道没有图片了在服务器上显示给用户
当用户发帖时：
- 如果他检查了ChangeImage，并提供了文件图像，请将其保存在服务器上，例如文件中，以便以后可以向用户显示。如果存在验证错误，则向用户返回一个带有值 ChangeImage = false 和 ImagePresent = true 的模型的视图
- 如果他没有提供图片，而之前的帖子中有图片，则将ImagePresent 设置为true，将ChangeImage 设置为false。这样，它将使用剃刀模板显示。
- 如果需要，您可以允许用户通过标记ChangeImage 并选择无文件或在视图模型中使用新的RemoveImage 属性来删除图像

更改剃须刀模板： * 为ChangeImage 添加一个复选框，以便它允许用户指定一个新的图像文件（或指定一个空文件来删除它）。理想情况下，您应该添加一些 JavaScript 代码来显示/隐藏文件输入控件。如果用户要添加图像，他必须检查ChangeImage并选择新文件 * 可选地，为RemoveImage 添加一个复选框，仅在ImagePresent 为真时显示 * 添加<img>，仅在ImagePresent 为真时显示

如果您这样做，用户只需在第一次上传图片，除非他想删除或更改它。您可以在服务器中显示它。

这个想法是将图像保存在服务器上，并通知模板是否可用。请记住，出于安全考虑，您不能在浏览器中指定文件输入控件的文件名，因此您必须使用替代控件，如说明。

【讨论】：

【解决方案2】：

使用Ajax Submit方法提交，下面是示例代码...

@using (Ajax.BeginForm("/SaveDetails", "User", 
    new AjaxOptions { UpdateTargetId =   "divSaveUsers", InsertionMode = InsertionMode.Replace, 
    OnSuccess = "onUserSaveSuccess", OnFailure = "onUserSaveFailure", HttpMethod = "POST" },
    new { @autocomplete = "off", @id = "frmuserdetails" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)   
    <input type="button" value="Save" id="btnSaveUserData" />
}

<script>

   $("#btnSaveUserData").click(function (event) {
        if ($("#frmuserdetails").valid()) { 
           $("#frmuserdetails").unbind("submit").submit();    
        }
   });
</script>

如果 jquery.unobtrusive-ajax.js 不存在，请添加引用。

如果您遇到任何问题，请告诉我。

谢谢

拉维兰詹

【讨论】：