Click here to Skip to main content
12,063,121 members (63,183 online)
Click here to Skip to main content
Add your own
alternative version

Stats

18.5K views
524 downloads
23 bookmarked
Posted

Durandal View´s with Razor and C# ViewModel

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

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.  

License

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

Share

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.

You may also be interested in...

Comments and Discussions

 
SuggestionMight be Missing the Point Pin
Member 234859127-Jan-14 12:03
memberMember 234859127-Jan-14 12:03 
GeneralRe: Might be Missing the Point Pin
Tim Cadenbach16-Feb-14 12:27
memberTim Cadenbach16-Feb-14 12:27 
GeneralRe: Might be Missing the Point Pin
Zewa8-Mar-14 4:10
memberZewa8-Mar-14 4:10 
Questionnice Pin
Sacha Barber23-Jan-14 21:18
mvpSacha Barber23-Jan-14 21:18 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    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 | Terms of Use | Mobile
Web03 | 2.8.160204.4 | Last Updated 20 Jan 2015
Article Copyright 2014 by Tim Cadenbach
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid