MVC 3 - How do you return a Display Template from an action method?

Question

I have a view that displays a list of comments. It does this via the DisplayTemplate. All I have to do is something like @Html.DisplayFor(x => x.BlogPost.PostComments) and all the comments render appropriately.

There is a form at the bottom of the page to add a new comment. This page utilizes progressive enhancement. So if javascript is disabled then the form submits like normal, adds the comment to the database, then redirects to the action that renders the blog post. However, if javascript is available then jQuery hijacks the form's submit and makes the post via ajax. Well because the comment markup is in a display template, I don't know how to return it from the action method so that jQuery can drop it on the page.

I know how to do this with partial views. I would just have the action method return the right partial view and jquery would append the response to the comment container on the page.

Before I go chopping out my display template in favor of a partial view, is there a straight forward way that I'm missing to send back a 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 the page loads it doesn't need to worry about it because it uses the templates in the standard way:

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

I just want to know how I might send a single comment that utilizes the display template back to jQuery.

Answer 1

You may try returning the partial HTML representing the newly posted comment:

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

and on the client side append 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 2

Does this question give you what you are looking for? Seems to indicate that you can call a HTML helper from an action.