Making a simple modular single paged website using ASP .Net MVC and knockout.js

This post will be about how to make a simple website that supports multiple modules which are displayed in a single page.

By default unlike a lot of other javascript frameworks, knockout.js doesn't really support modules. But fortunately we can implement this functionality using knockout.js itself.

We are also going to use bootstrap because it already has builtin support for tabs and other useful features.

The structure of the website will be based on tabs. On the left of the tab header bar we will have a menu from which we can select a module to open just by clicking on it. Once we open a module, a tab header will appear up in the tab header bar with the name of the module. And down in the tab content pane, the content of the current tab will appear.

Bellow we can see a sketch of the website:

We will have a javascript object type which will hold the name, id and functions to load and unload a module from the module tab content area.

It looks like this:

	function ModuleViewModel(id, title, loadInTabFunction, unloadFromTabFunction) {
	this.id = id;
	this.title = title;
	this.loadInTab = loadInTabFunction;
	this.unloadFromTab = unloadFromTabFunction;
	}

view raw module1.js hosted with ❤ by GitHub

To create a module, we create some objects of this type and pass them to the tab manager javascript object. This javascript object is responsible for managing the tabs which means to create them, destroy them or show them. Only one instance of this object type should be allowed.

It looks like this:

	function TabsManagerViewModel() {
	this.modules = ko.observableArray();
	this.registerModule = function(module) {
	this.modules.push(module);
	};
	this.tabs = ko.observableArray();
	this.menuItemClick = function(module, viewModel) {
	for (var i = 0; i < viewModel.tabs().length; i++) {
	if (viewModel.tabs()[i].module.id === module.id) {
	$("#" + viewModel.tabs()[i].tabHeaderId()).trigger("click");
	return;
	}
	}
	var moduleTab = new TabViewModel(module);
	viewModel.tabs.push(moduleTab);
	module.loadInTab($("#" + moduleTab.tabContentId()));
	$("#" + moduleTab.tabHeaderId()).trigger("click");
	};
	this.closeButtonClick = function(tab, viewModel) {
	for (var i = 0; i < viewModel.tabs().length; i++) {
	if (viewModel.tabs()[i].module.id === tab.module.id) {
	var moduleTab = viewModel.tabs()[i];
	moduleTab.module.unloadFromTab($("#" + moduleTab.tabContentId()));
	viewModel.tabs.remove(moduleTab);
	if (viewModel.tabs().length > 0) {
	$("#" + viewModel.tabs()[viewModel.tabs().length].tabHeaderId()).trigger("click");
	}
	return;
	}
	}
	};
	}

view raw module2.js hosted with ❤ by GitHub

It contains the necessary javascript functions to display an opened module, to hide an opened module, to open a new module and to close an opened module.

And finally we have another javascript object to represent an opened module and to provide data to the user interface from the module object mentioned earlier. This includes the ids of the html elements for the module tab header and content. Using these ids we can link the tab header to display the tab content when it is opened.

Its definition is found bellow:

	function TabViewModel(module) {
	this.module = module;
	this.tabHeaderId = ko.computed(function() {
	return "tabHeader" + this.module.id;
	}, this);
	this.tabHeaderUrl = ko.computed(function() {
	return "#tabContent" + this.module.id;
	}, this);
	this.tabContentId = ko.computed(function() {
	return "tabContent" + this.module.id;
	}, this);
	this.title = ko.computed(function() {
	return this.module.title;
	}, this);
	}

view raw module3.js hosted with ❤ by GitHub

When we open a module, a new instance instance of the object above is created and inserted into the active tabs collection of the tab manager. It also calls the load method of the module to load its content. In this case I used a dedicated ASP .Net MVC controller for modules to load their data from the server once they are opened. 

The controller is called "ModulesController" and it looks like bellow:

	using System.Web.Mvc;
	namespace SimpleModularWebsite.Controllers
	{
	public class ModulesController : Controller
	{
	[HttpPost]
	public ActionResult GetModuleView(string viewName)
	{
	return PartialView(viewName);
	}
	}
	}

view raw modules4.cs hosted with ❤ by GitHub

To hide or display tabs, we will use a functionality of bootstrap. It already has support for tabs. We just provide the proper ids, href, data-toggle and css classes for the tab header and tab content. Once these are hooked up the tabs will work.

This is the html code and knockout.js template to generate the tabs:

	<ul class="nav nav-tabs">
	<li class="dropdown">
	<a class="dropdown-toggle" data-toggle="dropdown" href="#">
	Menu
	<span class="caret"></span>
	</a>
	<ul class="dropdown-menu" data-bind="foreach: modules">
	<li>
	<a href="#" data-bind="text: title, click: function(data, event) { $parent.menuItemClick(data, $parent) }"></a>
	</li>
	</ul>
	</li>
	<!-- ko foreach: tabs -->
	<li>
	<a data-toggle="tab" data-bind="attr: { href: tabHeaderToggleUrl, id: tabHeaderId }">
	<span data-bind="text: title"></span>
	&nbsp;
	<button type="button" class="close" aria-label="Close" data-bind="click: function(data, event) { $parent.closeButtonClick(data, $parent) }">
	<span aria-hidden="true">&times;</span>
	</button>
	</a>
	</li>
	<!-- /ko -->
	</ul>
	<div class="tab-content" data-bind="foreach: tabs">
	<div data-bind="attr: { id: tabContentId }" class="tab-pane fade">
	<br/>
	<div>
	</div>
	</div>
	</div>

view raw module6.html hosted with ❤ by GitHub

The tab header has a class and some special properties called href and data-toggle. The values of these properties tell the html element what other element to trigger when we click on it. In this case we trigger the tab content element. In the href field we actually set the tab content element id to know what element to trigger.

When we open a module and we call the module's load function, we can create some new knockout.js models and apply bindings inside the tab content html element. 

But we have to be careful when we close the module, to remove the knockout.js bindings and delete any remaining javascript objects. This is not really ideal.

We should provide each module with its own space to create javascript objects. Then we can forcefully destroy its space when we close the module. I think this is why some javascript frameworks similar to knockout have some sort of scope for modules, especially Angular 1.5.

There is a demo attached at the address: https://1drv.ms/u/s!AkDfK07lnj1xi-o5GkMUBCVLlFr7vQ

The demo is a bit incomplete. For a real life website you need some kind of authorization and authentication support. You can't really allow anyone to access any module of the website. The inaccessible modules can be hidden from the user when the main page is rendered but also for proper safety when a module is loaded from the "ModuleController" on the server side the permissions should be checked for the logged user.

Also, in this example I just showed the modules in some tabs. But you can really split the screen estate into any way you want. You can save the loaded models for a user to customize his page. When he enters the page, we check the saved loaded modules for him and load them again. You just need something to manage them, load them, hide them, allocate screen estate and html to show them and so on.