MVC 3 Mettre à jour l'image avec le même nom

Question

Je suis perplexe sur un problème d'image ... voici la verité.

Dans ma mise en page j'ai une image qui agit comme un logo ... cependant dans la vue d'administration il y a la possibilité de télécharger un nouveau logo et il remplace simplement l'actuel avec exactement le même nom. Après la publication, l'image ne change pas sur la mise en page pour l'image mise à jour, même si l'image mise à jour est enregistrée. Si je rafraîchis la page avec ctrl et F5, le cache est parti et je peux voir la nouvelle image mais j'ai besoin qu'elle soit plus automatisée.

Heres mon tag img dans la mise en page

<img src="@Url.Content("~/Content/themes/base/images/Client_Logo.jpg")" id="ClientLogo" alt="" width="227" height="130" style="float: left;" /> 

Heres l'admin Voir

@using (Html.BeginForm("Admin", "Home", FormMethod.Post, new { @encType = "multipart/form-data" })) 
    { 
     <fieldset> 
      <legend>Logo Management</legend> 
      <p> 
       <input type="file" name="FileUpload" /> 
      </p> 
      <p> 
       <input type="submit" value="Upload" /> 
      </p> 
     </fieldset> 
    } 

Et enfin l'action

[Authorize] 
    [HttpPost] 
    public ActionResult Admin() 
try 
      { 
       HttpPostedFileBase file = Request.Files[0]; 

       if (file != null) 
       { 
        var fileName = Path.GetFileName(file.FileName); 
        var path = Path.Combine(Server.MapPath("~/Content/themes/base/images"), fileName); 
        file.SaveAs(path); 
        System.IO.File.Delete(Path.Combine(Server.MapPath("~/Content/themes/base/images"), "Client_Logo.jpg")); 
        System.IO.File.Move(Path.Combine(Server.MapPath("~/Content/themes/base/images"), fileName), Path.Combine(Server.MapPath("~/Content/themes/base/images"), "Client_Logo.jpg")); 
       } 
       else 
       { 
        ModelState.AddModelError("uploadError", "There is a problem uploading the file."); 
       } 
      } 
      catch (Exception e) 
      { 
       ModelState.AddModelError("uploadError", e); 
      } 
return View(); 

Qu'est-ce que tout le monde suggère de le faire afin de rafraîchir l'image dans la mise en page lorsque la vue est renvoyée après le téléchargement de l'image?

Cheers.

Answer 1

Eh bien, vous pouvez définir les en-têtes de mise en cache sur ce fichier de ne pas mettre en cache dans votre web.config, mais ce n'est pas idéal.

Que diriez-vous de certains jQuery?

Dans votre mise en page:

<img src="@Url.Content("~/Content/themes/base/images/Client_Logo.jpg")" id="ClientLogo" alt="" width="227" height="130" style="float: left;" data-src="@Url.Content("~/Content/themes/base/images/Client_Logo.jpg")"/> 

À votre avis que vous voulez changer l'image:

<script type="text/javascript"> 
    $(function(){ 
      $('#ClientLogo').attr('src',$('#ClientLogo').data('src') + '?t=' + new Date().getTime()); 
    }); 
</script> 

Answer 2

Le plus rapide solution que je peux penser est l'affichage de votre logo avec quelque chose au hasard afin que le client ne serait jamais touché le cache comme:

"/images/yourlogo.png?version=123455634" 

Remplacement 123455634 avec toujours quelque chose au hasard.

Étant donné que l'URL de votre photo ne sera plus jamais la même, la photo sera toujours téléchargée.

Vous pouvez jouer avec les en-têtes de cache pour ce fichier particulier mais c'est le correctif le plus rapide auquel je peux penser.

Espérons que cela aide.

EDIT essayez ceci:

<img src="@Url.Content("~/Content/themes/base/images/Client_Logo.jpg?version=" + DateTime.Now.Ticks.ToString())" id="ClientLogo" alt="" width="227" height="130" style="float: left;" />