MVC3 View Update Issue

Question

Here is a action which sets up the images to ViewBag for display.

public ActionResult UploadPhoto()
{
    List<string> images = new List<string>();

    foreach (var file in Directory.GetFiles(AlbumManager.GetAlbumName(SessionManager.CurrentSession.PropertyId, true)))
    {
        images.Add(Server.RelativePath(file));
    }

    ViewBag.Images = images;

    return PartialView("UploadPhoto");
}

Here is a post action which is used to delete the selected image.

[HttpPost]
public ActionResult DeletePhoto(string imageName)
{
    AlbumManager.DeletePhoto(SessionManager.CurrentSession.PropertyId, imageName);
    return UploadPhoto();
}

As you can see, once the deletion is done, I'm redirecting it to the UploadPhoto action which has to print the currently existing images. But after post-back the deleted image is still displaying. I'm very unsure about this behavior. Please help me to resolve this.

I tried by clearing the model state in DeletePhoto action with following code, but no use.

ModelState.Clear();

My View:

@using (Html.BeginForm("DeletePhoto", "Add", FormMethod.Post, new { id = "PhotoDelete" }))
{
    <input type="hidden" name="imageName" id="imageName" />

    <div class="thumnailsBox">
        @foreach (var image in ViewBag.Images)
        {
            <div class="thumnailTails">
                <span class="thumbimage">
                    <input id="imageSubmit" type="image" alt="No Image" src="@Url.Content(image)" /></span>
            </div>
        }
    </div>
}

---

Solution:

In addition to IronMan84's answer, here is the actual solution to my problem:

[HttpPost]
public ActionResult DeletePhoto(string imageName)
{
    AlbumManager.DeletePhoto(SessionManager.CurrentSession.PropertyId, imageName);
    return JavaScript("location.reload(true)");
}

I'm rendering a script to reload the page here.

Answer 1

You're returning a PartialView in UploadPhoto, but your form is not actually targeting a DOM object to update with the result from that PartialView. I would recommend switching to Ajax.BeginForm(), and in your AjaxOptions including the name of the DOM object that you want to update. For more information, try looking at this page.

Answer 2

You're not redirecting to the UploadPhoto action.

Use RedirectToAction("UploadPhoto"); to redirect.

Also, you can try debugging the code to check if your AlbumManager is not caching your data or not performing the delete.

Answer 3

I'm thinking that MVC is caching your action output from the first method. You should check the documentation for OutputCache, You could try setting NoStore property, and if that didn't work, perhaps a Duration of 0 would prevent caching?