ASP.NET MVC templates for both client and server

Question

Is this possible? For an example of what I want to achieve, take the Facebook commenting system. Existing comments are rendered on the server, but if I leave a new comment, it is created using AJAX on the client. Ideally, I'd like to store the template for the comment in only one place, and have access to it on both the server (rendered by Razor) and on the client (rendered in Javascript using JSON returned by the server).

Any ideas?

EDIT: I guess another option is to stick with purely server side rendering, and when the user posts a new comment, return the rendered HTML to the browser to be stuffed into the DOM. This isn't quite as nice, but I'd be interested to know if this is possible too.

Answer 1

I would oppose rendering server-side and then sending it back to your JS-script for bandwith and performance. Rather you should use a templating engine that works on both the server and the client. When the client wants to refresh the comments, it requests only the data for the comments and then replaces the old comments html with the new html rendered from the data using the same template that is being used on the server.

I've been using Mustache templating engine to achieve this using PHP and JS. There is a .NET version which I guess works for ASP.NET, and I'm guessing you're using ASP.NET.

So what I do is I make sure I have data formatted in the same way in PHP and JS and then render using a Mustache template.

http://mustache.github.com/

Mustache is simple to use. You take one object and one template and you get the HTML back.

Example object:

object->user = "Kilroy"
object->comment = "was here"
object->edited = true

Example template:

{{user}} {{comment}} {{#edited}}(This comment has been edited){{//edited}}

Result:

Kilroy was here (This commment has been edited)

Answer 2

The approach I've used is having a hidden HTML template with wildcards and/or class names, then on document ready loaded the contents via AJAX/JSON call and finally refreshed or added new items using the same template in javascript.

<ul id="template">
  <li>
     <span class="message"></span>
     <span class="date"></span>
  </li>
</ul>

<ul id="comments"></ul>

<script type="text/javascript">
    $().ready(function() {
        loadComments();
    });
    function loadComments() {
        $.post('@Url.Action("GetComments", "Forum")', {}, function(comments) {
            for (i = 0; i < comments.length; i++){
                loadComment(comments[i]);
            } 
        }, 'json');
    }
    function loadComment(comment) {
        var template = $('#template li').clone();
        template.find('.message').text(comment.message);
        template.find('.date').text(comment.date);
        $('#comments').append(template);
    }
</script>

For new messages, you can post the message to the server and then add it to the list using the loadComment function, or refresh the whole comments list. It's not a complete sample, but hope you get the idea.