SPA with DurandalJS

DurandalJS is a client side java-script library which designed to make Single Page Applications(SPA). Durandal is built on jQuery, Knockout and RequireJS libs.

DurandalJS is using Asynchronous Module Definition (AMD) pattern by referring RequireJS. In my previous post I showed how to use RequireJS with ASP.net MVC.

In this post I'll explain how to create simple Single Page Application using DurandalJS.

First create ASP.net MVC internet application and install following NuGet packages.

• Durandal
• Durandal.Router
• Durandal.Transitions

This will add some folders and required java-script files to the project. 

Now we need to create a view, for host the Single Page Application. So, add an Action for HomeController and related view page like below.

Add script references to view. Using data-main attribute, RequireJS will identify the location of Start up scripts. We must add a div container with an id of "applicationHost". That's the place Single Page Application going to be host.

Add views, viewmodels and main.js file in to App folder. 

main.js file contains start-up scripts. So we can configure Durandal in there. Change main.js file like below.

We can enable debugging by using system.debug(true); This debug function is cross browser support and it only log details, when debug is enabled.

DurandalJS will start application by using app.start(). We can configure for application specific conventions like routing and also configure for mobile devices in this script. Finally set application root. You can see in our Single Page Application there are two views. Student and Person. So I have map those views using DurandalJS router.

Next we need to add shell.js, which is the root module that we configured in the main.js file. In shell module we activate student view. That means in start up of application student view will be default.

In DurandalJS for each view-model there must be relevant view file. So add shell.html. In root page, we have two links for student and person views. Next we need to bind each active view using KnockoutJS.

Now all the configurations parts are done. So add relevant view-models and views for Student and Person. After that, folder structure must be like below.

Content of each view and view-models should be like below. 

Run the application and browse /Home/Demo.

You can find the source of this demo in GitHub.

Modular Java Scripts with RequireJS

RequireJS is a java script module loader library. Using a modular script loader like RequireJS, will improve speed and quality of the code.

Why need web modules?

• Web sites are turning into Web apps
• Code complexity grows as the site gets bigger
• Assembly gets harder
• Developer wants discrete JS files/modules
• Deployment wants optimized code in just one or a few HTTP calls

RequireJS Demo

In this demo I'll use ASP.net MVC internet project. Add RequireJS nuget package to the project.

Add a Web Api controller named CallerController with a method like below.

Now we have to design the view. So add an Action method to HomeController.

 Add a view called Demo.chtml.

In Demo.chtml, I have added a div element which has id of message. When Demo page loads, a java-script will call CallerController and response will show in this div. Before close body tag, I have referenced the RequireJS. This is a best practice of referring java-script files. Reason is when the page loads, java-script file will request after DOM elements loaded. In script reference there's a new attribute called data-main, which tells RequireJS to load start up scripts.

Now we have to develop the middle part of view and service.
Create java-script file for call the service.

In this file, define('dataservice') is name of the module. In next argument we can pass dependency modules. In the function call as arguments we are passing references for each dependency modules.
Now create config, caller and main modules like below.

In main module we need to configure RequireJS. I have passed path for 'jquery' module. Define start up code. In the function call showMessage method in caller java-script file. So that's all the things we have to do.
Run the application and go to /Home/Demo. You'll see below page.

So now, the application is working properly. But the app folder, which contains java-scripts files are look like this.

So we can structure it more appropriate way like below.

That change affects for the paths of each java-script module. We must configure java-script module paths in RequireJS like below.

I added this source to GitHub. You can have a look on this demo.

Consume Web API OData Service

In my previous post, I have explained about how to create an ASP.Net Web API OData service. In this post I'll explain how to consume that service using Breeze JS. This demo will continue with the project I have created in my previous post.

Install nuget packages for Breeze JS and Data JS.

In the HomeController add a new action method called Demo. After that add a view for that.

In that view, we need to add some java script references.

Now we have to write code for consume the ASP.Net Web API OData Service and bind those data to view. When we write object orient java scripts, we can add namespaces just like C#. In below code the namespace is myNameSpace.

Then we'll configure the breeze EntityManager. EntityManager is the gateway for the service and cached objects. Using the EntityManager we handles the asynchronous communication with services.

Now add a view model java script class which have a property called students and a function called load. This students is an array of student which stores students, retried from the service. This load function is use to load students from the service and add each student to the students array.

Now we have to call that load function and after that we have to enable students property, as a Knockout observable array.

Below is the full java script code that we wrote.

Now we have to design the view page. We are using Knockout bindings for that.

Now run the application and browse to /Home/Demo. You'll see the asynchronously loaded table.