Click here to Skip to main content
Click here to Skip to main content

Durandal View´s with Razor and C# ViewModel

, 24 Jan 2014
Rate this:
Please Sign up or sign in to vote.
Using Razor for SPA View´s

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:

<section>
    <h2>@Model</h2>
    <h2 class="page-title" data-bind="text: title">

</h2></section> 

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.  

 

History

Keep a running update of any changes or improvements you've made here.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Tim Cadenbach
Software Developer (Senior) Tente International
Germany Germany
I´m a german software engineer, passionate microsoft fan and working with everything .net framework offers.
main working area, job based, is mvc4 and asp.net besides jquery and css frameworks.
 
I published a couple of articles in print mediums and now start to write guides and articles for code project.
Follow on   LinkedIn

Comments and Discussions

 
SuggestionMight be Missing the Point PinmemberMember 234859127-Jan-14 11:03 
GeneralRe: Might be Missing the Point PinmemberTim Cadenbach16-Feb-14 11:27 
GeneralRe: Might be Missing the Point PinmemberZewa8-Mar-14 3:10 
Questionnice PinmvpSacha Barber23-Jan-14 20:18 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140709.1 | Last Updated 24 Jan 2014
Article Copyright 2014 by Tim Cadenbach
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid