c# - Ajax postback partialview not getting loaded with updated image -

i trying create sample mvc4 webpage partialviews

on parent page ,eg., index.cshtml page displaying partialview page allow user view/update profile photo

when index page loads ,i need partial page show photo if photo available

once page loaded ,when user uploads new photo,i need partialview page ajax postback , show new photo .

i able load page photo fetched db, able save new photo db clicking "#btnphotoupload" button. but after saving photo ,the partialview not getting refreshed automatically.please me how partialview page refesh , display updated photo.

here 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 partialview, i.e. _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 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 refresh image inside savecompleted(data).

function refreshimage() {     $("#imgphoto").attr('src', function () {         // datetime portion appended url avoids caching issues         // , ensures fresh image loaded every time         var d = new date();          return this.src + '?' + d.gettime();     }); } 

but above code refreshing image after click upload button twice . need refresh image after $("#btnphotoupload").click. suggestions?

i tried disabling cache @ controller no luck:

[outputcacheattribute(varybyparam = "*", duration = 0, nostore = true)] 

i pretty sure problem browser caching image file , not 'perceive' need bring across wire again after upload new one.

look @ following post description of how attach dummy (yet dynamic) query string value prevent caching occuring. think approach solve problem.

asp.net mvc jquery filling image

hope helps.