Ajax postback partialview没有加载更新的图像

Question

I am trying to create a sample MVC4 webpage with partialViews

on my parent page ,eg., Index.cshtml page I am displaying a partialView page which will allow the user to view/update profile photo

When the index page loads ,I need this partial page to show up the photo if photo is available

once the page is loaded ,when the user uploads a new photo,I need only the partialView page to do an ajax postback and show up the new photo .

I am able to load the page with photo fetched from DB, I am able to Save new photo to db by clicking "#btnPhotoUpload" button. But after saving the photo ,the partialview is not getting refreshed automatically.Please help me how to get my partialview page to refesh and display the updated photo.

Here is my index page ie., "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>

Here is my PartialView, ie _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>
}

Here is my controller 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");
        }

    }
}

Update:

As @David Tansey suggested ,I added code to refresh image inside 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();
    });
}

But the above code is refreshing the image only after I click the upload button twice . Actually I need this to refresh the image immediately after the $("#btnPhotoUpload").click . Any suggestions?

I also tried disabling cache at the controller but no luck:

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

Answer 1

I am pretty sure the problem is that the browser is caching the image file and does not 'perceive' the need to bring it across the wire again after you upload a new one.

Look at the following post for a description of how to attach a dummy (yet dynamic) query string value to prevent the caching from occuring. I think this approach will solve your problem.

asp.net mvc jquery filling image

Hope that helps.