Render action return View(); form problem

Question

I'm new to MVC, so please bear with me. :-)

I've got a strongly typed "Story" View. This View (story) can have Comments.

I've created two Views (not partials) for my Comments controller "ListStoryComments" and "CreateStoryComment", which do what their names imply. These Views are included in the Story View using RenderAction, e.g.:

<!-- List comments -->
<h2>All Comments</h2>
<% Html.RenderAction("ListStoryComments", "Comments", new { id = Model.Story.Id }); %>

<!-- Create new comment -->
<% Html.RenderAction("CreateStoryComment", "Comments", new { id = Model.Story.Id }); %>

(I pass in the Story id in order to list related comments).

All works as I hoped, except, when I post a new comment using the form, it returns the current (parent) View, but the Comments form field is still showing the last content I typed in and the ListStoryComments View isn’t updated to show the new story.

Basically, the page is being loaded from cache, as if I had pressed the browser’s back button. If I press f5 it will try to repost the form. If I reload the page manually (reenter the URL in the browser's address bar), and then press f5, I will see my new content and the empty form field, which is my desired result.

For completeness, my CreateStoryComment action looks like this:

    [HttpPost]
    public ActionResult CreateStoryComment([Bind(Exclude = "Id, Timestamp, ByUserId, ForUserId")]Comment commentToCreate)
    {
        try
        {
            commentToCreate.ByUserId = userGuid;
            commentToCreate.ForUserId = userGuid;
            commentToCreate.StoryId = 2; // hard-coded for testing

            _repository.CreateComment(commentToCreate);
            return View();
        }
        catch
        {
            return View();
        }
    }

Answer 1

I, and this is a personal opinion, think you've tackled this the wrong way.

Personally I would;

1. Create a view called ListStories.
2. Create a partial view that lists the stories.
3. Create a partial view to create a story.
4. When you want to add a story, simply show the add story html.
5. Then when the user presses a button you do a jQuery postback, add the new story and return a PartialView of either the new story or all the stories.
6. If you return a partial view of all stories then replace the bounding div that contains all the stories with the new data.
7. If you return only a single story then append it to the end of the div containing the stories.

I know this means a lot of re-work and it sounds complex and like a lot of work but doing it like this means greater flexibility later on because you can re-use the partial views or you can make a change once and all views using that partial view are now updated.

also, using jQuery means that the adding of stories looks seemless w/out any obvious post back which is nice.

Answer 2

The answer is to use return RedirectToAction(). Using this enforces the PRG pattern and achieves my goal.

My earlier comment to my original post did cause an error, that I guess I'm still confused about, but this works:

return RedirectToAction("Details", "Steps", new { id = "2" });