Durandal View´s with Razor and C# ViewModel - Update 2015

• Download durandalexample.zip - 935.2 KB

Introduction

In an older article http://www.codeproject.com/script/Articles/MemberArticles.aspx?amid=9559190. I showed how to use razor cshtml views with durandal. After a year, we have a somewhat "better" way to achieve this now.
While the old way is still working and useful for some purposes, there´s also a way to directly map controller actions to durandal views instead of the "generic" action i described in the older article.

Using the code

The ViewLocator of Durandal can be called with some parameters to tell durandal where to look for view files. We can use this to solve our problem.

Step one, change Durandal´s behaviour for views
First we´ll take a look at main.js and look for this:

define(['durandal/app', 
'durandal/viewLocator',
'durandal/system', 
'plugins/router', 
'services/logger'], boot);

function boot(app, viewLocator,viewEngine, system, router, logger) {
app.start().then(function () {
   viewLocator.useConvention();
});
[...].

This tells durandal to use the "default convention" for views e.g. /app/views/*.html

To tell durandal to use something else we now change this behaviour:

// Add "durandal/viewEngine" to the function definition:
define(['durandal/app',
        'durandal/viewLocator',
        'durandal/viewEngine',
        'durandal/system',
        'plugins/router',
        'services/logger'], boot);

// change viewLocator initalisation:
app.start().then(function () {
        viewLocator.useConvention('viewmodels', '../../durandal');
        viewEngine.viewExtension = '/';
});

The first argument to viewLocation.useConvention tells durandal to set the /Apps/viewmodels/ directory as the location for the view models js files.
The second parameter however, tells durandal to use the URL http://<mydomain>/durandal/ for the views
Additionally the viewExtension parameter tells durandal that views have no extension (like our mvc controllers...)
Now, when Durandal is looking for the view named 'shell', it will reference http://<mydomain>/durandal/shell/

As of MVC Convention, this URL will be mapped and the system looks for a controller named "Durandal" and "Shell" as the action name

Add a new Controller

In the next step, we must now add a new controller to handle the actions and routes for our views:

// will render dynamic views for Durandal
public class DurandalController : Controller
{
    public ActionResult Shell()
    {
        return View();
    }

    public ActionResult Home()
    {
        return View();
    }

    public ActionResult Nav()
    {
        return View();
    }

    public ActionResult Details()
    {
        return View();
    }

    public ActionResult Sessions()
    {
        return View();
    }

    public ActionResult Footer()
    {
        return View();
    }
}

Now we need to setup the views

This part is simple, just add a folder "Durandal" below "Views" and copy all *.html files from /App/Views/ to the newly created folder. Rename the files to .cshtml and you´re done.

After this step we´re done and can launch the application.
The result is the normal look of our hot towel project, however with a fully working mvc controller in the background.

Points of Interest

Both ways, this one and the one discussed in the older article, have their pros and cons. For cms behaviour you might need a more generic action but the one discussed in this example has it´s uses also.