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.
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="/Content/menu.css" />
<title>Generating CSS menu</title>
<script src="/scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="/scripts/jquery.loadJSON.js")" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
var menu = [
{ "Link": "1", "Text": "File",
"Menu": [ { "Link": "1.1", "Text": "New" },
{ "Link": "1.2", "Text": "Open" },
{ "Link": "1.3", "Text": "Save"},
{ "Link": "2.2", "Text": "Close" }
]
},
{ "Link": "2", "Text": "Edit",
"Menu": [ { "Link": "2.1", "Text": "Cut" },
{ "Link": "2.2", "Text": "Copy" },
{ "Link": "2.2", "Text": "Paste" },
]
},
{ "Link": "3", "Text": "Tools", "Menu": [{ "Link": "3.1", "Text": "About"}] }
];
$('.template').loadJSON(menu);
});
</script>
</head>
<body>
<div id="wrap">
<h1>Generating Structure for the CSS menu</h1>
<ul id="navbar">
<li class="template">
<a href="page.aspx" class="Link"><span class="Text"></span></a>
<ul>
<li class="Menu"><a href="page.aspx" class="Link"><span class="Text"></span></a></li>
</ul>
</li>
</ul>
<p>Lorem ipsum dolor sit amet. Donec vel massa. Ut nibh. Donec placerat ultrices dui. Morbi eu dui eget mauris cursus pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras ante neque, tempor eu, semper sit amet, hendrerit vitae, quam. Nullam ante. Pellentesque arcu sapien, suscipit in, elementum vitae, vulputate quis, metus. Quisque sollicitudin leo a diam. Quisque in risus sit amet mi faucibus feugiat. Ut ullamcorper pede a libero. Donec nisl</p>
</div>
</body>
</html>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
Graduated from Faculty of Electrical Engineering, Department of Computer Techniques and Informatics, University of Belgrade, Serbia.
Currently working in Microsoft as Program Manager on SQL Server product.
Member of JQuery community - created few popular plugins (four popular JQuery DataTables add-ins and loadJSON template engine).
Interests: Web and databases, Software engineering process(estimation and standardization), mobile and business intelligence platforms.