In ASP.NET MVC, how do I return a different view when submitting a form via ajax?

Question

I am attempting to create a message board in ASP.NET MVC. I have two partial views, one to display a message (this is recursive and will display all child... messages as well), and one to display a form to submit new messages. When a message gets posted, I want the form to submit via ajax, and return the partial view to display a message (the message that was just posted).

This is the partial view for displaying the form (NewMessage)

@model Intranet.Entities.ForumRepository.Message

<div id="@Html.Raw("formbox" + Model.ParentID)">

@using (Ajax.BeginForm("NewMessage", new AjaxOptions { UpdateTargetId = "formbox" + Model.ParentID })) {    
    @Html.TextAreaFor(m => m.Text, new { @class = "responsebox" })
    @Html.HiddenFor(m => m.ParentID)
    <br /><input type="submit" value="Save Comment" class="savebutton" />
}

</div>

And its submit method

[HttpPost]
public ActionResult NewMessage(ForumRepository.Message message) {
    if (ModelState.IsValid) {

        RouteData.Values.Add("Responses", message);
        //message.SaveMessage();

        return PartialView("DisplayMessage", message);
    } else {
        return PartialView(message);
    }

}

When I attempt to submit the form, the form view doesn't get replaced with the DisplayMessage view. It keeps showing the form. Running in debug mode shows that the backend code is getting called.

I'm fairly certain that it has something to do with the fact that the div that the ajax code is using to redisplay is inside the NewMessage view (it can't replace its own container) but I have no idea how to set this up so that it will work.

---

As requested, here is some rendered HTML

<div id="formbox0">

<form action="/EventList/NewMessage/Q6UJ9A00T49L" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#formbox0" id="form0" method="post"><textarea class="responsebox" cols="20" data-val="true" data-val-required="The Text field is required." id="Text" name="Text" rows="2">
</textarea><input data-val="true" data-val-number="The field ParentID must be a number." data-val-required="The ParentID field is required." id="ParentID" name="ParentID" type="hidden" value="0" />    <br /><input type="submit" value="Save Comment" class="savebutton" />
</form>
</div>

Answer 1

I prefer to avoid the AjaxBeginForm method and like to write handwritten and Clean jQuery code.

I am giving a css class (commentItem) to the container div so that i can use it in my jQuery selector later.

@model Intranet.Entities.ForumRepository.Message

<h3> Enter your comment</h3>
<div id="formbox@Model.ParentID" class="commentItem">   
  @using(Html.BeginForm())
  {
     @Html.TextAreaFor(m => m.Text, new { @class = "responsebox" })
     @Html.HiddenFor(m => m.ParentID)
     <input type="submit" value="Save Comment" class="savebutton" />
  }     
</div>
<script type="text/javascript">
  $(function(){
    $(".savebutton").click(function(e){
       var item=$(this);
       e.preventDefault();

       $.post("@Url.Action("NewMessage","EventList")",
                         item.closest("form").serialize(),function(data){

                   item.closest("div.commentItem").html(data);

       });

    });

  });

</script>

This code will replace the existing form (or whatever inside the container div) with the content received from your Action method.