Ajax 回发部分视图未加载更新的图像

Question

我正在尝试使用部分视图创建示例 MVC4 网页

在我的父页面，例如，Index.cshtml 页面上，我正在显示一个允许用户查看/更新个人资料照片的 partialView 页面

当索引页面加载时，如果有照片，我需要这个部分页面来显示照片

一旦页面加载完毕，当用户上传新照片时，我只需要partialView页面进行ajax回发并显示新照片。

我可以使用从数据库中获取的照片加载页面， 我可以通过单击“#btnPhotoUpload”按钮将新照片保存到数据库。 但是保存照片后，部分视图没有自动刷新。请帮助我如何让我的部分视图页面刷新并显示更新的照片。

这是我的索引页面，即“Index.cshtml”

@model MvcSamples.Models.ViewModels.UserInfoViewModel
@{

    ViewBag.Title = "Ajax Partial Postback demo";
    ViewBag.UserId = 1;
}

<h2>PersonalInfo example</h2>
<div id="photoForm">
    @Html.Partial("_UserPhoto")
</div>
<div id="OtherDetails">
    @Html.Partial("_UserDetails")
</div>

这是我的 PartialView，即 _UserPhoto.cshtml

@model MvcSamples.Models.ViewModels.UserInfoViewModel
@using (Ajax.BeginForm("SaveProfilePhoto", "Example", new { id = "1" }, new AjaxOptions { UpdateTargetId = "photoForm", OnSuccess = "onSuccess" }, new { encType = "multipart/form-data" }))
{ 
    @Html.AntiForgeryToken() 
    @Html.ValidationSummary(true) 
    <a>
        <img id="imgPhoto"  width="100px" height="100px"/>
        <label for="photo">Photo:</label>
        <input type="file" name="photo" id="photo" />
      <input id="btnPhotoUpload" type="button" value="Apply" />
    </a>

    <script type="text/javascript">
        $(document).ready(function () {

            $("#imgPhoto").attr('src', "@Url.Action("GetProfileImage", "Example", new { id = ViewBag.UserId })");

            $("#btnPhotoUpload").click(function (event) {
                //on-click code goes in here.
                event.preventDefault();
                SavePhotoToDb();

            });

            function SavePhotoToDb() {
                var json;
                var data;
                $.ajax({
                    type: "POST",
                    url: "/Example/SaveProfilePhoto",
                    data: new FormData($("#form0").get(0)),
                    dataType: "html",
                    contentType: false,
                    processData: false,
                    success: saveItemCompleted(data),
                    error: saveItemFailed
                });
            }

            function saveItemCompleted(data) {
                    $("#photoForm").html(data);
        }

        function saveItemFailed(request, status, error) {
            }
        });
    </script>
}

这是我的控制器 ExampleController：

namespace MvcSamples.Controllers
{
    public class ExampleController : Controller
    {
        IUserDetails usr = new UserDetails();

        // GET: /Example/
        [HttpGet]
        public ActionResult Index()
        {
            //usr.GetProfilePhoto(WebSecurity.GetUserId(User.Identity.Name));
            if (!string.IsNullOrWhiteSpace(User.Identity.Name))
            {
                ViewBag.UserId = WebSecurity.GetUserId(User.Identity.Name);
            }

            UserInfoViewModel model = new UserInfoViewModel();
            model.GenderList = usr.FillGenderTypesDropDownList();
            return View(model);
        }


        [HttpPost]
        public ActionResult SaveProfilePhoto(HttpPostedFileBase photo, UserInfoViewModel model)
        {
            string path = @"C:\Temp\";
            if (photo != null)
            {
                model.UserId = 1;//WebSecurity.GetUserId(User.Identity.Name);
                ViewBag.UserId = model.UserId;
                var binary = new byte[photo.ContentLength];
                photo.InputStream.Read(binary, 0, photo.ContentLength);
                UserPicModel upModel = new UserPicModel();
                upModel.UserPhoto = binary;
                upModel.UserId = model.UserId;
                usr.InsertProfilePhoto(upModel);

            }

            return PartialView("_UserPhoto", model); 
        }

        public FileResult GetProfileImage(int id)
        {
            byte[] barrImg = usr.GetProfilePhoto(id);
            return File(barrImg, "image/png");
        }

    }
}

更新：

正如@David Tansey 建议的那样，我在 SaveCompleted(data) 中添加了刷新图像的代码。

function RefreshImage() {
    $("#imgPhoto").attr('src', function () {
        // the datetime portion appended to the url avoids caching issues
        // and ensures that a fresh image will be loaded every time
        var d = new Date();

        return this.src + '?' + d.getTime();
    });
}

但上面的代码只有在我点击两次上传按钮后才会刷新图像。 实际上我需要在$("#btnPhotoUpload").click 之后立即刷新图像。有什么建议吗？

我也尝试在控制器上禁用缓存，但没有成功：

[OutputCacheAttribute(VaryByParam = "*", Duration = 0, NoStore = true)]

Answer 1

我很确定问题在于浏览器正在缓存图像文件，并且在您上传新文件后没有“感知”到需要再次通过网络传输它。

查看以下帖子，了解如何附加虚拟（但动态）查询字符串值以防止发生缓存。我认为这种方法可以解决您的问题。

asp.net mvc jquery filling image

希望对您有所帮助。