PartialView not clearing after ajax postback

Question

I have this weird thing happening.

I have a PartialView with 3 fields on it. I do a jQuery ajax post to my action result and if the model passes validation i save the record. I also then set the model to empty and pass it back to the view as a partial view.

    public ActionResult jQueryAddComment(Comment comment)
    {
        if (ModelState.IsValid)
        {
            //do stuff here
            comment = new Comment();
        }

        return PartialView("AddNewComment", comment);
    }

When I get back to the page my JS replaces the contents of the comments div with the html from the new partial view.

    function submitComment() {
        $.post('/Home/jQueryAddComment', { forumItemId: $('#id').val(), owner: $('#owner').val(), text: tinyMCE.get('text').getContent(), emailAddress: $('#emailAddress').val() }, function (result) {
            alert(result);
            $('.AddNewComment').html(result);
        });            
    }

However, when the page renders the values are back in place. I can see that an empty model is being passed to the view so why are my previous values still there?

Even the alert shows the values in place even though I'm passing an empty object to the partial view in the controller.

edit

I should mention that I can't clear the fields within the JS of the page as I want to use the same code to render errors as well as successful requests.

Answer 1

The standard HTML helpers look into ModelState and ViewData for values before using the values you passed to the helper.

This may help: http://stackoverflow.com/questions/3444994/how-to-clear-textboxes-defined-with-mvc-html-helpers/3445110#3445110