Durandal View´s with Razor and C# ViewModel

• Download MvcApplication1.zip - 2.3 MB

Note: I´ve added another article that describes an alternative way to perform similar things than this article describes : http://www.codeproject.com/Articles/867430/Durandal-View-s-with-Razor-and-Csharp-ViewModel-Up

Introduction 

The Article is about enabling use of razor and controller transfered viewmodel data for durandal's (or any other) javascript views. Normaly the view´s are simple htmlfiles with no razor functionality.

Background

For a recent project there was a need to localize view´s using c# resource files. We also wanted to change things on the views related to user groups,display data not transfered via ajax calls. In the basic version, this is not possible. Additionally we wanted to have SPA views editable and loaded from a database for CMS Like behaviour. I´ll write more about that in a second article.

Using the code

First of all i used "John Papas "Hot Towel Starterkit". Additionally you need to add "AttributeRouting" to your project. To begin, create a blank MVC4 Website and add theese two packages:

Install-Package HotTowel 

Install-Package AttributeRouting

Run the Website and you should get something similar to this:

The View´s used by the starter kit can be found in /App/Views/*.html 

To enable razor and dynamic, server served content in theese html files we need to perform a couple of steps.

Add a new Controller and setup routing 

Basically, durandal is looking for views in "/App/Views/" so we need to add a route that takes all requests for *.html files for that folder and re-route it to a razor view. AttributeRouting is the easiest way to perform this. Add a new , blank controller and keep the automatically added "index" action. Then add a GET Attribute like this: 

[GET("/App/Views/{viewname}.html")]

Additionally add the parameter "string viewname" to the index action. The result should be like this: 

 public class DurandalViewController : Controller
 {
   [GET("/App/Views/{viewname}.html")]
   public ActionResult Index()
   {

    return View();

   }

}

Next, we need to tell the controller where to route the request. In this example, we want to have all *.html requests routed to ~/Views/durandal/*.cshtml. Therefor we change the return statement like this:

public class DurandalViewController : Controller
{  // GET: /DurandalView/

       [GET("/App/Views/{viewname}.html")]
       public ActionResult Index()
       {
        return View("~/Views/Durandal/" + viewname + ".cshtml", demo);
       }
}

And that´s all we need to to on the controller side.

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.

When you now start the Application, it will result in an error: this is, because mvc4 does not know what to do with a request on that folder. With a simple trick, we can have mvc4 apply routing on that folder. Copy the web.config from below our /Views/ folder to /App/Views. This will enable asp.net routing for that folder.  

After that step, run the project and it should result in the same picture as when we first started the application. Not a big change by now. However, we now have full use of Razor and Model served Content for the views. Open the Controller again and add anything you like. In our example we simply add a text for demonstration purposes.

public class DurandalViewController : Controller
{
    //
    // GET: /DurandalView/
    [GET("/App/Views/{viewname}.html")]
    public ActionResult Index(string viewname)
    {

      string demo = "Here could be your advertisement!";
      return View("~/Views/Durandal/" + viewname + ".cshtml",model:demo);
    }
}

Additionally we edit the "home" view, "home.cshtml" and use razor to output our string:

@Model

When you now start the application, it will display our "Demo-String" on the home page:

Wondering if it´s still a "single page application?"...yes it is. If you look at firebug´s network monitor you´ll see that the page is served only at the first request. All subsequent requests´s are handled by durandal and do not reach the controller.

Points of Interest  

The interesting part on this are the things you are now able to perform. You can, for example, load view directly from a database to have "CMS-Like" behaviour. More on this in another guide later.