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>

How familiar are you with jquery? How invested are you doing it through asp.net mvc ajax? I think what your trying to do is pretty easy with jquery. You would just serialize the form post it via ajax and then on response stick the rendered partial view code into a div and that should be about it. — chobo2
– chobo2, Commented Aug 1, 2012 at 19:23
I've used jquery quite a bit with pure front-end stuff (things that would have been done with flash a few years ago) but I have no experience using jquery to talk to the server, although I've never shied away from learning something new. — Hypersapien
– Hypersapien, Commented Aug 1, 2012 at 19:36

Shyju · Accepted Answer · 2012-08-01 20:43:29Z

3

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="[email protected]" 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.

edited Aug 1, 2012 at 20:43

answered Aug 1, 2012 at 19:37

Shyju

220k106 gold badges421 silver badges499 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Hypersapien Over a year ago

THanks. When I tried this, I saw that the line item.closest("div.commentItem").html(data); was never actually getting executed. The rest of the jquery code was, as well as the backend code, but not the line that actually inserted the new html.

Shyju Over a year ago

check in firebug, whether that element exist (use console.debug(item.closest("div.commentItem")) / check the data coming back from your action

Hypersapien Over a year ago

Internal Server Error. The backend code is unchanged from above. Should that be altered at all?

Shyju Over a year ago

That means you have an error in your server code. Put break points in your Action method and see what is going on and where it is breaking

Hypersapien Over a year ago

I had been doing that, and it's moving through the code with no problem. But when it gets back to the browser, /EventList/NewMessage shows an internal server error.

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related