jQuery Templates/View Engines in ASP.NET MVC

on

jQuery Templates/View Engines in ASP.NET MVC

By , 25 Apr 2012
 

Table of contents

  1. Introduction
  2. Background
  3. Using the code
    1. Model
    2. Controller
    3. View
  4. Implementation
    1. List page
    2. Details page
    3. Edit page
    4. Hierarchical view
  5. Conclusion

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 in the following figure:
JavaScript-View-Engine/template-mvc.png
The client (browser) sends an HTTP web request to the server-side. On the server we have controllers that handle the request, takes data using the model, and passes it to the view. The view generates HTML that should be sent back to client. In MVC 3, there are several view engines that can be used - the standard ASP.NET view engine, Razor, Spark, NHaml, etc. All of these view engines use different syntax for generating the view; however, they all work 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 the 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 in the following figure:
JavaScript-View-Engine/template-json.png
Sending an HTTP request to the controller and handling the model is the same as in the standard method. However, instead of passing the model object directly to the server-side view, in this case, the 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. The principle of the JavaScript template engine is shown in the following figure:
JavaScript-View-Engine/templating-engine.png
With JavaScript template engines, you will need to pass the model object (usually some JavaScript object) to the view. The view will have a template that defines how this model object will be rendered. Once it binds the JavaScript model with the template, it will produce HTML as a standard server-side view engine. As you can see, client-side templating engines work the same way as standard server-side MVC rendering engines. The only difference is that the views are processed in the browser.
Currently, there are several templating engines such as jsRender (successor of the deprecated jQuery template), Knockout, Pure, noTemplate, jsTemplate, Populate, and jTemplates, but this example uses the jQuery loadJSON templating engine. The jQuery loadJSON plug-in is a templating engine that binds a JSON object to a clean HTML template and generates the view on the client-side. To bind the JavaScript model with a template you will need to call something like the following line of code:
$("#template").loadJSON(model); //If you use loadJSON plugin
$("#template").render(model);   //if you use jsRender plugin
This call will take the HTML fragment from the HTML in the current browser, and use it as a template for binding with the JavaScript object (model). As an example imagine that you have the following JSON object that should be placed in the template:
model = {
        "Name":"Emkay Entertainments",
        "Address":["Nobel House","London","UK"],
        "Contact":"Phone"
}
 
<div id="template">
     <textarea id="Name" />
     <span class="Address"></span>
     <input name="Contact" />
</div>
If you call loadJSON with this model applied to the template, you will get the following output:
<div id="template">
     <textarea id="Name">Emkay Entertainments</textarea>
     <span class="Address">Nobel House</span>
     <span class="Address">London</span>
     <span class="Address">UK</span>
     <input name="Contact" value="Phone"/>
</div>
This is a simple JavaScript templating engine that has all the necessary features to implement an effective client-side templating engine, however you have other ones too. As an example the same code generated using the jsrender template would be:
var model = {
    "Name":"Emkay Entertainments",
    "Address":[{"Item":"Nobel House"},
               {"Item":"London"},
	       {"Item":"UK"}	       ],
    "Contact":"Phone"
}
 
<script id="template" type="text/x-jsrender">

Comments

Post a Comment