MVC 3 - How to return a display template from an action method?

Question

I have a view that displays a list of comments. He does this through a DisplayTemplate. All I need to do is something like @Html.DisplayFor(x => x.BlogPost.PostComments) , and all comments are displayed accordingly.

There is a form at the bottom of the page to add a new comment. This page uses progressive enhancement. Therefore, if javascript is disabled, the form is submitted as usual, adds a comment to the database, and then redirects to the action that displays the blog post. However, if javascript is available, jQuery captures the submit form and makes the message through ajax. Good, because the markup of the comments is in the display template, I don’t know how to return it from the action method so that jQuery can delete it on the page.

I know how to do this with partial representations. I just would like the action method to return the correct partial view, and jquery will add a response to the comment container on the page.

Before I start cutting out my display template in favor of a partial view, is there a direct path that I don’t have enough to send the display template from the controller?

Here is my action method:

  public ActionResult AddComment(PostComment postComment) { postComment.PostedDate = DateTime.Now; postCommentRepo.AddPostComment(postComment); postCommentRepo.SaveChanges(); if (Request.IsAjaxRequest()) return ??????? else return RedirectToAction("BlogPost", new { Id = postComment.BlogPostID }); } 

When a page loads, it need not be worried because it uses templates in a standard way:

 <div class="comments"> @Html.DisplayFor(x => x.BlogPost.BlogPostComments) </div> 

I just want to know how I can send one comment that uses the display template back in jQuery.

Answer 1

Does this question provide what you are looking for? It seems to indicate that you can invoke the HTML helper from the action.

Answer 2

You can try returning partial HTML containing a recently posted comment:

 if (Request.IsAjaxRequest()) { return PartialView( "~/Views/Shared/DisplayTemplates/Comment.cshtml", postComment ); } 

and on the client side add this comment to the comments container:

 $.post('@Url.Action("AddComment")', { ... }, function (result) { $('#comments').append(result); // or $('#comments').prepend(result); if you want it to appear on top }); 

Answer 3

Create a partial view /Shared/DisplayTemplate.cshtml with the following razor code:

 @Html.DisplayFor(m => Model) 

Then in your controller (or, preferably, in the base controller class) add the method in these lines:

 protected PartialViewResult PartialViewFor(object model) { return PartialView("DisplayTemplate",model); } 

In the case of OP:

 public ActionResult AddComment(PostComment postComment) { postComment.PostedDate = DateTime.Now; postCommentRepo.AddPostComment(postComment); postCommentRepo.SaveChanges(); if (Request.IsAjaxRequest()) return PartialViewFor(postComment); else return RedirectToAction("BlogPost", new { Id = postComment.BlogPostID }); }