MVC Client Side and server Side View Engines

Introduction

Microsoft ASP.NET MVC framework follows a standard MVC pattern - the Model contains data that will be shown, the Controller performs actions when some event happens, initializes the Model, and passes it to the View, and the View takes a Model and renders the HTML output that would be sent to the client browser. This architecture is shown on the following figure:

Client(browser) sends some HTTP web request to the server-side. On the server we have controllers that handles request, takes the data using the model, and pass it to the view. View generates HTML that should be sent back to client. In MVC 3, there are several view engines that can be used - standard ASP.NET view engine, Razor, Spark, NHaml, etc. All of these view engines use different syntax for generating the view; however, they are all working in the same way - the model is taken on the server-side, formatted using the template, and HTML is sent to the client browser.

This article introduces a different concept of view engine - a client-side view engine that renders a view in a client browser. In this concept, the model and the controller are still on the server-side. However, instead of the HTML, JSON is generated as an output from the server-side, it is accepted on the client-side, and HTML is generated using the JavaScript templating engine. This architecture is shown on the following figure:

Sending HTTP request to the controller and handling model is same as in the standard method. However, instead of passing model object directly to the server-side view, in this case model is sent to the client side formatted as a JSON object where it is processed by the client side view engine.

Background

This example shows how the client-side JavaScript template engine in the ASP.NET MVC project can be used instead of the standard server-side templating engines. JavaScript templating engines use JSON objects as a model and generate HTML on the client side. Principle of JavaCript template engine is shown on the following figure:

Extracted From - http://www.codeproject.com/Articles/188467/Using-JavaScript-View-Engines-in-ASP-NET-MVC