Options for ASP.NET page with matching client-side and server-side markup?

Question

Suppose I'm building a StackOverflow clone using webforms ASP.NET and jQuery. The Question page has a question, several answers, and comments under each. Requirements:

1. Users can post new answers and comments, and edit existing ones, without postbacks.
2. No UpdatePanels; the AJAX calls retrieve just the JSON they need, not HTML fragments.
3. The page loads with all existing answers and comments in place (no javascript needs to run to read the page).

What I'm trying to figure out is how to do this without having to maintain two sets of markup (one that's bound on the client using some form of jQuery templating, and one that's bound on the server using traditional WebForms).

What are my options?

Answer 1

While it is not exactly what you asked for you may want to consider rendering the HTML on the server via a service (not using update panel) and sending it to the client instead of using client templates. It couldn't be that bad because Facebook are doing it: http://www.facebook.com/video/video.php?v=596368660334 If it is suitable in your situation depends on how rich your markup is and what percentage of the data sent over the wire will be markup as opposed to content.

Answer 2

It doesn't use jQuery but the Spark view engine provides a JavascriptViewResult class that allows you to render templates on the client as well as on the server. This is intended for the exact situation that you describe. See this post by K. Scott Allen for a simple explanation of how this works.

You can then use the same View page on the server and the client. On the server you pass a viewmodel object to the view and on the client you pass it a JSON object. You can even include code in your views as long as it is valid code for both the C# and JavaScript languages. For example var x = 1; will compile in both C# and Javascript.