Question

I know this question has been addressed many times on SO, but for the life of me I can’t get it to work, none of the solutions proposed are fixing the problem for me. So here is the scenario, I have a main form where the user enters some data, and uploads a picture. The upload is happening via ajax (using valum’s file uploader), so the file is posted to the controller as soon as it’s uploaded, I then resize the picture server side and return a thumbnail which is contained inside a partial view. The partial view is on the same view that the user enters their details in. This all works perfectly fine the first time, and the file is sent to the server and a thumbnail is generated and returned to the partial view, but this is not happening the second time. Here is the Main form, containing the section where the partial view is to be returned(ThumbnailDiv):

@using (Html.BeginForm("Upload","Home", FormMethod.Post)) 
{
    @Html.ValidationSummary(true)
    <fieldset >
      //Some input fields
      //Uploader
            <div id="file-uploader">
                <noscript>
                    <p>Please enable JavaScript to use file uploader.</p>
                </noscript>
            </div>
    </fieldset>
}
        <input type="submit" value="View thumbnail" id="btnGetThumbnail" />
        <div id="ThumbnailDiv" style="float: right;width: 500px; height: 500px;">
        </div>


<script type="text/javascript">
    $(document).ready(function () {
        $("#btnGetThumbnail").click(function (e) {
            e.preventDefault();

            var myDiv = $('#ThumbnailDiv');
            $.ajax({
                url: '@Url.Action("GetThumbnail", "Home")',
                type: 'GET',
                cache: false,
                success: function (result) {
                    myDiv.html(result);
                }
            });

        });
    });

</script>

Here is the GetThumbnail action on the Home controller:

    [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
    public ActionResult GetThumbnail()
    {
        ViewBag.TheTime = System.DateTime.Now.ToString();
        return PartialView("~/Views/Home/ThumbnailFinal.cshtml",mvm);
    }

I’m passing the current time to the partial view to check whether the request are being updated, which they are, however I can’t seem to be able to tell the view to re render the thumbnail image. Here is the Partial View (ThumbnailFinal.cshmtl):

@ViewBag.TheTime

<img src="@Url.Action("GenerateThumbnail")" alt="" />

The Problem:

The image is not being refreshed and is failing to call the GenerateThumbnail action the second time. The time is being updated so I know the GetThumbnail action is called, however the image is not recalling the GenerateThumbnail action the second time. How would I resolve this? Is there any better way to render an image from an action inside a partial view?

Any help would be greatly appreciated.

Answer 1

It looks like the image is cached on the client. You could bust the cache by appending a random query string parameter:

<img src="@Url.Action("GenerateThumbnail", new { seed = DateTime.UtcNow.Ticks })" alt="" />

or disable the cache on the GenerateThumbnail controller action by decorating it with the [OutputCache] attribute, the same way you did with your GetThumbnail action.